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

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

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

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

Информер материалов в тёмном дизайне для 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 и после этого установка завершена!

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

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

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

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

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

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

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

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

Меню

Полезно

Комментарии

waak

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

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

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

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души