05:59 Вторник 2025
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Время в профиле прош... (0)
КПК - персональная с... (0)
Вид цитаты и code st... (0)
СТАЛКЕРСКИЙ МИНИ-ПРО... (0)
БЛОК ИНТЕРЕСНЫХ ФАКТ... (0)
Гид по Народной Соля... (27)
Бар «От заката до ра... (18)
Гид по прохождению м... (16)
Азы модостроения (14)
Баги и ошибки на сай... (8)
XemorDio(died) (626)
Бармен (146)
ExGooD (48)
habib (37)
Rayviner (19)
maksimstebnovskij5 (02.03.2023)
slitkovets (30.10.2022)
ianoiano62 (29.01.2022)
Timkalv (20.09.2021)
Myloisonau (03.09.2021)

  • Страница 1 из 1
  • 1
Вид материалов как на Урааа.ru от Ромчик
XemorDio(died)Дата: Суббота, 09.01.2016, 21:17 | Сообщение # 1
Генерал-лейтенант
Группа: Свобода
Сообщений: 626
Награды: 3
Репутация: 4
Статус:

На Урааа простой и понятный вид материалов, его уже успели позаимствовать некоторые сайты на uCoz. Нет, расположение элементов в этом виде материалов для uCoz нельзя назвать оригинальным, но размеры элементов, отступов и значки узнаваемы. Недавно на почту yraaa поступил запрос, который и сподвиг выложить вид новостей yraaa.ru.
Устанавливается в два притопа, три прихлопа, даже легче. Вид материалов не имеет фиксированную ширину, но для него желательно иметь контентную ширину больше 500 пикселей.

Установка
Вставить в вид материалов нужного модуля (Управление дизайном - Модуль - Вид материалов):
Код
<div class="mtr">       
   <div class="im">       
   <div class="inim">       
   <a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="300" alt="$TITLE$" title="$TITLE$" /></a>       
   </div>       
   </div>       
   <div class="mtr_td">       
   <div class="name_mtr"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</div>       
   <div class="article_counters"><span class="dats">$DATE$ в $TIME$</span><?if($CATEGORY_NAME$)?><a href="$CATEGORY_URL$"><span class="catalog">$CATEGORY_NAME$</span></a><?endif?><span class="views">$READS$</span><?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$"><span class="coms">$COMMENTS_NUM$</span></a><?endif?></div>       
   <p class="mtr_d">       
   $MESSAGE$       
   </p>       
   </div>       
   </div>

Вставить в таблицу стилей (CSS):
Код
.mtr {padding:20px;display:table}       
   .mtr .article_counters {margin-bottom:10px;}       
   .mtr .im {background:#FFFFFF;padding-right:15px;display:table-cell;vertical-align:top}       
   .mtr_td {display:table-cell;vertical-align:top}       
   .mtr .inim {width:300px;height:132px;overflow:hidden}       
   .mtr_descr {margin:0;position:absolute;top:-9000px}       
   .name_mtr {margin-bottom:7px;font-size:16px;font-weight:bold}       
   .article_counters {margin-bottom:14px;font-size:13px;color:#8c8c8c}       
   .article_counters span {display:inline-block;margin-right:10px}       
   .article_counters .dats {background:url('http://webmaster-ucoz.ru/ucoz/1/yraaa/vid_mat/time.png') 0px 1px no-repeat;padding-left:20px}       
   .article_counters .views {background:url('http://webmaster-ucoz.ru/ucoz/1/yraaa/vid_mat/views.png') 0px 1px no-repeat;padding-left:20px}       
   .article_counters .coms {background:url('http://webmaster-ucoz.ru/ucoz/1/yraaa/vid_mat/comment.png') 0px 1px no-repeat;padding-left:20px}       
   .article_counters .catalog {background:url('http://webmaster-ucoz.ru/ucoz/1/yraaa/vid_mat/catalog.png') 0px 1px no-repeat;padding-left:20px}       
   .article_counters .user {background:url('http://webmaster-ucoz.ru/ucoz/1/yraaa/vid_mat/user.png') 0px 1px no-repeat;padding-left:20px}

Протестил, всё в порядке, но не советую на тёмный дизайн устанавливать, будет примерно вот так:

Источник: http://webmaster-ucoz.ru/
 
  • Страница 1 из 1
  • 1
Поиск: