ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный вид материалов D1 в 2 колонки

Стильный вид материалов D1 в 2 колонки

Не знаю может уже кто то такой же материал выкладывал, рискну, вообщем решил скрестить два материала и поделиться с вами,может кому понадобится. Данный вид подходит для каталогов и информер,эффекты взял с сайта http://mvcreative.ru,так что можно поменять самому посмотрев там примеры.
Установка:
1.Скачиваем файлы,в архиве нужны CSS и JS файлы,картинки к другим эффектам.
2.Установка CSS,на главную страницу каталога добавляем

Код

3.Установка JS,тоже на главную страницу каталога перед </body>

Код

4.Ну и данный код в вид материалов или в тело информера.
Настройки вида: width: 290px и height: 190px я уже делал под свой сайт,так что меняйте под свои пропорции чтоб было равномерно на странице каталога
Настройки эффектов: в hovernews.js,размер шрифта например ищем номер эффекта tpl4 и меняем.
Для примера сами эффекты - Hover эффекты ну а менять их можно меняя классы в коде.

Код

<div style="width:50%;float:left;">
<div class="vidnews">
<div class="he-wrap tpl4">
<img src="$IMG_URL1$" class="img">
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div>
</div>
<div class="content">
<p class="info-title a2" data-animate="fadeInDown">$TITLE$</p>
<div class="detail a2" data-animate="fadeInUp"><p><?substr($MESSAGE$,0,150)?>...</p></div>
<a href="$ENTRY_URL$" class="more a2" data-animate="fadeInRight">Подробнее о материале</a>
</div>
</div>
</div>
</div>
</div>

<style>
.vidnews {
  margin-bottom: 10px;
  opacity: 0.9;
}
.img {
  display: block;
  border-radius: 5px;
  background-size: 100% 100%;
  position: relative;
  margin: 0;
  width: 290px;
  height: 190px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
</style>

<?substr($MESSAGE$,0,150)?> 150 количество символов в кратком описании
Кстати можно и 3 колонки и в 4 меняя настройки,но с данным эффектом мало места для краткого описания материала.

14 Февраля 2016 Загрузок: 10 Просмотров: 1695 Комментариев: (11)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Angerfist

Похожие материалы

Оставь свой отзыв

Комментарии: 11
Порядок вывода комментариев: Kosten 14 Февраля 2016 20:48¹ 0 Очень не дурно получилось. Angerfist 14 Февраля 2016 20:49² 0 да а то старый вид думаю устарел решил сократить стили и добавил hover Kosten 14 Февраля 2016 20:55³ 0 Но сейчас старое все переделывают, и хорошие скрипты получаются. Сопрано 15 Февраля 2016 10:56⁴ 0 Вот так в титле можно выставить. Код <?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>....<?else?>$TITLE$<?endif?> Сафрон 15 Февраля 2016 15:02⁵ 0 Angerfist, нужно было на клик также оставить, это закругленные углы, думаю вы это не учли, так собрали нормальный вид. Angerfist 15 Февраля 2016 15:49⁶ 0 Цитата Сафрон Angerfist, нужно было на клик также оставить, это закругленные углы, думаю вы это не учли, так собрали нормальный вид. Да точно спасибо,наскоряк и не заметил) В стилях надо добавить .he-view {border-radius: 5px;},сам не могу редактировать надеюсь Kosten увидит. Kosten 15 Февраля 2016 16:37⁸ 0 Заметил, спасибо что отписал! Kosten 15 Февраля 2016 16:42⁹ 0 Angerfist, в комментариях оставь полный код с стилями правильными, потом в материале размещу, то что то со знаками не пойму тут.) Angerfist 15 Февраля 2016 15:52⁷ 0 Цитата Trantel Вот так в титле можно выставить. Ну если заголовок длинный то согласен,а так я там только для описания укорачивал,вообщем общими усилиями будем и дальше что нибудь модернизировать) Angerfist 15 Февраля 2016 17:11¹⁰ 0 Код <div style="width:50%;float:left;"> <div class="vidnews"> <div class="he-wrap tpl4"> <img src="$IMG_URL1$" class="img"> <div class="he-view"> <div class="bg"> <div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div> </div> <div class="content"> <p class="info-title a2" data-animate="fadeInDown">$TITLE$</p> <div class="detail a2" data-animate="fadeInUp"><p><?substr($MESSAGE$,0,150)?>...</p></div> <a href="$ENTRY_URL$" class="more a2" data-animate="fadeInRight">Подробнее о материале</a> </div> </div> </div> </div> </div> <style> .vidnews { margin-bottom: 10px; opacity: 0.9; } .he-view { border-radius: 5px; } .img { display: block; border-radius: 5px; background-size: 100% 100%; position: relative; margin: 0; width: 290px; height: 190px; box-shadow: 0 0 10px rgba(0,0,0,0.6); } </style> AnTron 18 Февраля 2016 17:00¹¹ 0 Вообще то красиво смотрится, на скрине не понял всея, что должно быть.