ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивый вид материала блога или новостей для uCoz

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

Красивый вид материала блога или новостей для uCoz
Что сразу хочется сказать за материал который представлен, просто Красивый вил материала блога или новостей для uCoz собран из несколько кодов этого плана. Что то было кардинально переделано с помощью фотошоп и подом подогнано на тестовом сайте, чтоб все корректно смотрелось. Все кнопки и иконки заменены на новые, что говорить о переходе, то он светло желтой гамме и сделан на чистом CSS, что при переходе вы заметите. За основу был взят один скрипт и у него был рейтинг и находился на большом пространстве, и не так красиво смотрелся, пришлось убрать и создать новую картинку, где сейчас и находиться сфера модератора и администратора как редактирование.

Когда вы зальете файл или просто напишите статью, то появиться небольшой ярлычок с надписью новинка и будет стоять несколько дней, а точнее около 2 - 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/SKRIPT/dsar/remyk/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/SKRIPT/dsar/remyk/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"><a href="$ENTRY_URL$">$TITLE$ <?if($DATE$='Сегодня' or $DATE$='Вчера')?><img src="http://zornet.ru/SKRIPT/dsar/fresal/KC7i4xL.png" align="absmiddle" title="$DATE$"><?endif?></a></div>  
<style>  
  .noimage1 img {background: none repeat scroll 0 0 #515151;border: 1px solid #515151;border-radius: 3px 3px 3px 3px;margin: 2px;padding: 1px;}  
.noimage1 img:hover {background:none repeat scroll 0 0 #FFC500;border: 1px solid #515151;}  
.etitle {padding-left:6px;padding-bottom:5px; color: #ffffff; font-size:12pt; text-shadow: 0px 1px 0px #000000; font face:Arial; }
.etitle a:link,  
.etitle a:active,  
.etitle a:visited {color: #ffffff; font-size:12pt; text-shadow: 0px 1px 0px #000000; font face:Arial; text-decoration:none;}  
.etitle a:hover {color: #999999; font-size:12pt; text-shadow: 0px 1px 0px #000000; font face:Arial; }  

  a.button24 {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
}  
a.button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }  
</style>  
  </td></tr><tr><td style="letter-spacing: 0px; word-spacing: 0px; height: 26px">  
  <img src="http://zornet.ru/SKRIPT/dsar/fresal/Blueprint-2-icon.png" width="14px"> <b>Категория:</b> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <img src="http://zornet.ru/SKRIPT/dsar/fresal/user.png" width="14px"> <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://i.imgur.com/15UWeob.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($MODER_PANEL$)?><div style="float:right;display: block; margin: +5px auto;z-index: 100; opacity: 0.8; padding-right: 10px;">$MODER_PANEL$</div><?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/SKRIPT/dsar/remyk/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: +30px; padding-top: 9px; background-image: url("http://i.imgur.com/rfaDiN3.png"); background-repeat: no-repeat; background-position: 80% 5%'>  
  <img id="img$ID$" style="cursor:pointer; border-radius: 5px;" src="$IMG_URL1$" alt="" width="155" height="119">  
<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/SKRIPT/dsar/remyk/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/SKRIPT/dsar/remyk/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/SKRIPT/dsar/remyk/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/SKRIPT/dsar/fresal/sMVs0LB.png" alt=""> <b>Просмотров:</b> $READS$ <img src="http://zornet.ru/SKRIPT/dsar/fresal/y48Du8L.png" width="14px"> <b>Комментариев:</b> ($COMMENTS_NUM$) <img src="http://zornet.ru/SKRIPT/dsar/fresal/Calender-day-icon.png" width="14px"> <b>Дата:</b> $DATE$ в $TIME$  
<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">  
<a href="$ENTRY_URL$" class="button24">Подробнее</a>
</td></tr></tbody></table></td><td style='width: 5px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://zornet.ru/SKRIPT/dsar/remyk/niz_right.png"); background-repeat: no-repeat; background-position: 0% 0%'><br>  
</td></tr></tbody></table><br></div>
11 Августа 2015 Просмотров: 2363 Комментариев: (7)

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

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

Оставь свой отзыв

Комментарии: 7
ZruBkul
ZruBkul 05 Сентября 2015 19:061
0
Видно изначально что дизайн переделан, хотя этот красивей смотрится чем был на нем рейтинг, который явно не подходил к нему.
Kosten
Kosten 05 Сентября 2015 19:272
0
Этот вообще полностью переделан и переписан, от старого 30% не более осталось, а остальное все было сделано.
Kvint
Kvint 06 Сентября 2015 02:053
0
Видел реальный вид материала этот, так все норимально, но рейтинг такой тонкий, что в интернете не могли подобрать по шире. Здесь хоть убрали его и вид немного изменился и видно обвод вокруг изображение, но слишком широкий, но все можно исправит в стилях, это не просто ошибка а так замечание.
Kosten
Kosten 06 Сентября 2015 02:144
0
Все же отличается от оригинала, хотя тот что в интернете им не считаю как и этот что переделал.
golub-evgenij
golub-evgenij 28 Февраля 2017 03:125
0
Где изменить ширину ?
растянуто на весь экран и ушло под вертикальные меню вниз!
golub-evgenij
golub-evgenij 28 Февраля 2017 03:446
0
Или в высоте проблема ? все вниз скидывает и растягивает на всю ширену
golub-evgenij
golub-evgenij 28 Февраля 2017 03:507
0
В общем победил!
Проблема в старом коде, не смотря на то что он был закомментирован все равно мешал каким то образом
avatar