Новогодние календари событий (html, css, js)

Страница: « 1 2 3 »

Сообщений 11 страница 20 из 23

Поделиться122.11.21 20:14

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9026

С утра я вешала календарь событий у себя дома на стенку и меня осенило что надо бы поискать коды для календарей на форум/сайт. Для тех кто не знает, календарь событий - это такая штука, которую используют чтобы устраивать праздничные марафоны. Например, пользователи открывают каждый день по новой ячейки и делают что там говорится.

АДАПТИВНЫЙ КАЛЕНДАРЬ СОБЫТИЙ НА HTML&CSS
Позволяет добавить и стилизовать календарь событий на Новый год (Рождество).

# увеличивается по клику

Автор скрипта: Ian Yates, полная статья с уроком на английском вот здесь. Перевод специально для forumd.ru.

Код и описание

Большой плюс этого календаря в том что он на css и написан так чтобы подстраиваться под мобильные:

# увеличивается по клику

Администраторы форумов mybb&Co могут ставить себе такое на админ-страницы: Администрирование - Страницы. Проверено, там работает!

Картинки в стиле стоят для примера, можно вообще заменить на любые.
CSS
Ставить либо туда где стоят стили сайта или фрорума, либо рядом с html частью, но тогда код надо обернуть в теги <style>тут ваш цсс код</style>
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
HTML
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Пояснения
Во-первых, пожалуйста не удаляйте копирайт из хтмл:
<footer><a href='http://webdesign.tutsplus.com/tutorials/how-to-build-a-festive-advent-calendar-with-css-grid--cms-30070'>Envato Tuts+ 2017 ☃️</a>
</footer>
Кстати, туда (выше или ниже) при желании можно добавить свой текст или ссылки.

Во-вторых, сами дни (их количество) добавляются и удаляются. Сначала надо изменить хтмл часть с днями:
<section class='grid-1'>
<div class='title'></div>
<div class='day-1'></div>
<div class='day-2'></div>
<div class='day-3'></div>
<div class='day-4'></div>
<div class='day-5'></div>
<div class='day-6'></div>
<div class='day-7'></div>
<div class='day-8'></div>
<div class='day-9'></div>
<div class='day-10'></div>
<div class='day-11'></div>
<div class='day-12'></div>
<div class='day-13'></div>
<div class='day-14'></div>
<div class='day-15'></div>
<div class='day-16'></div>
<div class='day-17'></div>
<div class='day-18'></div>
<div class='day-19'></div>
<div class='day-20'></div>
<div class='day-21'></div>
<div class='day-22'></div>
<div class='day-23'></div>
<div class='day-24'></div>
</section>

А потом поправить в стиле (t - это место для title, то есть для картинки):
grid-template-areas: "t t t"
"d23 d20 d12"
"d2 d14 d4"
"d5 d22 d16"
"d1 d7 d9"
"d10 d11 d18"
"d13 d3 d15"
"d6 d17 d8"
"d19 d24 d21";
@media only screen and (min-width: 500px) {

.grid-1 {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: "t t t d2 d7 d8"
"t t t d4 d11 d12"
"t t t d19 d9 d13"
"d6 d1 d24 d24 d21 d20"
"d17 d18 d24 d24 d5 d22"
"d3 d23 d16 d14 d10 d15";
}

}
/* картинки для событий */
.title {
grid-area: t;
}
.day-1 {
grid-area: d1;
}
.day-1 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /child.svg);
}
.day-2 {
grid-area: d2;
}
.day-2 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /donut.svg);
}
.day-3 {
grid-area: d3;
}
.day-3 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /santa.svg);
}
.day-4 {
grid-area: d4;
}
.day-4 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … hild-3.svg);
}
.day-5 {
grid-area: d5;
}
.day-5 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/book.svg);
}
.day-6 {
grid-area: d6;
}
.day-6 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … wflake.svg);
}
.day-7 {
grid-area: d7;
}
.day-7 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/gift.svg);
}
.day-8 {
grid-area: d8;
}
.day-8 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … ocking.svg);
}
.day-9 {
grid-area: d9;
}
.day-9 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/gift.svg);
}
.day-10 {
grid-area: d10;
}
.day-10 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/bird.svg);
}
.day-11 {
grid-area: d11;
}
.day-11 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … nowman.svg);
}
.day-12 {
grid-area: d12;
}
.day-12 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … hild-2.svg);
}
.day-13 {
grid-area: d13;
}
.day-13 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /holly.svg);
}
.day-14 {
grid-area: d14;
}
.day-14 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /horse.svg);
}
.day-15 {
grid-area: d15;
}
.day-15 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/book.svg);
}
.day-16 {
grid-area: d16;
}
.day-16 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/bird.svg);
}
.day-17 {
grid-area: d17;
}
.day-17 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … ocking.svg);
}
.day-18 {
grid-area: d18;
}
.day-18 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /donut.svg);
}
.day-19 {
grid-area: d19;
}
.day-19 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /child.svg);
}
.day-20 {
grid-area: d20;
}
.day-20 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /holly.svg);
}
.day-21 {
grid-area: d21;
}
.day-21 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … lake-2.svg);
}
.day-22 {
grid-area: d22;
}
.day-22 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /santa.svg);
}
.day-23 {
grid-area: d23;
}
.day-23 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … hild-2.svg);
}
.day-24 {
grid-area: d24;
}
.day-24 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/tree.svg);
}
В последнем куске процитированного кода можно подставить свои картинки, которые будут появляться при нажатии на цифры.
Если хотите чтобы задание\событие на переворачивающейся табличке было текстом, меняем:
Вот это
На это
Код:
  .day-24 .back {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/tree.svg);
  }
Код:
 .day-24 .back:after {
    content: "Выпить молока"; /*текст события*/
}
И так с каждым днём, где нужен текст. Чтобы надпись была по центру:
.door .back {
background-size: contain;
background-position: center center; /*положение картинки*/
background-repeat: no-repeat;
background-color: #2e313d; /*цвет фона*/
transform: rotateY(180deg);
text-align: center;
}
Добавляем выделенное красным в указанный кусок кода.

КАЛЕНДАРЬ СОБЫТИЙ ДЛЯ КИНОМАРАФОНА
Позволяет добавить и стилизовать календарь событий на Новый год (Рождество). Календарь работает таким образом что для каждого дня можно добавить фильм, песню или видеоролик. Код адаптивный и подстраивается под размер экрана.

# увеличивается по клику

Автор скрипта: Kit Jenson. Перевод специально для forumd.ru.

Код и описание

Администраторы форумов mybb&Co могут ставить себе такое на админ-страницы: Администрирование - Страницы. Проверено, там работает!

Большая часть календаря написана на css и при желании можно переделать внешний вид дома на свой вкус.
CSS
Ставить либо туда где стоят стили сайта или фрорума, либо рядом с html частью, но тогда код надо обернуть в теги <style>тут ваш цсс код</style>
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
HTML
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
JS
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Скрипт ставим ниже хтмл-части и стиля, иначе ничего работать не будет.

Как изменить количество дней?
Сейчас в скрипте прописано максимальное количество дней в месяце - 31. То есть, если страницу посещает участник 5 декабря, то окна предыдущего дня открыты, то есть просмотрены. Если вы хотите уменьшить количество дней марафона, меняем в трёх местах.

Во-первых, в хтмл-части удаляем лишние дни:
thirtyone={
title: "Silent Night",
video_id: "sMvURdq8V6U",
blurb: "Composed in 1818 by Franz Xaver Gruber to lyrics by Joseph Mohr in the small town of Oberndorf bei Salzburg, Austria. It was declared an intangible cultural heritage by UNESCO in 2011. The song has been recorded by a large number of singers from every music genre. The version sung by Bing Crosby is the third best-selling single of all-time.",
icon: "https://media2.giphy.com/media/oUM2k2cif7jSE/giphy.gif?cid=ecf05e479bm6bnknt8h4zas8h41hyi06l82jm87hpu1cg2dn&rid=giphy.gif",
},

Во-вторых, в скрипте правим два куска:
var block_count = 31
Красным меняем на желаемое количество дней.
if(n > 30) {
n = 30
Зелёное меняем на количество дней марафона -1 день.

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер‌‍

Поделиться1111.10.23 03:37

Автор: Сэн
Гори, но не сгорай
Последний визит:
13.04.24 00:39
Уважение: +504

#p189160,Automation Baby написал(а):

#p189130,Сэн написал(а):
А страничка тут - забыла, что надо х)
А ты CSS часть не поставила? Я не могу найти у тебя стили к этому календарю. Такое ощущение что про них забыли.

А
А надо было?
Для меня в данный момент описание к кодам выглядит так, что или css код вставляем, или хтмл)))

Ну тогда понятно, чо не так. Потому что сss я не вставлял, было неочевидно, что надо и то, и это)

А сss кстати важно, куда вставлять? Имею в виду место
Добавлено спустя 17 минут 1 секунду:
Последний вопрос снимается, увидела в пояснялке внутри спойлера к сss
Вот это вот к слову - куда вставлять, что вставлять надо оба и аналогичные по важности комментарии лично я бы вынесла до спойлера с кодами непосредственно - просто чтобы чел изначально знал, на что идёт х) я бы скорее всего не пыталась поставить, если бы сразу увидела приписку, что надо оба кода, и если бы не увидела вовремя, как оформить сss код в хтмл)

Подпись автора

Ав бу ми - живу, творю, пишу книгу и рисую арты на заказ тут: Солнечный ветер~
Редактор/корректор/критик и так далее с текстом - вот здесь

Цитировать Сообщение 11

Поделиться1211.10.23 03:49

Автор: Сэн
Гори, но не сгорай
Последний визит:
13.04.24 00:39
Уважение: +504

#p162737,Automation Baby написал(а):

grid-template-areas: "t t t"
"d23 d20 d12"
"d2 d14 d4"
"d5 d22 d16"
"d1 d7 d9"
"d10 d11 d18"
"d13 d3 d15"
"d6 d17 d8"
"d19 d24 d21";

@media only screen and (min-width: 500px) {

.grid-1 {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: "t t t d2 d7 d8"
"t t t d4 d11 d12"
"t t t d19 d9 d13"
"d6 d1 d24 d24 d21 d20"
"d17 d18 d24 d24 d5 d22"
"d3 d23 d16 d14 d10 d15";
}

}

А вот это вот всё в пояснялке - это шо? Это пример или это надо искать в коде, чтобы потом там править t? (как, кстати? Я тут опять не понял, как должен выглядеть результат, с примером было бы попроще х)) ~~я мастер задавать тупые вопросы хд~~

Подпись автора

Цитировать Сообщение 12

Поделиться1311.10.23 04:13

Автор: Сэн
Гори, но не сгорай
Последний визит:
13.04.24 00:39
Уважение: +504

#p162737,Automation Baby написал(а):

А потом поправить в стиле (t - это место для title, то есть для картинки):

На то, что t надо менять, натолкнуло вот это предложение

Просто на данный момент оно сбивает с толку, так как, во-первых, выглядит незаконченным (после двоеточия ждёшь продолжение предложения, пояснение, что именно править - но после цитат идёт следующее предложение, то есть ощущается как то, что пояснения нам так и не дали), во-вторых, там три цитаты, и если, допустим, мозг машинально относит поясняющее предложение с двоеточием к первой цитате, то что делать с остальными - вопрос)) Это именно то, что надо править? То, на что надо править? Матрёшка в матрёшке? Цепочка рукопожатий?? What происходит вообще??? ~~утрирую, но, думаю, понятно, какие эмоции вызывает хд~~

Ну и так как дальше смысл предложений указывает на то, что какие-то правки к этому моменту уже должны быть произведены, а ты при этом сидишь ещё на предыдущем этапе, не понимая, а что делать... Крч, ну такое) и не всем хватит смелости задать тупой вопрос хд

К слову, если цитата с картинками реально не относится к ситуации предложения с двоеточием, то я бы рекомендовала пояснялку к этой цитате вынести над ней, чтобы визуально отделить её от предыдущих и было видно, что к чему относится приводим вид инструкции в единообразие: в плане, чтобы пользователь понимал в итоге, что пояснялка к цитате находится непосредственно над цитатой, а нужный код нужной ему части - под спойлером с соответствующим названием (например)

Подпись автора

Цитировать Сообщение 13

Поделиться1411.10.23 04:30

Автор: Сэн
Гори, но не сгорай
Последний визит:
13.04.24 00:39
Уважение: +504

#p189223,Сэн написал(а):

Для меня в данный момент описание к кодам выглядит так, что или css код вставляем, или хтмл)))

Ситуация "или - или" возникла после прочтения вот этого предложения (в частности, там, где я выделила жирным):

#p162737,Automation Baby написал(а):

Большой плюс этого календаря в том что он на css и написан так чтобы подстраиваться под мобильные

Так как html не упоминается, читается пояснялка как чисто плюс кода именно на css, и то есть дальше, типа, речь будет только про него) ну и соответственно, без соответствующей пометки, что это части одного кода, а не два разных, мы имеем ситуацию, как была у меня

Решается достаточно просто - или перефразированием, или вообще подтиранием упоминания конкретной части кода
То есть так:

Большой плюс этого календаря в том, что часть его написана на css, и так, чтобы подстраиваться под мобильные

Или так:

Большой плюс календаря в том, что он написан таким образом, чтобы подстраиваться под мобильные

В последнем случае убрала "этого", чтобы обилие указательных местоимений не мешало пониманию смысла (иначе получался избыток) ~~хотя в этом варианте, наверное, стоит вовсе предложение перефразировать, а то корявенько...~~

Подпись автора

Цитировать Сообщение 14

Поделиться1511.10.23 07:05

Автор: ЭГоistka
Участник
Последний визит:
Сегодня 13:49
Уважение: +83

#p189224,Сэн написал(а):

А вот это вот всё в пояснялке - это шо? Это пример или это надо искать в коде, чтобы потом там править t? (как, кстати? Я тут опять не понял, как должен выглядеть результат, с примером было бы попроще х)) ~~я мастер задавать тупые вопросы хд~~

Вам в начале дан скрин таблицы
Это массив описывающий "имена ячеек", и прописана грид разметка (расположение ячеек при широкой верстке и для экранов с шириной менее 500 пикселей)

в этом куске
.title {
grid-area: t;
}
говорится что содержимое с class title (см хтмл код) помещается в зону t

а то, что t надо менять, натолкнуло вот это предложение

t - менять не надо, в противном случае поедет таблица т.к. браузер не поймет, что и куда вы захотите поместить
таким образом, все что не нашло точного расположение улетит наверх или в ближайшую понятную браузеру ячейку
а то место что должно быть занято, но к нему не найдется заполняющий контент будет пустой дыркой
в контейнер title помещаете то что будет занимать площадь 3*3 ячейки

Просто на данный момент оно сбивает с толку, так как, во-первых, выглядит незаконченным (после двоеточия ждёшь продолжение предложения, пояснение,

описать простым языком гриды тем кто еще не вникал это задачка на 5+++

Отредактировано ЭГоistka (11.10.23 07:09)

Цитировать Сообщение 15

Поделиться1611.10.23 15:51

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9026

#p189224,Сэн написал(а):

А вот это вот всё в пояснялке - это шо?

Это сетка расположения элементов для grid-верстки. t - это картинка, d10 и прочее - это ячейки с календарными днями. То как они написаны в коде (grid-template-areas) это то как они выстроятся на странице. Если ты добавляешь больше дней, например, надо дописать их по аналогии с другими d+цифра в эту часть кода. Если убираешь дни, надо наоборот стереть. Можно реорганизовать ячейки, то есть можно написать d5 d10 тогда сначала будет ячейка с днём 5, а потом с 10, если напишешь d10 d5, тогда сначала будет 10 день, а потом 5.

#p189226,Сэн написал(а):

Это именно то, что надо править? То, на что надо править? Матрёшка в матрёшке? Цепочка рукопожатий?? What происходит вообще???

Три цитаты - три места из исходного кода календаря, которые нужно править по аналогии с тем что уже есть. То есть, элементарно: хочешь больше дней надо добавить html разметку с селекторами новых дней d25 и так далее, а потом пишешь им стили по аналогии с тем как уже автором кода были написаны стили другим дням. Ну а чтобы было легче найти места где надо дописать стили, нужные куски кода процитированы.

И это не я придумала, такие пояснения у автора кода, я просто их перевела.

#p189227,Сэн написал(а):

Так как html не упоминается, читается пояснялка как чисто плюс кода именно на css, и то есть дальше, типа, речь будет только про него) ну и соответственно, без соответствующей пометки, что это части одного кода, а не два разных, мы имеем ситуацию, как была у меня

Css в принципе не работает без html, если что. В html разметка, в css эта самая разметка красится, выравнивается и т. д. Если пояснять подобные элементарные вещи в каждой инструкции скрипта пояснялка будет огромной. Не лучше ли тебе почитать статью от Герды где она как раз освещает подобные базовые вещи, а потом уже браться за скрипты?

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

Поделиться1711.10.23 17:36

Автор: Сэн
Гори, но не сгорай
Последний визит:
13.04.24 00:39
Уважение: +504

#p189240,Automation Baby написал(а):

И это не я придумала, такие пояснения у автора кода, я просто их перевела.

а пон ладно)

#p189240,Automation Baby написал(а):

Css в принципе не работает без html, если что.

я в курсе, я потому и говорю, что если бы сразу увидела инфу, что это скрипт для тех, кто разбирается в сss в том числе, я бы и браться за него не стала - потому что я знаю хтмл-ку, но не шарю за стиль как раз) и то есть я привыкла работать только с хтмл, не затрагивая стили. И десять лет спокойно копировала скрипты, понимая, что именно я копирую, и, ориентируясь по инструкциям, вставляла в поле для скриптов (хтмл верх, хтмл низ - ну, вот это всё, что есть в обычной админке), при этом не залезая в Свой стиль (где как раз идёт уже сss), так как у меня не было в этом необходимости и цели)

#p189240,Automation Baby написал(а):

Не лучше ли тебе почитать статью от Герды где она как раз освещает подобные базовые вещи, а потом уже браться за скрипты?

Ссылку в студию, посмотрю я просто конкретно в базу со скриптами и графонием не лазила до последних дней, так что пока не сильно ориентируюсь, где оно х)

просто бурчание в сторону

Просто фд всё-таки достаточно объёмный форум в плане информации, поэтому зачастую подфорумы, в которых нет необходимости лезть, просто обходятся вниманием) Ну и да, акцентирую внимание ещё раз - если бы я сразу понял, что тут не "или - или", а один код, просто называется разными частями оформления скриптов, то я б и вправду не полезла что-то ставить без того, чтобы ознакомиться с базовыми вещами)
Я просто не ожидала, что тут базовые вещи предполагают знание программного кода, чем обычно в подавляющем большинстве рядовые в этом плане ролевики не обладают хд Казалось, что тут информация адресована к той же аудитории, что и ЕТП)
Пока же по факту получается, что бэкграунд для освоения форума нужен немного другой. И это получается сразу отсев той аудитории, которая на данный момент, я так понимаю, понадобилась) Тех, кто в кодах не особо чтобы шарит, но хотел бы понимать, например ~~и в результате получается деление на своеобразную элитку и тех, кто не, проще говоря хд~~
И с последними выводами, на самом деле, ваще неудивительно, что народ не особо чтобы хочет тут активить - тот, что не мастера. Они просто ощущают разницу в знаниях и не пытаются оставаться там, где, без цели чему-то научиться в сss и с графонием, скорее всего останешься не у дел (в том плане, что и поговорить особо не о чём тада, а мы ж на форумах за поговорить обычно, где активность в итоге хорошая получается х))
Карочи, я о чём: хочешь больше "простого" народа - говори более "простым" языком и ориентируйся на новичка, нуба, не читавшего гайды - называй как хошь, факт один.
Если такой цели нет - хорошо, я в следующий раз свои мысли по поводу оформления инструкций оставлю при себе) прост подумала, что тебе это важно знать: видеть, где люди спотыкаются в процессе

Подпись автора

Цитировать Сообщение 17

Поделиться1811.10.23 17:37

Автор: Сэн
Гори, но не сгорай
Последний визит:
13.04.24 00:39
Уважение: +504

#p189229,ЭГоistka написал(а):

описать простым языком гриды тем кто еще не вникал это задачка на 5+++

спасибо за попытку, вроде попонятнее стало хд

Подпись автора

Цитировать Сообщение 18

Поделиться1911.10.23 18:12

Автор: nou
nou studio
Последний визит:
06.10.24 18:10
Уважение: +2119

Сэн
Первая часть (вариант) вообще не скрипт, всего лишь смесь хтмл с цсс
Непонятно только почему написано автор скрипта
Вам никто не запрещает код цсс вставить в хтмл, дополнительно обернув в в теги <style> </style>
Пользуясь описанным вами методом вы просто не замечали цсс, но он присутствует в любой табличке, даже в скрипте со стрелками вверх—вниз
Если у вас проблемы с перекраской/переоформлением календаря вы всегда можете оставить заявку, даже бесплатную
В качестве закрепления освоения гридов могу помочь, хотя там в принципе уже все есть
То что вы описали «в мыслях» чаще всего зависит от самого человека, можно сесть напрячься разобраться/научиться или сдаться и сетовать, что все сложно и все редиски

Знания собираются по мелким кирпичикам, но если вы их не укладываете поэтапно, дом не построится

Отредактировано nou (11.10.23 18:15)

Поделиться2011.10.23 20:13

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9026

#p189244,Сэн написал(а):

Ссылку в студию, посмотрю

Как сделать дизайн форума/сайта? Все о создании своего дизайна.

#p189244,Сэн написал(а):

это скрипт для тех, кто разбирается в сss в том числе, я бы и браться за него не стала

Любой скрипт и любой код требует хотя бы минимальных знаний, если хочется его как-то изменить/настроить/модифицировать под себя/оформить. Или человека, который сделает это за тебя. Я думала это очевидно, а потому почти сразу скинула полный код модифицированного календаря на 31 день. Его было достаточно скопировать и вставить себе на страницу. Так как у меня не было особо времени самой разбираться, я закинула задачку чату gpt, он с блеском её выполнил за меня. Я только всё скопировала и вставила. Мне кажется немного странным пытаться дописать код, а потом жаловаться что нигде не написано что код для тех кто знает css.

Что касается этого:

#p189244,Сэн написал(а):

И десять лет спокойно копировала скрипты, понимая, что именно я копирую, и, ориентируясь по инструкциям, вставляла в поле для скриптов (хтмл верх, хтмл низ - ну, вот это всё, что есть в обычной админке), при этом не залезая в Свой стиль (где как раз идёт уже сss), так как у меня не было в этом необходимости и цели)

Если бы ФД был только для майббшных пользователей, то имеет смысл писать про хтмл-верх-низ-свой-стиль инструкции к каждому коду (что и куда копировать). Но ФД мультеплатформенный (а сейчас пытается стать ещё и международным). Эта тема лежит в разделе для УНИВЕРСАЛЬНЫХ кодов, подходящих для любой платформы, соответственно. А потому тут нет указаний для маббшников про хтмл-верх и низ (практически, за редким упоминанием). У нас есть большая инструкция с азами про html, css и то куда ставятся скрипты, стили и т.д.: Куда вставлять коды на Mybb форумах? Как не путаться в кодах? И есть статья от Герды. Я думаю это больше чем достаточно для объяснений и информирования что и куда ставить.

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

Ответить

Страница: « 1 2 3 »

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»

Имя

font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens

format_align_left format_align_center format_align_right list table_view

link add_photo_alternate ondemand_video mood mic

content_cut lock_open format_quote code

horizontal_rule anchor live_help emoji_symbols library_add

ТочкамиDots

КружочкамиCircles

КвадратамиSquares

ЦифрамиNumbers

Римскими цифрамиRoman Numerals

Без обозначенийNo Markers

Многострочный пункт спискаMultiline List Item

ТекстText

HTML

Javascript

Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms

10px 12px 14px 16px 18px 20px 22px

ЗаголовокTitle Автосжатие больших картинокAuto-resize large images Скрыть от гостейHide from guests Ссылка «скачать» Download link Имя читателяReader's name Добавлено спустя…Added after... Надстрочный текстSuperscript text Подстрочный текстSubscript text БлокBlock HTML иконка

Скрыть инструментарий Показать инструментарий

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],

Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],

Красный пост[block="saledpost"]saledpost[/block],

Синий пост[block="forsalepost"]forsalepost[/block],

Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]

Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]

Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]

Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]

Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)

Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,

Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)
Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)

Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,

Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)

Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,

Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)

Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]

Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]

Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]

Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]

Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]

Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]

Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]

Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]

Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]

Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]

Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]

Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]

Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе

Новогодние календари событий (html, css, js)

Сообщений 11 страница 20 из 23

Поделиться122.11.21 20:14

Поделиться1111.10.23 03:37

Поделиться1211.10.23 03:49

Поделиться1311.10.23 04:13

Поделиться1411.10.23 04:30

Поделиться1511.10.23 07:05

Поделиться1611.10.23 15:51

Поделиться1711.10.23 17:36

Поделиться1811.10.23 17:37

Поделиться1911.10.23 18:12

Поделиться2011.10.23 20:13

Быстрый ответ

Теги оформления специальных постов

Теги оформления картинок

Теги оформления контента

Вот это	На это
Код: .day-24 .back { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/tree.svg); }	Код: .day-24 .back:after { content: "Выпить молока"; /текст события/ }