Новости для uCoz, новости сайта для uCoz, вид новостей uCoz, вид новостей для uCoz, вид новостей для сайта uCoz

Вид новостей uCoz

Привет.

Продолжая тему новостей предлагаю вам оценить еще один вариант вида материала. Ну что? Давайте разберемся как поставить новый вид новостей для uCoz, предлагаю для начала посмотреть как это будет выглядеть.

А теперь давайте перейдем к установке нашего вида новостей для uCoz.


Установка CSS

Скопируйте данный код в ПУ / Дизайн / Управление дизайном (CSS), либо в отдельный css файл

Код
/* style news */
.clear {
  clear:both;
}
.news {
  width:auto;
  position:relative;
  margin-bottom:20px;
  padding:15px;
  background:#fff;
  border:1px solid #d3d3d3;
  font-family:helvetica, arial, sans-serif;
}
.news_l {
  padding-right:145px;
  min-height:150px;
}
.news_r {
  width:140px;
  height:100%;
  background:#f4f4f4;
  position:absolute;
  top:0;
  right:0;
  text-align:center;
}
.news h2 {
  margin:0;
  background:url(http://mvcreative.ru/example/15/images/stripe.png) 0px 7px repeat;
  height:20px;
  overflow:hidden;
  margin:10px 0 15px 0;
  position:relative;
}
.news h2 a {
  background:#fff;
  padding:2px 10px 2px 0;
  text-decoration:none;
  color:#89a0af; /*цвет заголовка новости*/
  font-size:16px;
}
.news h2 span a {
  padding-right:0;
}
.img_news {
  float:left;
  display:inline-block;
  margin:0 14px 5px 0;
  padding:5px;
  background:#EDF1F2;
  border:1px solid #DDE1E2;
}
.img_news img {
  width:220px;
  border:1px solid #DDE1E2;
}
.message {
  padding:0 0 10px 0;
  margin:0;
  font-size:12px;
  line-height:19px;
  text-align:justify;
}
.news_r .date {
  display:inline-block;
  position:relative;
  font-size:13px;
  padding:7px 10px 4px 10px;
  margin:18px 0 -5px 0;
  background:#6099bf; /*цвет блока с датой*/
  border:1px solid #fff;
  color:#fff;
  text-align:center;
}
.news_r ul {
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
  width:100px;
  margin:18px auto 0 auto;
  font-size:12px;
}
.news_r ul li {
  padding:3px 0 3px 5px;
  border-bottom:1px dotted #BEBEBE;
}
.news_r ul li img {
  margin-right:10px;
  position:relative;
  top:4px;
}
.news_r ul li a, .news_r ul li span {
  color:#707070;
  text-decoration:none;
}

Установка HTML

Перейдите в "Вид материала" модуля новостей, и замените весь код этим

Код
<div class="news">
<div class="news_l">
  <h2>$MODER_PANEL$ <a href="$ENTRY_URL$">$TITLE$</a></h2>
  <?if($IMG_URL1$)?><div class="img_news">
  <img src="$IMG_URL1$" alt="$TITLE$"/>
  </div><?endif?>
  <p class="message"><?if($MESSAGE$)?>$MESSAGE$<?else?>Описание отсутствует<?endif?></p>
  <div class="clear"></div>
</div>
<div class="news_r">
<div class="date" title="$WDAY$ в $TIME$">$DATE$</div>
<ul>
  <li><img src="http://mvcreative.ru/example/15/images/user.png" alt=""/><a href="$PROFILE_URL$" title="автор материала">$USERNAME$</a></li>
  <?if($CATEGORY_NAME$)?><li><img src="http://mvcreative.ru/example/15/images/cat.png" alt=""/><a href="$CATEGORY_URL$" title="категория">$CATEGORY_NAME$</a></li><?endif?>
  <li><img src="http://mvcreative.ru/example/15/images/comm.png" alt=""/><a href="$COMMENTS_URL$" title="комментариев">$COMMENTS_NUM$</a></li>
  <li><img src="http://mvcreative.ru/example/15/images/eye.png" alt=""/><span title="просмотров">$READS$</span></li>
</ul>
</div>
</div><!--/news-->

Обращаю внимание изображение в новости появится только если вы его добавили в специальное поле "Изображения"

Если вы хотите избавиться от заголовка с датой, и добавить его к остальному списку информации чуть ниже, уберите код

Код
<div class="date" title="$WDAY$ в $TIME$">$DATE$</div>

И добавьте к списку ul последним пунктом этот

Код
<li><img src="ttp://mvcreative.ru/example/15/images/clock.png" alt=""/><span title="$WDAY$ в $TIME$">$DATE$</span></li>

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

Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Вид новостей ∫ Просмотров: 17985 ∫ 23.01.20134.2
Теги: новости
» Оцени и добавь:
оцени статью
4.2
17 Комментариев Поделись своим мнением
#17 Написал Советник, 26.03.2016 10:47
Цитатнуть
Не получается красиво как на скрине,может подскажите что не так? Сайт http://ablog.ucoz.net/
#16 Написал Chicago, 02.11.2014 09:35
Цитатнуть
Здравствуйте! Спасибо огромное за очень красивый вид новостей! Шикарно просто. То, что я искала! Но у меня проблемка...
Скажите, что делать... Вот скриншот: http://savepic.net/6160562.png
В опере заголовок отображается нормально, а в Яндексе так((( Как решить проблему?
#15 Написал Krixys, 23.01.2014 18:14
Цитатнуть
Цитата VUDOSIDE
А можно ли это поставить в Католог файлов?

его хоть в каталог сайтов пихай
#14 Написал Krixys, 23.01.2014 18:12
Цитатнуть
Я вас не пойму как можно ставить вид материалов и что бы глобалы летели? А если не идет вид материалов то замените CSS значения. Просто другого не дано.
#13 Написал Юрий, 26.10.2013 21:07
Цитатнуть
ничего нового все старое(((
Данный вид я давно в общем доступе видел, и адаптировал под себя но все равно тускло как-то, одним словом не вид, а полная лажа
#12 Написал Sardukar, 28.09.2013 12:01
Цитатнуть
У меня в названии темы текст кусок не виден, как эту ошибку исправить?
#11 Написал Денис, 04.06.2013 19:53
Цитатнуть
У меня, когда поставил: блоки все нарушились.
Что делать?
То-есть блоки все съехали со своих мест)
#10 Написал VUDOSIDE, 12.05.2013 17:40
Цитатнуть
А можно ли это поставить в Католог файлов?
#9 Написал VlaDRepeR, 22.04.2013 18:27
Цитатнуть
Я попробую также сделать.
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина