• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красивый вид материалов сайта системы uCoz (Клевый вид)
Красивый вид материалов сайта системы uCoz
Kosten
Среда, 14 Ноября 2012 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70


О вид материалов сайта
Красивый вид материалов сайта системы 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 (175.9 Kb)
Страна: (RU)
kredit-oformi
Пятница, 19 Сентября 2014 | Сообщение 2
Оффлайн
Vip
Сообщений:1975
Награды: 5
действительно красивый вид материалов
Страна: (RU)
kredit-oformi
Пятница, 19 Сентября 2014 | Сообщение 3
Оффлайн
Vip
Сообщений:1975
Награды: 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>
Страна: (RU)
Kosten
Пятница, 19 Сентября 2014 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
kredit-oformi, не понял.. с какими просмотрами.
Страна: (RU)
kredit-oformi
Пятница, 19 Сентября 2014 | Сообщение 5
Оффлайн
Vip
Сообщений:1975
Награды: 5
Kosten,

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


Сообщение отредактировал
kredit-oformi - Пятница, 19 Сентября 2014, 21:25
Страна: (RU)
Kosten
Пятница, 19 Сентября 2014 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
kredit-oformi, все исправил, там много ссылок битых было.

Прикрепления: 3356049.jpg (22.9 Kb)
Страна: (RU)
Kosten
Пятница, 19 Сентября 2014 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Кнопка "Подробнее" у каждого своя под ваш ресурс будет.
Страна: (RU)
kredit-oformi
Пятница, 19 Сентября 2014 | Сообщение 8
Оффлайн
Vip
Сообщений:1975
Награды: 5
Kosten, хорошо так еще можно при желании изменить и цвет с названием материала

Прикрепления: 5480899.png (44.9 Kb)
Страна: (RU)
Kosten
Пятница, 19 Сентября 2014 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
kredit-oformi, да отлично. Вижу стал разбираться .. молотца.
Страна: (RU)
kredit-oformi
Пятница, 19 Сентября 2014 | Сообщение 10
Оффлайн
Vip
Сообщений:1975
Награды: 5
Kosten, Спасибо за wink
Страна: (RU)
Kosten
Пятница, 19 Сентября 2014 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Очень похожий вид что в этом топе. Здесь только одно заменено, это само окошко, где располагается картинка. У того можно сказать с тенями, здесь же при наведение на его, вокруг становиться желтый оттенок цвета.



Переходим ЗДЕСЬ
Прикрепления: 2713760.jpg (38.5 Kb)
Страна: (RU)
kredit-oformi
Пятница, 19 Сентября 2014 | Сообщение 12
Оффлайн
Vip
Сообщений:1975
Награды: 5
Kosten, а я реально не заметил что это другой вид surprised
Страна: (RU)
Kosten
Пятница, 19 Сентября 2014 | Сообщение 13
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
kredit-oformi, biggrin но на картинке сильно не видно.. просто окно другое.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красивый вид материалов сайта системы uCoz (Клевый вид)
  • Страница 1 из 1
  • 1
Поиск: