Описание:
Красивый вид материалов со старого шаблона Orel-CS переделанный для сайта CSOMSK перекрашен + кнопка мне нравится, хорошо подойдет под разные тематики, но не для легких дизайнов.
Установка:
В CSS Следующий код:
Теперь в вид материалов новостей:
Красивый вид материалов со старого шаблона 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;}
/* ------- */
.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-->
<?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)
Добавить