» »

Вид материалов новостного блога для сайта ucoz

Вид материалов новостного блога для сайта ucoz

Думаю вы много видели такой скрипт Вид материалов новостного блога для сайта ucoz они все походи по дизайну, но разные по функциональности. Этот код вы можете поставить на блог, но лучше безусловно его под новости. Так как там можно ограничить краткое описание, которое будет под картинкой. И всегда он будет стоять ровно и не ниже и выше, вот в чем прелесть.

Установка:

CSS:

Код
/* Вид новостей для uCoz  
------------------------------------------*/  
@font-face {font-family: 'Open Sans'; font-style: normal; src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');}  

.uotvet-news-1 {  
  float:left;  
  width:400px;  
  background:#fff;  
  overflow:hidden;  
  margin-bottom: 40px;  
  padding: 25px 25px 0px 25px;  
   
  box-shadow:0 0 5px #a0afba;  
  border-radius:8px;  
}  

.img-news-1 {  
  float:left;  
  width:400px;  
  height:250px;  
}  

.uotvet-news-1 h2 {  
  float:left;  
  width:100%;  
  margin: 15px 0px 15px 0px;  
  font-size: 17px; font-family: Open Sans,Verdana,Arial, sans-serif;  
}  

.uotvet-news-mp {  
  float:right;  
}  

.uotvet-news-1 h2 a:link,  
.uotvet-news-1 h2 a:visited {color:#555}  
.uotvet-news-1 h2 a:hover {color:#2270a7}  

.uotvet-news-1 p {  
  margin-bottom: 35px;  
  font-size: 13px; font-family:Verdana,Arial, sans-serif; line-height: 1.5; text-align:justify;  
}  

.bottom-news-1 {  
  float:left;  
  width:400px;  
  background:#eaf0f4;  
  padding: 0px 25px 0px 25px;  
  margin: 0px -25px 0px -25px;  
  border-top: 1px solid #d8e3eb;  
}  

.bottom-news-1 ul {  
  margin: 0;  
  padding: 0;  
  font-size: 12px; font-family:Verdana,Arial, sans-serif;  
  color:#96a6b0;  
}  

.bottom-news-1 li {  
  float:left;  
  list-style: none;  
  padding: 15px 33px 15px 33px;  
  border-right: 1px solid #d8e3eb;  
}  

.ico-like,  
.ico-date {  
  float:left;  
  width:20px;  
  height:20px;  
  margin: -1px 10px 0px 0px;  
  background: url(http://zornet.ru/CSS-ZORNET/derkamer/ret/icon_bottom_news.png) no-repeat;  
}  

.ico-like {background-position: 0px 0px!important;}  
.ico-date {background-position: 0px -20px!important;}  

.bn-li-1 {  
  padding-left:0px!important;  
}  

.bn-li-2 {  
  float:right!important;  
  padding-right: 0px!important;  
  border-right: none!important;  
}  

.bn-li-2 {  
  font-weight:bold;  
  float:right!important;  
  padding-right: 0px!important;  
  border-right: none!important;  
}  

.bn-li-2 a:link,  
.bn-li-2 a:visited {color:#96a6b0}  
.bn-li-2 a:hover {color:#2270a7}  

.bn-li-3 {  
  text-align:center!important;  
  padding-right: 0px!important;  
  border-right: none!important;  
}  

.bn-li-3 img[style],  
.bn-li-3 img[width="1"] {display:none!important}  
.bn-li-3 span {display:inline!important}  
.bn-li-3 span img {margin: 0px 2px; }


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

Код
<div class="uotvet-news-1">  
  <?if($IMG_URL1$)?>  
  <a href="$IMG_URL1$" class="ulightbox" target="_blank"><img class="img-news-1" alt="$TITLE$" src="$IMG_URL1$" /></a>  
  <?endif?>  

  <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>  
  <p>$MESSAGE$</p>  

  <div class="bottom-news-1">  
  <ul>  
  <li class="bn-li-1"><span class="ico-like"></span>$RATED$</li>  
  <li><span class="ico-date"></span>$DATE$</li>  

  <?if($MODER_PANEL$)?>  
  <li class="bn-li-3">  
  $MODER_PANEL$  
  </li>  

  <?else?>  
  <li class="bn-li-2"> <a href="$ENTRY_URL$" target="_blank">Читать дальше</a></li>  
  <?endif?>  
  </ul>  
   
  </div>  
  </div>




Сами потом решайте, сколько колонок будет у вас. Одну если создавать, то на блог, будет думаю красиво, на ресурс нужно несколько.
2015-02-10 Просмотров: 1994 Комментарий: (15)

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

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

Комментарий: 15
Dimstrik
Dimstrik 2015-02-11 16:101
0
Хорошенький такой вид материалов а то все стандартные хоть что то стали менять дизайнеры smile
Kosten
Kosten 2015-02-11 16:132
0
Dimstrik, так смотрится не плохо, на тестовом проверял.
trem200
trem200 2016-01-26 19:583
0
А как можно их поставить по середине?
Kosten
Kosten 2016-01-26 20:294
0
Они автоматически должны встать как нужно.
Kosten
Kosten 2016-01-26 20:425
0
trem200, нужно только задать краткое описание, но на модуле новость, это можно сделать в админ панели. В каталоге файлов, там нет такой функций и делают по другому.

Точно не помню, но кажется так.

Код
<?substr($MESSAGE$,0,200)?>...


200 - это знаки, но лучше ставить 140 - 160 где то так.

Для того, чтоб длинна вида была ровная, если ставить в рад. Просто если станет больше описание, то автоматически увеличивается сам вид.
trem200
trem200 2016-01-26 22:126
0
Я поставил этот код для каталога статей
Kosten
Kosten 2016-01-26 22:167
0
Но все нормально установилось, там же тоже нет раздела про краткое описание и его делают в админ панели.
trem200
trem200 2016-01-26 22:538
0
Теперь понял, спасибо
Kosten
Kosten 2016-01-26 22:599
0
Да не за что.
trem200
trem200 2016-01-26 23:0010
0
Цитата Kosten
trem200, нужно только задать краткое описание, но на модуле новость, это можно сделать в админ панели. В каталоге файлов, там нет такой функций и делают по другому.

Точно не помню, но кажется так.

Код: выделить всё
<?substr($MESSAGE$,0,200)?>...

200 - это знаки, но лучше ставить 140 - 160 где то так.

Для того, чтоб длинна вида была ровная, если ставить в рад. Просто если станет больше описание, то автоматически увеличивается сам вид.


Как это прописать? А то не пойму.
Kosten
Kosten 2016-01-26 23:2811
0
По идее так должно для каталога файлов и думаю для других модулей.

Описание
Код
<?substr($MESSAGE$,0,200)?>...


Название
Код
$TITLE$ - <?substr($MESSAGE$,0,300)?>...


Но думаю, лучше поискать информацию, просто на некоторых вид материала так идет.
Kosten
Kosten 2016-01-26 23:3512
0
Просто есть еще код такой на описание краткое. Вот здесь Здесь почитай, там написано за эту тему.

Просто есть еще один код, который совершенно другой.

Код
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><?substr($MESSAGE$,0,400)?> ...<br /><a style="display:block;float:right;" href="$ENTRY_URL$"><b>Читать дальше ...</b></a></div><?endif?>


Где:
<?substr($MESSAGE$,0,400)?> - количество символов.
avatar
emendems 2017-12-20 00:3513
0
Подскажите пожалуйста, как исправить ситуацию:
У меня пропала мини-панелька с иконками редактирования, удаления новости, как в правом нижнем углу здесь. Что сделать, чтобы они опять появились??
Вот какой у меня вид:
waak
waak 2017-12-20 01:3214
0
вид изменилась панель на системном уровне, чтобы сделать так как было её нужно самому переписать то есть сделать свою
-SAM-
-SAM- 2017-12-20 05:5715
0
В панели управления сайта в общих настройках выбрать старый вид панели модератора. Если речь идёт о каких-то конкретных кнопках в ней - это уже настройки групп. Чтобы панель была постоянно открытой - посредством установки доп. скриптов.
avatar