Красивый вид материалов сайта системы uCoz
|
|
Kosten | Среда, 14 Ноября 2012, 12:32 | Сообщение 1 |
|
О вид материалов сайта Красивый вид материалов сайта системы 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>
| Страна: (RU) |
| |
kredit-oformi | Пятница, 19 Сентября 2014, 20:49 | Сообщение 2 |
| действительно красивый вид материалов
| Страна: (RU) |
| |
kredit-oformi | Пятница, 19 Сентября 2014, 20:52 | Сообщение 3 |
| вот только картинка просмотров там устарела и пришлось заменить вот код если что с просмотрами
Код <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, 21:19 | Сообщение 4 |
| kredit-oformi, не понял.. с какими просмотрами.
| Страна: (RU) |
| |
kredit-oformi | Пятница, 19 Сентября 2014, 21:24 | Сообщение 5 |
| Kosten,
вот глаз я поставил так как которая раньше картинка была ссылка с нее на 404 шла
Сообщение отредактировал kredit-oformi - Пятница, 19 Сентября 2014, 21:25 | Страна: (RU) |
| |
Kosten | Пятница, 19 Сентября 2014, 21:55 | Сообщение 6 |
| kredit-oformi, все исправил, там много ссылок битых было.
| Страна: (RU) |
| |
Kosten | Пятница, 19 Сентября 2014, 21:56 | Сообщение 7 |
| Кнопка "Подробнее" у каждого своя под ваш ресурс будет.
| Страна: (RU) |
| |
kredit-oformi | Пятница, 19 Сентября 2014, 22:18 | Сообщение 8 |
| Kosten, хорошо так еще можно при желании изменить и цвет с названием материала
| Страна: (RU) |
| |
Kosten | Пятница, 19 Сентября 2014, 22:19 | Сообщение 9 |
| kredit-oformi, да отлично. Вижу стал разбираться .. молотца.
| Страна: (RU) |
| |
kredit-oformi | Пятница, 19 Сентября 2014, 22:20 | Сообщение 10 |
| Kosten, Спасибо за
| Страна: (RU) |
| |
Kosten | Пятница, 19 Сентября 2014, 22:22 | Сообщение 11 |
| Очень похожий вид что в этом топе. Здесь только одно заменено, это само окошко, где располагается картинка. У того можно сказать с тенями, здесь же при наведение на его, вокруг становиться желтый оттенок цвета.
Переходим ЗДЕСЬ
| Страна: (RU) |
| |
kredit-oformi | Пятница, 19 Сентября 2014, 22:54 | Сообщение 12 |
| Kosten, а я реально не заметил что это другой вид
| Страна: (RU) |
| |
Kosten | Пятница, 19 Сентября 2014, 22:59 | Сообщение 13 |
| kredit-oformi, но на картинке сильно не видно.. просто окно другое.
| Страна: (RU) |
| |