Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Красивый вид материалов сайта системы uCoz (Клевый вид)
Красивый вид материалов сайта системы uCoz
Kosten
Дата: Среда, 14.11.2012, 12:32 | Сообщение # 1
Администраторы
Сообщений:12673
Награды: 39




О вид материалов сайта
Красивый вид материалов сайта системы uCoz. Вид красив тем что у него рамка под картинку с тенями. Это виду дает свою индивидуальность и как не крути на светлых дизайн сайтах просто смотреться будит шикарно. Так же у вида материалов есть красивое увеличение картинки.
Приступаем к установке:
Идем в админ панель и выбираем модуль новостей или файлов. И в вид материалов заходим и убираем старый код и прописываем наш новый код который можете скопировать ниже.
Код
<div id="allEntries"><div id="entryID158"><table style="width: 100%; border-collapse: collapse"><tbody><tr>  
<td style='width: 5px; height: 79px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/verh_left.png"); background-repeat: no-repeat; background-position: 100% 100%'>  
</td><td style='letter-spacing: 0px; word-spacing: 0px; vertical-align: top; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/verh_center.png"); background-repeat: repeat-x; background-position: 50% 100%'>  
<table style="width: 100%; border-collapse: collapse"><tbody><tr>  
<td style="letter-spacing: 0px; word-spacing: 0px; height: 40px">  
  <div class="etitle"><div style="float:right">$MODER_PANEL$</div><a href="$ENTRY_URL$" style="">$TITLE$</a> <img src="http://zornet.ru/CSS-ZORNET/vaccser/new.png" align="absmiddle"></div>  
<style>  
  .etitle a:link,  
.etitle a:active,  
  .etitle a:visited {color: #ffffff; font-size:12pt; text-shadow: 1px 1px 0px #000000; font-family:tahoma; text-decoration:none;}  
.etitle a:hover {color: #999999; font-size:12pt; text-shadow: 1px 1px 0px #000000; font-family:tahoma; }  
  </style>  
   
  </td></tr><tr><td style="letter-spacing: 0px; word-spacing: 0px; height: 26px">  
  <img src="http://nk-cs.ru/designs_img/ucoz/download.png" width="10px"><b>Категория:</b> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <img src="http://zornet.ru/CSS-ZORNET/vaccser/prof1.png" width="10px"><b>Добавил:</b> <a href="$PROFILE_URL$">$USERNAME$</a>  
</td></tr></tbody></table></td>  
<td style='width: 105px; letter-spacing: 0px; word-spacing: 0px; vertical-align: top; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/verh_right.png"); background-repeat: no-repeat; background-position: 0% 100%'>  
<table style="width: 100%; border-collapse: collapse"><tbody><tr>  
<td style="height: 40px; letter-spacing: 0px; word-spacing: 0px; vertical-align: bottom; padding-left: 10px">  
  <?if($RATING$)?><?$RSTARS$('17',' http://zornet.ru/CSS-ZORNET/vaccser/rating.png ','1','float')?><?endif?>
</td></tr>  
  <tr align="center"></tr></tbody></table></td></tr></tbody></table><table style="width: 100%; border-collapse: collapse">  
<tbody><tr><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/left.png"); background-repeat: repeat-y; background-position: 100% 50%'>  
</td><td style="background-color: #ffffff;vertical-align: top; letter-spacing: 0px; word-spacing: 0px">  
<table style="background-color: #ffffff;width: 100%; border-collapse: collapse"><tbody><tr>  
<td style="background-color: #ffffff;vertical-align: top; letter-spacing: 0px; word-spacing: 0px; width: 200px"><table style="width: 100%; border-collapse: collapse">  
<tbody><tr><td style='background-color: #ffffff; vertical-align: top; letter-spacing: 0px; word-spacing: 0px; height: 135px; padding-left: 9px; padding-top: 9px; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/img.png"); background-repeat: no-repeat; background-position: 50% 50%'>  
  <img id="img$ID$" style="cursor:pointer;" src="$IMG_URL1$" alt="" width="180" height="100">  
<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>  
</td></tr></tbody></table></td>  
  <td style="vertical-align: top; letter-spacing: 0px; word-spacing: 0px; padding-left: 3px; background-color: #ffffff;">  
  <div style="width:99%;overflow:hidden">$MESSAGE$</div>  
</td></tr></tbody></table></td><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://nk-cs.ru/designs_img/ucoz/right.png"); background-repeat: repeat-y; background-position: 0% 50%'>  
</td></tr></tbody></table><table style="width: 100%; border-collapse: collapse"><tbody><tr><td style='width: 5px; height: 47px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/niz_left.png"); background-repeat: no-repeat; background-position: 100% 0%'><br></td>  
  <td style='letter-spacing: 0px; word-spacing: 0px; vertical-align: top; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/niz_center.png"); background-repeat: repeat-x; background-position: 50% 0%'><table style="width: 100%; height: 100%; border-collapse: collapse" width="" align=""><tbody><tr><td><img src="http://zornet.ru/CSS-ZORNET/vaccser/vico-views.png" alt=""><b>Просмотров:</b> $READS$ <img src="http://zornet.ru/CSS-ZORNET/vaccser/vico-comments.png" width="14px"><b>Комментариев:</b> ($COMMENTS_NUM$)  
<br></td>  
<td style="letter-spacing: 0px; word-spacing: 0px; width: 130px; text-align: right; vertical-align: bottom; padding-right: 4px; padding-bottom: 9px" align="center">  

<input class="gbutton" type="button" onclick="document.location.href='$ENTRY_URL$'; return false;" value="Подробнее">  

</td></tr></tbody></table></td><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/CSS-ZORNET/vaccser/niz_right.png"); background-repeat: no-repeat; background-position: 0% 0%'><br>  
</td></tr></tbody></table><br></div>
Прикрепления: 6511303.jpg(176Kb)


kredit-oformi
Дата: Пятница, 19.09.2014, 20:49 | Сообщение # 2
Vip
Сообщений:1953
Награды: 5


действительно красивый вид материалов
kredit-oformi
Дата: Пятница, 19.09.2014, 20:52 | Сообщение # 3
Vip
Сообщений:1953
Награды: 5


вот только картинка просмотров там устарела и пришлось заменить вот код если что с просмотрами

Код
<div id="allEntries"><div id="entryID158"><table style="width: 100%; border-collapse: collapse"><tbody><tr>    
<td style='width: 5px; height: 79px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/zornet_ru9/verh_left.png"); background-repeat: no-repeat; background-position: 100% 100%'>    
</td><td style='letter-spacing: 0px; word-spacing: 0px; vertical-align: top; background-image: url("http://zornet.ru/zornet_ru9/verh_center.png"); background-repeat: repeat-x; background-position: 50% 100%'>    
<table style="width: 100%; border-collapse: collapse"><tbody><tr>    
<td style="letter-spacing: 0px; word-spacing: 0px; height: 40px">    
    <div class="etitle"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?><a href="$ENTRY_URL$" style="">$TITLE$</a> <?if($DATE$='Сегодня' or $DATE$='Вчера')?><img src="http://zornet.ru/zornet_ru9/new.png" align="absmiddle"><?endif?></div>    
<style>    
    .etitle a:link,    
.etitle a:active,    
    .etitle a:visited {color: #ffffff; font-size:12pt; text-shadow: 1px 1px 0px #000000; font-family:tahoma; text-decoration:none;}    
.etitle a:hover {color: #999999; font-size:12pt; text-shadow: 1px 1px 0px #000000; font-family:tahoma; }    
    </style>    
       
    </td></tr><tr><td style="letter-spacing: 0px; word-spacing: 0px; height: 26px">    
    <img src="http://zornet.ru/zornet_ru9/download.png" width="10px"><b>Категория:</b> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <img src="http://zornet.ru/zornet_ru9/prof1.png" width="10px"><b>Добавил:</b> <a href="$PROFILE_URL$">$USERNAME$</a>    
</td></tr></tbody></table></td>    
<td style='width: 105px; letter-spacing: 0px; word-spacing: 0px; vertical-align: top; background-image: url("http://www.nagan-cs.ru/ucoz/ucoznc/verh_right.png"); background-repeat: no-repeat; background-position: 0% 100%'>    
<table style="width: 100%; border-collapse: collapse"><tbody><tr>    
<td style="height: 40px; letter-spacing: 0px; word-spacing: 0px; vertical-align: bottom; padding-left: 10px">    
<?$RSTARS$('17',' http://zornet.ru/zornet_ru9/rating.png ','1','float')?>    
</td></tr>    
    <tr align="center"></tr></tbody></table></td></tr></tbody></table><table style="width: 100%; border-collapse: collapse">    
<tbody><tr><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/zornet_ru9/left.png"); background-repeat: repeat-y; background-position: 100% 50%'>    
</td><td style="background-color: #ffffff;vertical-align: top; letter-spacing: 0px; word-spacing: 0px">    
<table style="background-color: #ffffff;width: 100%; border-collapse: collapse"><tbody><tr>    
<td style="background-color: #ffffff;vertical-align: top; letter-spacing: 0px; word-spacing: 0px; width: 200px"><table style="width: 100%; border-collapse: collapse">    
<tbody><tr><td style='background-color: #ffffff; vertical-align: top; letter-spacing: 0px; word-spacing: 0px; height: 135px; padding-left: 9px; padding-top: 9px; background-image: url("http://zornet.ru/zornet_ru9/img.png"); background-repeat: no-repeat; background-position: 50% 50%'>    
    <img id="img$ID$" style="cursor:pointer;" src="$IMG_URL1$" alt="" width="180" height="100">    
<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>    
</td></tr></tbody></table></td>    
    <td style="vertical-align: top; letter-spacing: 0px; word-spacing: 0px; padding-left: 3px; background-color: #ffffff;">    
    <div style="width:99%;overflow:hidden">$MESSAGE$</div>    
</td></tr></tbody></table></td><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/zornet_ru9/right.png"); background-repeat: repeat-y; background-position: 0% 50%'>    
</td></tr></tbody></table><table style="width: 100%; border-collapse: collapse"><tbody><tr><td style='width: 5px; height: 47px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/zornet_ru9/niz_left.png"); background-repeat: no-repeat; background-position: 100% 0%'><br></td>    
    <td style='letter-spacing: 0px; word-spacing: 0px; vertical-align: top; background-image: url("http://zornet.ru/zornet_ru9/niz_center.png"); background-repeat: repeat-x; background-position: 50% 0%'><table style="width: 100%; height: 100%; border-collapse: collapse" width="" align=""><tbody><tr><td><img src="http://www.besdos.ru/01/eye.png" alt=""><b>Просмотров:</b> $READS$ <img src="http://zornet.ru/zornet_ru9/vico-comments.png" width="14px"><b>Комментариев:</b> ($COMMENTS_NUM$)    

<br></td>    
<td style="letter-spacing: 0px; word-spacing: 0px; width: 130px; text-align: right; vertical-align: bottom; padding-right: 4px; padding-bottom: 9px" align="center">    

<input class="gbutton" type="button" onclick="document.location.href='$ENTRY_URL$'; return false;" value="Подробнее">    

</td></tr></tbody></table></td><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/zornet_ru9/niz_right.png"); background-repeat: no-repeat; background-position: 0% 0%'><br>    
</td></tr></tbody></table><br></div>
Kosten
Дата: Пятница, 19.09.2014, 21:19 | Сообщение # 4
Администраторы
Сообщений:12673
Награды: 39


kredit-oformi, не понял.. с какими просмотрами.

kredit-oformi
Дата: Пятница, 19.09.2014, 21:24 | Сообщение # 5
Vip
Сообщений:1953
Награды: 5


Kosten,

вот глаз я поставил так как которая раньше картинка была ссылка с нее на 404 шла
Прикрепления: 3895723.png(2Kb)


Сообщение отредактировал kredit-oformi - Пятница, 19.09.2014, 21:25
Kosten
Дата: Пятница, 19.09.2014, 21:55 | Сообщение # 6
Администраторы
Сообщений:12673
Награды: 39


kredit-oformi, все исправил, там много ссылок битых было.

Прикрепления: 3356049.jpg(23Kb)


Kosten
Дата: Пятница, 19.09.2014, 21:56 | Сообщение # 7
Администраторы
Сообщений:12673
Награды: 39


Кнопка "Подробнее" у каждого своя под ваш ресурс будет.

kredit-oformi
Дата: Пятница, 19.09.2014, 22:18 | Сообщение # 8
Vip
Сообщений:1953
Награды: 5


Kosten, хорошо так еще можно при желании изменить и цвет с названием материала

Прикрепления: 5480899.png(45Kb)
Kosten
Дата: Пятница, 19.09.2014, 22:19 | Сообщение # 9
Администраторы
Сообщений:12673
Награды: 39


kredit-oformi, да отлично. Вижу стал разбираться .. молотца.

kredit-oformi
Дата: Пятница, 19.09.2014, 22:20 | Сообщение # 10
Vip
Сообщений:1953
Награды: 5


Kosten, Спасибо за wink
Kosten
Дата: Пятница, 19.09.2014, 22:22 | Сообщение # 11
Администраторы
Сообщений:12673
Награды: 39


Очень похожий вид что в этом топе. Здесь только одно заменено, это само окошко, где располагается картинка. У того можно сказать с тенями, здесь же при наведение на его, вокруг становиться желтый оттенок цвета.



Переходим ЗДЕСЬ
Прикрепления: 2713760.jpg(39Kb)


kredit-oformi
Дата: Пятница, 19.09.2014, 22:54 | Сообщение # 12
Vip
Сообщений:1953
Награды: 5


Kosten, а я реально не заметил что это другой вид surprised
Kosten
Дата: Пятница, 19.09.2014, 22:59 | Сообщение # 13
Администраторы
Сообщений:12673
Награды: 39


kredit-oformi, biggrin но на картинке сильно не видно.. просто окно другое.

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Красивый вид материалов сайта системы uCoz (Клевый вид)
Страница 1 из 11
Поиск: