NK-uCoz.Ru » Каталог файлов » uCoz » Авторство NK-uCoz.Ru » Вид материалов как на CSOMSK

Вид материалов как на CSOMSK

Вид материалов как на CSOMSK
Авторство NK-uCoz.Ru
na3uTuB4uk
02.02.13, 15:05
1295
0
Описание:
Красивый вид материалов со старого шаблона Orel-CS переделанный для сайта CSOMSK перекрашен + кнопка мне нравится, хорошо подойдет под разные тематики, но не для легких дизайнов.

Установка:
В CSS Следующий код:
Код
/* Content */  
  .v_loop {width:705px; padding:5px 0 0 0; margin:0 0 8px 0; background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -1414px 0;}  
  .v_top {height:42px; overflow:hidden; background:#6e3400 url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -1414px -5px;}  
  .v_top .right {height:30px; line-height:30px; margin:4px 52px 0 0;font-weight:bold; font-size:12px; color:#fff; text-shadow:1px 0px 1px #003d08;}  
  .v_top .right a {color:#fff; text-decoration:none;}  
  .v_top .right a:hover {text-decoration:underline;}  
  .v_rating {float:right; margin:12px 50px 0 0;}  
  .v_title {height:30px; line-height:30px; margin:0; padding:4px 0 0 22px; font-weight:bold; font-size:12px; color:#fff; text-shadow:1px 0px 1px #003d08;}  
  .v_title a {color:#fff; text-decoration:none;}  
  .v_title a:hover {text-decoration:underline;}  
  .v_loop.coll2 {background-position:-2970px 0;}  
  .v_loop.coll2 .v_top {background-position:-2970px -5px;}  
  .v_title.left,  
  .v_title.right {width:352px; padding-left:0; margin:0; text-align:center;}  
  .v_loop.coll2 .v_cont_in {min-height:154px; position:relative;}  
  .cInf {width:322px; overflow:hidden; float:left; padding:2px 0; font-weight:bold; font-size:12px;}  
  .cInf:first-child {margin:0 35px 0 3px;}  
  .cInf li {margin:0 0 4px 0;}  
  .cInf li a {width:308px; height:27px; line-height:27px; display:block; overflow:hidden; padding:0 4px 0 10px; color:#ededed; text-shadow:1px 0px 1px #000; text-decoration:none; background:#404040 url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -3677px 0;}  
  .cInf li a:hover {background-position:-3677px -29px;}  
  .cInf li a span {width:85px; height:18px; line-height:18px; display:block; float:right; margin:4px 0 0 0; overflow:hidden; font-weight:100; font-size:11px; color:#000; text-shadow:1px 0px 1px #fff; text-align:center;}  
  .cInf li a span b {font-weight:bold;}  
  .cInf_line {width:10px; height:144px; position:absolute; left:349px; top:0px; background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/pict_border_bg.png) no-repeat -162px 0;}  
  .v_cont {background:#dfdfdf url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) repeat-y 0 0;}  
  .v_cont_in {overflow:hidden; padding:5px 9px 4px 9px; background:url(http://csomsk.ru/design/viewn_bg.png) no-repeat -707px bottom;}  
  .v_pict {width:153px; height:134px; overflow:hidden; padding:6px 0 0 7px; float:left; background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/pict_border_bg.png) no-repeat 0 0;}  
  .v_pict img {width:138px; height:127px; vertical-align:top;}  
  .v_pict a {width:138px; height:127px; display:block; margin:0 0 20px 0; position:relative;}  
  .v_pict a span {width:138px; height:127px; display:block; position:absolute; left:0px; top:0px; z-index:1;}  
  .v_pict a:hover span {background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/pict_border_bg.png) no-repeat -7px -6px;}  
  .v_info {margin:0 0 0 160px; position:relative;}  
  .v_info dl {width:465px; height:28px; line-height:28px; padding:0 16px; overflow:hidden; font-weight:bold; color:#ededed; text-shadow:1px 0px 1px #000; background:#3c3c3c url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -2121px 0;}  
  .v_info dt {display:inline;}  
  .v_info dd {display:inline;}  
  .v_info dl a {color:#ededed; text-shadow:1px 0px 1px #000; text-decoration:none;}  
  .v_info dl a:hover {color:#fff; text-decoration:underline;}  
  a.v_comm_link {width:154px; height:21px; line-height:19px; padding:0 0 0 10px; display:block; margin:2px 0 0 0; position:relative; left:-4px; font-weight:bold; color:#fff; text-shadow:1px 0px 1px #6e3400; text-align:center; text-decoration:none; background:#6e3400 url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -2620px 0;}  
  a.v_comm_link:hover {text-decoration:underline;}  
  .v_detail {width:688px; height:22px; padding:6px 0 0 7px; margin:7px 0 0 -4px; background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -2121px -29px;}  
  .v_load,  
  .v_comm,  
  .v_view {height:20px; line-height:20px; float:left; padding:0 0 0 21px; margin:0 18px 0 0; color:#ededed; text-shadow:1px 0px 1px #000; background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/icon.png) no-repeat 0 1px;}  
  .v_load {}  
  .v_comm {background-position:0 -19px;}  
  .v_view {background-position:0 -39px;}  
  a.v_link {width:123px; height:29px; line-height:29px; display:block; float:right; margin:-6px -28px 0 0; font-weight:bold; font-size:12px; color:#fff; text-align:center; text-decoration:none;}  
  a.v_link:hover {background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -2818px 0;}  
  .v_download {width:150px; float:right; margin:-6px 0 0 0; font-weight:bold; font-size:12px; text-align:center;}  
  .v_download a {width:115px; height:20px; line-height:1.2; padding:5px 0 0 35px; display:block; color:#fff; text-shadow:1px 0px 1px #6e3400; text-decoration:none;}  
  .v_download a:hover {background:url(http://nk-cs.ucoz.ru/test_img/des_omsk/viewn_bg.png) no-repeat -2818px -31px;}  
  .vInner .v_detail {margn-bottom:3px;}  
  .vInner .v_link {width:134px;}
  .v_sys {float:left; margin:2px 5px 0 0;}  
  /* ------- */


Теперь в вид материалов новостей:
Код
<div class="v_loop">
<?if($MODER_PANEL$)?><div style="float:right;padding:12px 5px 0 0;">$MODER_PANEL$</div><?endif?>
<div class="v_top"> <div class="v_rating2"><a style="text-decoration: none;" class="ilike_rating" href="javascript://" id="golike" onclick="$.get('/news/0-0-5-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка!',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успешно!',{w:270,h:60,t:8000})};});">Мне Нравится <img src="http://nk-cs.ucoz.ru/test_img/des_omsk/like.png" class="like"> $RATED$</a>
  </div>
  <style>a.ilike_rating {
  display: block;
  float: right;
  background: rgba(0, 0, 0, 0.8);
  height: 21px;
  padding: 0 4px 0 4px;
  font: bold 12px/21px Arial;
  color: white;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin-top: -2px;
  }
  a.ilike_rating:hover{text-decoration:none;background-color:#000;}
  .v_rating2 {float:right; margin:12px 48px 0 0;}
  .like {opacity:0.5; vertical-align:-4px;}
  .like:hover {opacity:0.8;}</style>
<h4 class="es-title"><a class="elink" href="$ENTRY_URL$"><strong>$TITLE$ <?if($DATE$="Сегодня")?><img src="http://nk-cs.ru/designs_img/news_dlya_katalogov.png"><?endif?></strong></a></h4></div>
<div class="v_cont"><div class="v_cont_in">
<div class="hidden">
<div class="v_pict"><?if($IMG_URL1$)?><a href="$IMG_URL1$" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$" width="138" height="127"><span></span></a><?endif?></div>
<div class="v_info">
<dl><dt>Категория:</dt> <dd><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></dd></dl>
<div class="musicBlock" style="padding:6px;">$MESSAGE$</div>
</div><!--/v_info-->
</div><!--/hidden-->
<div class="v_detail">
<div class="v_comm">Комментариев: <b>$COMMENTS_NUM$.</b></div>
<div class="v_view">Просмотров: <b>$READS$</b></div>
<div class="v_download"><a href="$ENTRY_URL$">Подробнее</a></div>
</div><!--/v_detail-->
</div>
</div></div><!--/v_loop-->
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+Enter
Вернуться назад
Комментарии (0)