Вид материалов как на Урааа

Вид материалов как на Урааа

12015-03-01971321Денис Абдуллин

На Урааа простой и понятный вид материалов, его уже успели позаимствовать некоторые сайты на uCoz. Нет, расположение элементов в этом виде материалов для uCoz нельзя назвать оригинальным, но размеры элементов, отступов и значки узнаваемы. Недавно на нашу почту поступил запрос, который и сподвиг выложить мой вид новостей.

Устанавливается в два притопа, три прихлопа, даже легче. Вид материалов не имеет фиксированную ширину, но для него желательно иметь контентную ширину больше 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('https://yraaa.ru/files/time.png') 0px 1px no-repeat;padding-left:20px}
.article_counters .views {background:url('https://yraaa.ru/files/views.png') 0px 1px no-repeat;padding-left:20px}
.article_counters .coms {background:url('https://yraaa.ru/files/comment.png') 0px 1px no-repeat;padding-left:20px}
.article_counters .catalog {background:url('https://yraaa.ru/files/catalog.png') 0px 1px no-repeat;padding-left:20px}
.article_counters .user {background:url('https://yraaa.ru/files/user.png') 0px 1px no-repeat;padding-left:20px}

Попробовал установить на новый сайт со стандартным шаблоном:


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (21)
Павел Новосёлов 2015-03-03 в 09:29Спам
Спасибо, очень нравится. Удобный и приятный)
4
Рябец Дмитрий 2015-03-03 в 17:28
Что тебе не так?)
1
Дмитрий Мокрушин 2015-03-03 в 19:46Спам
Может то что одни рекламные статьи?
1
Michael Guber 2015-03-03 в 21:23Спам
Например, то, что админ не может придумать контент и решил сливать свой дизайн.
2
Денис Абдуллин 2015-03-04 в 15:49
Да
3
Сергей 2015-03-04 в 19:19Спам
Финстрип за февраль выкладывай.
1
Рябец Дмитрий 2015-03-04 в 20:34
Лично мое мнение, что все сделано правильно! Нужно обновлять сайт, а иногда времени на это немного.
И зачем сайт оплачивать, если он не приносит прибыли.
Ведь все сейчас не дешево!

Радуйтесь что за гугл поиск пока что не платите)
2
Виктор Ягодин 2015-05-08 в 22:17Спам
Красивый вид)
1
Александр Демьяненко 2015-05-18 в 15:07Спам
Какие же администраторы сайта Урааа щедрые :3
3
Владислав 2015-05-19 в 11:17
Ну так а то)))
1
Александр 2015-06-15 в 15:54Спам
Отличный скрипт!
0
Александр 2015-06-15 в 15:55Спам
Хочу создать даже свой сайт на .ru
0
Андрей 2015-06-21 в 07:32Спам
круто
0
Сергей Александрович 2015-06-24 в 23:22
<?if($IMG_URL1$)?><img src="$IMG_URL1$"/><?else?><img src="no_image.png" /><?endif?>
0
Виталик Шкет 2016-02-22 в 11:28Спам
Админ, выложил бы страницу материала под него. как бы к дополнеению
0
Александр Шевченко 2017-01-23 в 01:36Спам
Не получается установить. Криво встает(
0
Бобков 2017-01-23 в 21:30Спам
При установке всё отлично, но при мобильном виде он не адаптируется под мобильный вид(((
0
ALEKS 2017-02-13 в 21:06Спам
@media only screen and (max-width: 640px){
.mtr {display:block}
.mtr .im {display:block;margin-bottom:10px;padding-right:0px}
.mtr .inim, .mtr .inim img {width:100%;}
.mtr_td {display:block}
}
@media only screen and (max-width: 460px) {
.mtr {display:block}
.mtr .im {display:block;margin-bottom:10px;padding-right:0px}
.mtr .inim, .mtr .inim img {width:100%;}
.mtr_td {display:block}
}
0
Alex Gusarov 2017-02-20 в 19:59Спам
Как убрать подчеркивания в ссылках? [img]https://pp.vk.me/c636818/v636818821/52abe/1hjsRMJJQYs.jpg[/img]
0
Лёша крвйнов 2017-03-25 в 22:21Спам
а можно целый набор иконок?
0
Grom GromiLa 2017-08-10 в 15:00Спам
Спасибо Большой риспект автору!!!!!!!!!
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.