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

Объявление

АКЦИЯ: Раздаём дизайны бесплатно

Доработаем макет под ваш проект;
Сверстаем;
Сделаем мобильную версию по желанию.

Подробнее

Поисковой ресурс

Проект от команды FD
для текстовых ролевиков

Спойлеры и обсуждение

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Конкурс! Интерфейс и взаимодействие! Главный приз - 2000 рублей.
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄
❗ ❗ ❗ Technical work is underway. Something here and there may be crooked. We'll fix it soon. :)

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

Привет, Гость! Войдите или зарегистрируйтесь.



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

Сообщений 1 страница 4 из 4

1

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


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

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

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

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

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

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

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

Картинки в стиле стоят для примера, можно вообще заменить на любые.

CSS
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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 день. То есть если у вас марафон в 20 дней в этом куске кода надо ставить 19. И так далее.

Всех с Наступающим! https://i.imgur.com/dKbONOz.png?1

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

If you don't know what is it about, it's about money (польская пословица)
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+2

2

Первопост обновлён. Добавлен календарь для новогоднего киномарафона:

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

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

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

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

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

If you don't know what is it about, it's about money (польская пословица)
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

3

дизайн интересный

0

4

Первопост обновлён. В первом календаре исправлен баг с фоном и добавлены инструкции как сделать чтобы при перевороте задание показывалось текстом, а не картинкой.

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

If you don't know what is it about, it's about money (польская пословица)
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

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

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


ТЕСТ
ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляй ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удали символы: "https://", "https://" или "www."

добавить скрипт/код [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]