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

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

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

Подробнее

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

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

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

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

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

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

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



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

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

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);
  }

В последнем куске процитированного кода можно подставить свои картинки, которые будут появляться при нажатии на цифры.


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

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

Автор скрипта: 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

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

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
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.

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

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

3

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

0