Главная / Каталог скриптов для uCoz / Информеры

Информер материалов в тёмном дизайне для ucoz

Добавлено 25-03-2022 в 23:24

Категория Информеры
Авторwaak
Просмотры636
Комментарии2
Понравилось12
Скачиваний31

Информер материалов в тёмном дизайне для ucoz

Здравствуйте! Очередная просьба в мастерской и снова она на не полная точнее нет не какой конкретике в ней и по этому я написал данный материал отталкиваясь от сайта пользователя который опубликовал просьбу.

Немного не по теме! если вы пишите просьбу то хотя бы опишите её по подробнее! у меня не всегда есть время на придумывание смысла и задачи чтобы выполнить вашу просьбу дайте немного инфы что да как!

Вернёмся обратно в данном посте было написано о создании информера материалов для вывода на главную страницу но для какого модуля не слова и какая инфа должна выводиться то же не написано по этому я нашел сайт автора и исходя уже от его дизайна набросал данный информер

Об информере

Ну что тут сказать так как сайт автора в тёмном стили то естественно что я использовал тёмные цвета в дизайне при написание кода так же решил сделать так что бы первый материал был большим а другие миниатюрными но при этом не превышали высоту большова так что всего материалов выводится 5 включая большой ну а что получилось у меня давайте посмотрим на скриншотах

Скриншоты

Полный вид информера

уменьшенный вид

как видите в большом я вывожу немного больше информации чем в других но при этом не переживайте мы не будем создавать несколько информеров обойдёмся одним но с маленьким не до четом а именно что бы всё корректно работало нужно что бы материалов было не меньше двух в модуле для которого будет использоваться информер иначе будет бяка но я думаю что это не проблема и по этому продолжим дальше и перед установкой давайте посмотрим видео демонстрацию что бы убрать все сомнения и увидеть всё так сказать в работе

Видео демонстрация

Ну и для тех кому понравился мой вариант или просто захотелось поставить к себе что бы нагляднее так сказать прощупать всё самому предлагаю наконец то приступить к его установки

Установка информера

Ну что же приступим и для начало зайдём в админ панель и создадим наш информер а для этого на главной странице выбираем пункт Информеры а затем создать после чего решаем для какого модуля будите использовать данный информер и выбираете его а я покажу на примере каталог файлов

Параметры информера

Название информера: На своё усмотрение
Раздел:Каталог файлов
Тип данных:Материалы
Способ сортировки::На своё усмотрение
Количество материалов:5
Количество колонок:1
Материалы за текущий период:Не трогаем

Отлично не забываем сохранить! Теперь в созданном нами только что информере жмем на ссылку Шаблон информера и меняем всё на код ниже

Код

<?if($NUMBER$='1')?>
<div class="waakwidinfbcl">
  <div class="waakwidinfbcbglav">
  <span>$CATEGORY_NAME$</span>
  <a href="$ENTRY_URL$">
  <img src="/img/4.png" alt="" class="waakwidinfbcimgbg" >
  <img src="$IMG_URL1$" alt="" class="waakwidinfbcimg">
  </a>
  <a href="$ENTRY_URL$"><h2>$TITLE$</h2></a>
  <p> $MESSAGE$</p>
  <div class="waakwidinfbcbglavfoot">
  <ul>
  <li>Просмотров<b>$COMMENTS_NUM$</b></li>
  <li>Добавил<b>$USERNAME$</b></li>
  <li>Рейтинг<b>$RATING$/$RATED$</b></li>
  <div class="clr"></div>
  </ul>
  </div>
  </div>
  </div>
  <div class="waakwidinfbcr">
<?else?>
<div class="waakvidminbc">
  <div class="waakvidminbcl">
  <a href=""> <img src="$IMG_URL1$" alt=""></a>
  </div>
  <div class="waakvidminbcr">
  <a href="$ENTRY_URL$"><h2>$TITLE$</h2></a>
  <p>$MESSAGE$</p>
  </div>
  </div>

<?endif?>

Отлично не забываем сохранить!

Теперь установим сам код вывода информера на страницу, для этого просто переходим на нужную страницу и в нужное место размещаем код который представлен ниже

Код информера

Код

<div class="waakwidinfbc">
  <div class="waakwidinfbcb">
  $MYINF_3$
  </div>
  </div>
  </div>

Отлично меняем код вывода информера на тот что получился у вас и сохраняем так же хочу сказать сразу что структура тут верная и удалять нечего не нужно так как лишний на первый взгляд закрывающий див тут совсем не лишний и закрывает блок из шаблона информера так что ставьте всё как есть не переживайте!

Ну а теперь подключим стили для нашего информера материалов, для этого переходим в общую таблицу стилей css и в самый её конец добавляем код что находиться ниже

Таблица стилей css

Код

.clr {clear: both;}

.waaksitibc {
  max-width: 1000px;
  margin: 100px auto;
  padding: 0 50px;
}

.waakwidinfbcb {
  display: flex;
}
.waakwidinfbcb a {text-decoration: none;}
.waakwidinfbcl {
  width: 50%;
  background: rgba(64, 64, 64, .3);
  padding: 20px 20px 0;
}
.waakwidinfbcr {
  width: 50%;
  padding: 0 20px;
}
.waakwidinfbcbglav {
  position: relative;
}

.waakwidinfbcbglav img {
  position: absolute;
  width: 80%;
  height: 240px;
  object-fit: cover;
  z-index: 2;
}
  .waakwidinfbcbglav a {display: block;}
  .waakwidinfbcbglav a .waakwidinfbcimg {
  position: relative;
  width: 100%;
  height: 240px;
  object-fit: cover;
  z-index: 1;
  opacity: .7;
}
  .waakwidinfbcbglav a:hover .waakwidinfbcimg {
  opacity: 1;
}

.waakwidinfbcbglav h2 {
  display: block;
  color: #ff9900;
  font-size: 20px;
  padding: 15px 0;
}
.waakwidinfbcbglav h2:hover {
  color: #919191;
}
.waakwidinfbcbglav p {
  display: block;
  color: #919191;
  font-size: 13px;
  line-height: 22px;
  height: 45px;
  overflow: hidden;
}
.waakwidinfbcbglav span {
  position: absolute;
  z-index: 3;
  display: inline-block;
  padding: 0 15px;
  background: #7a4e0c;
  line-height: 24px;
  color: #e3e3e3;
}
.waakwidinfbcbglavfoot ul {list-style: none;}

.waakwidinfbcbglavfoot ul li {
  float: left;
  padding-right: 10px;
  margin: 10px 0;
  color: #919191;
  font-size: 12px;
  line-height: 20px;
  opacity: .6;
}
.waakwidinfbcbglavfoot ul li b {
  font-style: normal;
  margin-left: 10px;
  color: #ff9900;
}

.waakvidminbc {display: flex;margin: 0 0 15px;}
.waakvidminbcl {
  width: 80px;
  overflow: hidden;
  background: rgba(64, 64, 64, .3);
  padding: 10px;
}
.waakvidminbcr {
  width: calc(100% - 80px);
  padding: 0 16px;

}

.waakvidminbc {
  height: 90px;
  overflow: hidden;
}
.waakvidminbc img {
  width: 60px;
  height: 70px;
  object-fit: cover;
}
.waakvidminbcr h2 {
  display: block;
  color: #919191;
  font-size: 16px;
  padding: 10px 0 0;
}
.waakvidminbcr a:hover h2 {color: #ff9900;}
.waakvidminbcr p {
  display: block;
  font-size: 12px;
  color: #919191;
  padding: 10px 0;
  line-height: 17px;
}
.waakvidminbc:last-child {
  margin: 0;
}
.waakvidminbc:hover .waakvidminbcr {
  background: rgba(64, 64, 64, .3);
}

@media screen and (max-width: 800px){
.waakwidinfbcb {display: block;}
.waakwidinfbcl, .waakwidinfbcr {width: 100%;}
.waakwidinfbcr {margin-top: 20px;}
}

Отлично не забываем сохранить!

Теперь нам осталось скачать файл и залить одну картинку к себе в файловый менеджер в папку img данная картинка имитирует трещины на картинках материала .

Последним действием нам остается только по чистить кеш у браузера комбинацией клавиш Ctrl+F5 и после этого установка завершена!

Скачать файлы материала

31 загрузок 282.9 Kb Скачать

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

ВОЙТИ РЕГИСТРАЦИЯ

Оставить комментарий

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

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал

waak

на все страницы вывести можно скриптом через запрос на персональную страницу пользователя а на странице со списком закладок я вывел так

Код

У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал

pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал

pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js