» »

Вид новостей сайта увеличением в ajax для ucoz


Вид новостей сайта увеличением в ajax для ucoz

Первый который я менял вид новостей сайта с увеличением в ajax. Скрипт, вид новостей создан для светло - серых дизайн сайта, с увеличением в ajax окне, что придает виду высокий статус, да и так вид красив и ко многим тематическим сайтам подойдет.
Приступаем к установке:
Все просто, идем в П.У - Управление дизайном - Новости сайта - Вид материалов, убираем весь свой старый код и прописываем(вставляем) наш новый.
Все радуемся!
Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlockcsomsk"><tr><td style="padding:3px;">  
  <div style="float:right">$MODER_PANEL$</div>  
  <div class="eTitlecsomsk" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>  
<div style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><table style="width: 100%; border-collapse: collapse"><tbody><tr><td width="174px"><div style="background:url(http://zornet.ru/zornet_ru1/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> <td style="vertical-align: bottom; letter-spacing: 0pt; word-spacing: 0pt; text-align: right"> <input class="buttonprofile" onclick="document.location.href='$ENTRY_URL$'; return false;" value="Смотреть" type="button"></td>  
  </tr></tbody></table>  
  </div>  
  <div class="eAttach">Прикрепления: $ATTACHMENTS$</div><div class="eDetailscsomsk" style="clear:both;">  
  <div style="float:right"></div>  
  Категория: <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></td></tr></table>

В CSS вставляем стиль.
Код
.eMessagecsomsk a img, .eMessagecsomsk img {padding:3px !important;background:#ffffff;  
  border:1px solid#dbdbdb !important;border-radius:4px;  
  -moz-border-radius:7px;box-shadow:0px 0px 10px #e8e8e8;-moz-box-shadow:0px 0px 10px #e8e8e8;}  
  a img {border:0px;}  
  .eTitlecsomsk {font-family:Verdana,Arial,Sans-Serif;font-size:12px;font-weight:bold;color:#FFFFFF; padding: 5px; border:0px solid #252525; background:url('http://zornet.ru/zornet_ru1/1060.png') ;}  
  .eTitlecsomsk a:link {text-decoration:none; color:#FFFFFF;}  
  .eTitlecsomsk a:visited {text-decoration:none; color:#FFFFFF;}  
  .eTitlecsomsk a:hover {text-decoration:none; color:#CCCCCC;}  
  .eTitlecsomsk a:active {text-decoration:none; color:#FFFFFF;}  
  .eBlockcsomsk {background:#fff;border:1px solid #CCCCCC;}  
  .eBlocksincsomsk {background:#fff;border:0px solid #000;}  
  .eDetailscsomsk {background:url('http://zornet.ru/zornet_ru1/28.png');color:#60606B;padding-bottom:5px;padding-top:3px; text-align:left;font-size:7pt; }
13.05.2012 Просмотров: 766 Комментарий: (1)

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

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

Комментарий: 1
kredit-oformi
kredit-oformi 10.01.2016 21:291
0
где то ставил такой вид материалов только в бирюзовом оттенке, и очень даже неплохо тогда выглядело))
avatar