» »

Светлый вид материалов новостей с тенями uCoz


Светлый вид материалов новостей с тенями uCoz

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

Код
<!--viewn_loop--><style>.viewn_loop {margin:0 -6px; background:#f5f5f5 url(http://zornet.ru/zornet_ru/viewn_c_bg.png) repeat-y 0 0;}  
.viewn_in {background:url(http://zornet.ru/zornet_ru/viewn_c_bg.png) repeat-y right 0;}  
.viewn_top {height:48px; background:url(http://zornet.ru/zornet_ru/viewn_bg.png) no-repeat 0 0;}  
.viewn_t_in {height:35px; line-height:26px; padding:13px 12px 0 15px; overflow:hidden; background:url(http://zornet.ru/zornet_ru/viewn_bg.png) no-repeat right -48px;}  
.viewn_t_in h1,  
.viewn_t_in h2,  
.viewn_t_in h3,  
.viewn_t_in h4 {margin:0; font-size:12px; color:#008ce0; text-shadow:1px 1px 1px #fff;}  
.viewn_t_in a {color:#008ce0; text-shadow:1px 1px 1px #fff; text-decoration:none;}  
.viewn_t_in a:hover {text-decoration:underline;}  
.viewn_rat {float:right;}  
.viewn_detail {padding:2px 10px 7px 10px; margin:0 5px; font-size:11px; background:url(http://zornet.ru/zornet_ru/viewn_hr.png) repeat-x 0 bottom;}  
.viewn_cont {padding:5px 9px 0 9px; overflow:hidden;}  
.viewn_pict {width:146px; float:left; margin:0 5px 0 0; background:url(http://zornet.ru/zornet_ru/viewn_border_bg.png) no-repeat 0 0;}  
.viewn_pict span {display:block; padding:3px; overflow:hidden; background:url(http://zornet.ru/zornet_ru/viewn_border_bg.png) no-repeat -146px bottom;}  
.viewn_pict img {width:140px; vertical-align:top;}  
.viewn_pict img:hover {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); filter: alpha(opacity=80); opacity:0.8;}  
.viewn_text {overflow:hidden;}  
.viewn_loop .angle_lb {height:10px; display:block; background:url(http://zornet.ru/zornet_ru/viewn_bg.png) no-repeat 0 -96px;}  
.viewn_loop .angle_rb {height:10px; display:block; background:url(http://zornet.ru/zornet_ru/viewn_bg.png) no-repeat right -106px;}  

.viewn_loop .angle_lt {height:10px; display:block; background:url(http://zornet.ru/zornet_ru/viewn_bg.png) no-repeat 0 -116px;}  
.viewn_loop .angle_rt {height:10px; display:block; background:url(http://zornet.ru/zornet_ru/viewn_bg.png) no-repeat right -126px;}  

.viewn_banka {padding:5px 0 0 0; text-align:center;}  
.viewn_panel {overflow:hidden; padding:0 16px 0 13px;}  
.viewn_panel .blue {color:#008ce0;}  
.viewn_panel a {color:#006bd4;}  
.</style>  
<div class="viewn_loop">  
  <div class="viewn_in">  
  <div class="viewn_top">  
  <div class="viewn_t_in">  
  <div class="viewn_rat"><div style="padding-top:5px"> </div></div>  
  <h4><a href="$ENTRY_URL$">$TITLE$</a></h4>  
  </div>  
  </div>  
  <div class="viewn_detail">  
   
Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> |  
  Просмотров: $READS$ |  
  Добавил: <a href="$PROFILE_URL$">$USERNAME$</a> |  
  Дата: <span title="$TIME$">$DATE$</span>  
  | <a href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a>  
  </div>  
  <div class="viewn_cont"><table><tr>  
<td width="174px"><div style="background:url(http://zornet.ru/zornet_ru/posterbg.png) no-repeat;width:150px;height:128px;padding-top:4px;padding-bottom:4px;padding-right:22px;padding-left:4px;cursor:pointer;">  
  <img id="img$ID$" src="$IMG_URL1$" width="150px" height="128px" align="left" alt="$TITLE$" />  
   
  <script type="text/javascript">  
  $(function(){  
  $('#img$ID$').click(function(){var s="'sc'";  
   
   
  new _uWnd('Et','Реальный размер изображения $TITLE$',70,70,{autosize:1,shadow:1,autosizeonimages:1,header:1},'<img src="'+$(this).attr('src')+'" align="center" alt="" onclick="_uWnd.close('+s+')" style="max-width:900px;max-height:700px;cursor:pointer;">');});  
  });  
  </script>  
  </div></td>  
  <td>  
  $MESSAGE$<br>Категория: <strong>$CATEGORY_NAME$</strong></td></tr></table>  
   
  </div>  
  <i class="angle_lb"><i class="angle_rb"></i></i>  
  </div>  
</div><!--/viewn_loop-->


03.05.2012 Просмотров: 2039 Комментарий: (7)

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

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

Комментарий: 7
eugene1
eugene1 28.03.2013 17:001
0
Отлично вот только я добавил панель чтоб можно было редактировать материал а так спасибо вам! cool
Kosten
Kosten 28.03.2013 17:132
0
Забыл поставить biggrin
avatar
tatu 28.11.2013 21:383
0
А как добавить панель редактирования и добавления материалов? Одну новость добавила, всё работает отлично, картинка при просмотре увеличивается. Для второй новости вставляю тот же код, картинка не разворачивается. Может быть я что-то не так делаю? Помогите.
Kosten
Kosten 01.09.2016 17:127
0
Но сейчас оно давно изменилась, и вообще не понимаю зачем она на главной.
Delete
Delete 28.11.2013 22:144
0
tatu, можно по подробней описать саму проблему ? а то я что-то не понял если честно...
Kosten
Kosten 28.11.2013 22:335
0
tatu, отпишите здесь свою проблему по установке КЛИК
Kosten
Kosten 23.09.2014 19:426
0
Все проверенно на тестовом и работает.
avatar