Простой вид новостей для uCoz
Опубликовано 23.04.2016 в 18:30
Простота вида заключается в удобном размещении элементов и информации о материале. Структура поделена на три части:
Первая часть это изображение которое имеет фиксированный размер, который позволит публиковать материалы не боясь, что, картинка выйдет за свои рамки.
Вторая часть это непосредственно краткое описание публикации.
И наконец третья часть это информация о материале. Давайте перейдем к установке и посмотрим, как будет выглядеть наш новый вид.
Установка CSS
Для начала сохраним в нашей CSS таблице следующие стили, которые будут применяться к нашему HTML коду. Перейдите в "Панель управления" » "Дизайн" » "Управление дизайном (CSS)", либо в отдельный CSS файл.
.mater{width:100%;margin-bottom:20px;border:1px solid #D3D3D3;}
.matertitle a{font-size:12px;font-weight: bold;text-decoration: none !important;margin-bottom: 15px;}
.mesage img{border:4px solid #a5d0e1;float:left; margin-right: 15px;border-radius:5px;height:100px}
.mirt{padding :15px;}
.info{width:100px;padding:15px;background:#D3D3D3;}
.date{background:#4682B4;padding:5px;color:#fff;align: center;margin: 15px;}
.user {background: url(/images/user.png) no-repeat left center ;padding:10px;padding-left:20px}
.cate {background: url(/images/cat.png) no-repeat left center ;padding:10px;padding-left:20px}
.com {background: url(/images/comm.png) no-repeat left center ;padding:10px;padding-left:20px}
.rade {background: url(/images/eye.png) no-repeat left center ;padding:10px;padding-left:20px}
После установки стилей мы переходим непосредственно к установке HTML кода.
Установка HTML
Для установки нам понадобиться зайти "Панель управление" » "Дизайн" » "Новости" » "Вид материалов" и заменить весь код, который там находиться на тот, который указан ниже.
<table class="mater">
<tr>
<td class="mirt">
<div class="matertitle"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</div>
<div class="mesage">
<img src="$IMG_URL1$" width="200" alt="$TITLE$" title="$TITLE$">$MESSAGE$</div>
</td>
<td class="info">
<span class="date">$DATE$
</span><br><br>
<span class="user">$USERNAME$</span><hr>
<span class="cate">$CATEGORY_NAME$</span><hr>
<span class="com">$COMMENTS_NUM$</span><hr>
<span class="rade">$READS$</span><hr>
</td>
</tr>
</table>
На этом установку можно считать завершенной. Свои отзывы и пожелания можете оставлять в комментариях под материалом.
Мне нравится (1)
Загрузить (4.5 Kb)
Первая часть это изображение которое имеет фиксированный размер, который позволит публиковать материалы не боясь, что, картинка выйдет за свои рамки.
Вторая часть это непосредственно краткое описание публикации.
И наконец третья часть это информация о материале. Давайте перейдем к установке и посмотрим, как будет выглядеть наш новый вид.
Установка CSS
Для начала сохраним в нашей CSS таблице следующие стили, которые будут применяться к нашему HTML коду. Перейдите в "Панель управления" » "Дизайн" » "Управление дизайном (CSS)", либо в отдельный CSS файл.
Код
.mater{width:100%;margin-bottom:20px;border:1px solid #D3D3D3;}
.matertitle a{font-size:12px;font-weight: bold;text-decoration: none !important;margin-bottom: 15px;}
.mesage img{border:4px solid #a5d0e1;float:left; margin-right: 15px;border-radius:5px;height:100px}
.mirt{padding :15px;}
.info{width:100px;padding:15px;background:#D3D3D3;}
.date{background:#4682B4;padding:5px;color:#fff;align: center;margin: 15px;}
.user {background: url(/images/user.png) no-repeat left center ;padding:10px;padding-left:20px}
.cate {background: url(/images/cat.png) no-repeat left center ;padding:10px;padding-left:20px}
.com {background: url(/images/comm.png) no-repeat left center ;padding:10px;padding-left:20px}
.rade {background: url(/images/eye.png) no-repeat left center ;padding:10px;padding-left:20px}
После установки стилей мы переходим непосредственно к установке HTML кода.
Установка HTML
Для установки нам понадобиться зайти "Панель управление" » "Дизайн" » "Новости" » "Вид материалов" и заменить весь код, который там находиться на тот, который указан ниже.
Код
<table class="mater">
<tr>
<td class="mirt">
<div class="matertitle"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</div>
<div class="mesage">
<img src="$IMG_URL1$" width="200" alt="$TITLE$" title="$TITLE$">$MESSAGE$</div>
</td>
<td class="info">
<span class="date">$DATE$
</span><br><br>
<span class="user">$USERNAME$</span><hr>
<span class="cate">$CATEGORY_NAME$</span><hr>
<span class="com">$COMMENTS_NUM$</span><hr>
<span class="rade">$READS$</span><hr>
</td>
</tr>
</table>
На этом установку можно считать завершенной. Свои отзывы и пожелания можете оставлять в комментариях под материалом.