» »

Вид материалов каталога файлов + эффект для uCoz


Вид материалов каталога файлов + эффект для uCoz

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

Цвет плашки верхней взял тот который основном применяется, не стал его делать слишком темным, чтоб он сливался с белым фоном. При наведение на скрин, будет эффект, который вы можете сами настроить. Просто в настройках поставил не слишком затемненный, чтоб можно было видеть. Если вы наводите то вся тень уходит. Функций как счетчики выбрал для него, чтоб подходили по дизайну, только вот с кнопкой "далее" не мог разобраться и сделал ее темно желтой, но все можно подогнать под любой ресурс интернета.

Выбираем модуль и ставим код:

Код
<?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?>

<div class="e-news"><div class="e-title" style="text-align: left;"><strong><a href="$ENTRY_URL$">$TITLE$ <?if($DATE$='Сегодня' or $DATE$='Вчера')?><img src="http://zornet.ru/SKRIPT/dsar/remyk/news.png" align="absmiddle" title="Добавлено $DATE$"><?endif?></a></strong></div>  
  <div style="text-align: left; clear: both; padding-top: 2px; padding-bottom: 2px;"><table style="width: 100%;"><tbody><tr><td class="banners" style="height: 122px;width: 141px;" valign="top"><div class="viewn_row"><span><a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/blog/0-0-1-$ID$-14-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})};});" title="Мне нравится!"><div class="klass">$RATED$</div></a></span></div>  
  <div class="v_poster"><?if($IMG_URL1$)?><a href="$IMG_URL1$" class="ulightbox"><img id="img$ID$" src="$IMG_URL1$" width="135" height="122"></a><?else?><a href="http://zornet.ru/SKRIPT/dsar/remyk/No_screen.gif" class="ulightbox"><img id="img$ID$" src="http://zornet.ru/SKRIPT/dsar/remyk/No_screen.gif" width="135" height="122"></a><?endif?></div>  
  <td style=": 9px; color: rgb(0, 0, 0); font-size: 12px;" valign="top">$MESSAGE$</td>  
</tr></tbody></table></div>  
  <div class="newsline">  
<span class="inftime" style="margin-right:10px;" title="Дата"><b>$DATE$</b></span>  
<span class="infcomms" style="margin-right:10px;" title="Комментариев"><b>$COMMENTS_NUM$</b></span>  
<span class="infview" style="margin-right:10px;" title="Просмотров"><b>$READS$</b></span>  
<span class="infauthor" style="margin-right:10px;" title="Автор"><b>$USERNAME$</b></span>  
  <span class="nstars">  
</div>  
  <a class="button" title="Подробнее/Скачать $TITLE$" href="$ENTRY_URL$" style="float: right;"><span>Подробнее</span></a>  
  <?if($ATTACHMENTS$)?><div class="e-Attach">Прикрепления: $ATTACHMENTS$</div><?endif?><div class="e-Details" style="clear: both;">
</div></div><br>


CSS:

Код
.inftime {  
margin-top:3px;  
display:table;  
height:20px;  
line-height:20px;  
background:#e1eef7 url(http://zornet.ru/SKRIPT/dsar/remyk/inftime.png) left no-repeat;  
padding-left:32px;  
font-size:11px;  
color:#1998da;  
border-radius:3px;  
padding-right:9px;  
float:left;  
}  

.infcomms {  
margin-top:3px;  
display:table;  
height:20px;  
line-height:20px;  
background:#f9f3e2 url(http://zornet.ru/SKRIPT/dsar/remyk/infcomms.png) left no-repeat;  
padding-left:32px;  
font-size:11px;  
color:#a26324;  
border-radius:3px;  
padding-right:9px;  
float:left;  
}  

.infview {  
margin-top:3px;  
display:table;  
height:20px;  
line-height:20px;  
background:#f5f5f5 url(http://zornet.ru/SKRIPT/dsar/remyk/view.png) left no-repeat;  
padding-left:32px;  
font-size:11px;  
color:#838487;  
border-radius:3px;  
padding-right:9px;  
float:left;  
}  

.infauthor {  
margin-top:3px;  
display:table;  
height:20px;  
line-height:20px;  
background:#e1eef7 url(http://zornet.ru/SKRIPT/dsar/remyk/author.png) left no-repeat;  
padding-left:32px;  
font-size:11px;  
color:#1998da;  
border-radius:3px;  
padding-right:9px;  
float:left;  
}

.viewn_row {  
background: url(http://zornet.ru/SKRIPT/dsar/rgb.png) repeat;  
height: 14px;  
line-height: 14px;  
color: #fff;  
text-shadow: 0 1px 0 #1a1a1a;  
position: absolute;  
z-index: 10;  
-webkit-border-radius: 2px;  
-moz-border-radius: 2px;  
border-radius: 2px;  
margin: 2px;  
padding: 3px 5px;  
}  
.klass {background: url(http://zornet.ru/SKRIPT/dsar/klass-s2.png) no-repeat 0 0px;  
padding: 0 0 2px 20px;  
}  
.v_poster {background: url(http://zornet.ru/SKRIPT/dsar/v_poster.png) no-repeat;  
width: 135px;  
height: 122px;  
float: left;  
margin: 0 0 0 2px;  
border-radius: 3px;  
-webkit-border-radius: 3px;  
-moz-border-radius: 3px;  
-khtml-border-radius: 3px;  
}  
  #golike{color:#ffffff;}  
.v_poster img {width:135px; height:122px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px;}  
  .e-news {-moz-border-radius:5px;-webkit-border-radius:5px; border-radius: 6px; background:#fff; border:1px solid #B8B6B6; padding:1px; margin-bottom:3px;}  
.e-title {text-align:left; background:url('http://zornet.ru/SKRIPT/dsar/MeFj0NE.png') repeat-x #FFFFFF; background-position:0 50%; padding:8px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}  
.e-title a:link, .e-title a:visited {color:#fff; font-size:9pt; text-shadow:0px 1px 0px #000000;}  
.e-title a:hover, .e-title a:active {color:#fff; text-shadow:0px 0px 5px #fff;}  
.eMessagecsomsk a img, .eMessagecsomsk img {padding:3px !important;background:#ffffff;  
border:1px solid#dbdbdb !important;border-radius:4px;  
-moz-border-radius:7px;box-shadow:0px 0px 10px #e8e8e8;-moz-box-shadow:0px 0px 10px #e8e8e8;}  
a img {border:0px;}  
.e-Attach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('http://zornet.ru/SKRIPT/dsar/21.gif') no-repeat 0px 0px;}  
   
a.button {border:0px; background: transparent url('http://zornet.ru/SKRIPT/dsar/zUSMLup.png') no-repeat scroll top right; color: #fff; display: block; float: left; font: normal 11px tahoma, sans-serif; height: 26px; margin: 2px; padding-right: 8px; /* sliding doors padding */ text-decoration: none;}  
a.button span {border:none; background: transparent url('http://zornet.ru/SKRIPT/dsar/H0HJFN0.png') no-repeat; display: block; line-height: 23px; padding: 1px 0 2px 8px; vertical-align:middle; color: #fff;}  
a.button:hover { outline: none; background-position: 100% -26px; color: #fff; text-decoration: none;}  
a.button:hover span { background-position: 0% -26px; color: #fff;}  
a.button:active { outline: none; background-position: 100% -52px; text-decoration: none;}  
a.button:active span { background-position: 0% -52px; color: #fff;}  
.banners a img {  
opacity:0.7; -moz-opacity:0.3; filter:alpha(opacity=40);  
}  
.banners a:hover img {  
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);  
}


Теперь разберемся с работой рейтинга, чтоб выводили цифры.

Сейчас настроено под блог в скрипте:

Код
/blog/0-0-1-$ID$-14-1


Если нужно новости сайта, то меняем на этот:

Код
/news/0-0-5-$ID$-15-1


Под каталог статей прописываем этот код:

Код
/publ/0-1-5-$ID$-3


Но это три основных модуля, на который можно установить.
10.08.2015 Просмотров: 714 Комментарий: (5)

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

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

Комментарий: 5
Kosten
Kosten 10.08.2015 03:371
0
Как вам с трех вида материала в один сделано.
ZruBkul
ZruBkul 05.09.2015 19:082
0
Только можно заострить внимание на сам рейтинг а вид не отличается от всех, да немного если.
Kosten
Kosten 05.09.2015 19:303
0
Почему только рейтинг, этот вид можно поставить на любую тему и дизайн, где находиться голубой оттенок.
Kvint
Kvint 06.09.2015 02:064
0
Этот вижу в первые, хотя не чего в нем оригинального не нахожу, видать с нескольких кодов был собран, так как рейтинг на изображение был совершенно на другом виде, хотя могу ошибаться, так как в интернете он как скрипт есть и можно было установить.
Kosten
Kosten 06.09.2015 02:155
0
На фиксированной ширине будет красиво смотреться, да кнопку не хватило времени перекрасить, но думаю кому нужно тот быстро сделает.
avatar