Регистрация    Войти
Авторизация

Вид новостей для uCoz, вид материалов uCoz

Вид новостей для uCoz, вид материалов uCozВид новостей для uCoz, вид материалов uCoz

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

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


Шаг 1 - Установим каркас:
Для данного примера следует установить в Вид материалов следующий HTML код:
<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>


Шаг 2 - Установим CSS:
В заключение данного решения нам следует прописать следующие 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://uotvet.ru/ucoz/news/1/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; } 


Хочу обратить внимание на то, что модер панель у данного вида новостей для uCoz заменяется на ссылку Читать дальше только у Администратора сайта и модератора, у которых установлено разрешение на редактирование материала.

На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  9-12-2014, 19:05   Просмотров: 3270   
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.