вСкрипты для Юкоз

Вид материалов Каталога файлов Vesgta для uCoz

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

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

Установка:

Ставим в админ панели вид материала:

Код
<div class=»internetempire_load»><div class=»top»>  
<div class=»title»><a href=»$ENTRY_URL$»>$TITLE$</a></div> <a href=»$CATEGORY_URL$» class=»name»>$CATEGORY_NAME$</a> </div>  
<div class=»cont»><div class=»hidden» style=»margin:0 0 5px 0;»><div class=»screen»><img src=»$IMG_URL1$»></div> <div class=»text»>$MESSAGE$</div> </div>  
<div class=»panel»><div class=»right»>
  <?if($CATEGORY_NAME$)?><a class=»e-category» href=»$CATEGORY_URL$»>$CATEGORY_NAME$</a><span class=»ed-sep»> | </span><?endif?>
<span class=»e-reads»><span class=»ed-title»>Просмотров:</span> <span class=»ed-value»>$READS$</span></span><span class=»ed-sep»> | </span>
<span class=»e-loads»><span class=»ed-title»>Загрузок:</span> <span class=»ed-value»>$LOADS$</span></span><span class=»ed-sep»> | </span>
<?if($USERNAME$)?><span class=»e-author»><span class=»ed-title»>Добавил:</span> <span class=»ed-value»><a href=»$PROFILE_URL$»>$USERNAME$</a></span></span><span class=»ed-sep»> | </span><?endif?>
<span class=»e-date»><span class=»ed-title»>Дата:</span> <span class=»ed-value» title=»$TIME$»>$DATE$</span></span>
<?if($COMMENTS_URL$)?><span class=»ed-sep»> | </span><a class=»e-comments» href=»$COMMENTS_URL$»>Комментарии ($COMMENTS_NUM$)</a><?endif?>  
  <a href=»$ENTRY_URL$» class=»button»>Просмотр</a></div></div>  
</div></div><div style=»border-bottom: solid 1px #E8E4E4; padding:3px;margin: 0px 0px 15px;»></div>

CSS:

Код
.internetempire_load overflow:hidden; margin:0 0 10px 0;font-family:Cuprum;  
.internetempire_load .top overflow:hidden; height:20px; margin:0 0 10px 0;  
.internetempire_load .top div.title float:left; margin:0 10px 0 0; text-transform:uppercase; font-size:16px; color:#3c3c3c;  
.internetempire_load .top div.title a color: #185698;font-weight: bold;  
.internetempire_load .top div.title a:hover color: #217ED0;font-weight: bold;  
.internetempire_load .top a.name display:block; float:right; text-decoration:none; height:20px; line-height:22px;background: #3A90DC; padding:0 10px 0 10px; color:#fff; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;  
.internetempire_load .top a.name:hover background: #389DE6;  
.internetempire_load .cont overflow:hidden;  
.internetempire_load .screen float:left; width:150px; height:99px; margin:0 10px 0 0;  
.internetempire_load .screen img display:block; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius: 5px;width: 150px;height: 125px;border: 3px solid #ABABAB;  
.internetempire_load .text overflow:hidden; padding:0 0 10px 0;color: #393939;font-size: 14px;font-family: Tahoma;  
.internetempire_load .panel width:100%;margin: 39px 0px;float:left;height:28px;line-height:30px; padding:0 3px;background: #E4E4E4;color: #404040;border-radius: 3px;/* text-transform:uppercase; */font-family: Tahoma;  
.internetempire_load .panel a color:#393939;  
.internetempire_load .panel span list-style:none; color:#2c3436;  
.internetempire_load a.button display:block; text-decoration:none; float:right; margin:0 3px 0 20px; width:140px; height:28px; line-height:30px; text-align:center; background:#393939; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; color:#fff; text-transform:uppercase;  
.internetempire_load a.button:hover background: #132D69;color:#fff;  
.internetempire_load acolor: #585858;text-transform:uppercase;text-decoration: none;  
.internetempire_load a:hover color: #8C6941;text-transform:uppercase;text-decoration: none;  

Также не забыл про классы, которые выводят иконки, подробнее как поставить написано на форуме сайта.

И здесь получается так:

Это уже готовый код:

Код
<div class=»internetempire_load»><div class=»top»>  
<div class=»title»><a href=»$ENTRY_URL$»>$TITLE$</a></div> <a href=»$CATEGORY_URL$» class=»name»>$CATEGORY_NAME$</a> </div>  
<div class=»cont»><div class=»hidden» style=»margin:0 0 5px 0;»><div class=»screen»><img src=»$IMG_URL1$»></div> <div class=»text»>$MESSAGE$</div> </div>  
  <div class=»panel»><div class=»right»> <i class=»fa fa-calendar»></i> Дата: <span>$DATE$</span> » <i class=»fa fa-eye»></i> Просмотр: <span>$READS$</span> » <i class=»fa fa-comments-o»></i> Комментарий: <span>$COMMENTS_NUM$</span> » <i class=»fa fa-download»></i> <span>$LOADS$</span> » <i class=»fa fa-user-secret»></i> Разместил: <a href=»$PROFILE_URL$» target=»_blank»><span>$USERNAME$</span></a><a href=»$ENTRY_URL$» class=»button»>Перейти к материалу</a></div></div>  
</div></div><div style=»border-bottom: solid 1px #E8E4E4; padding:3px;margin: 0px 0px 15px;»></div>

Вообщем они оба смотрятся хорошо, это только вам решать, какой установить. Это что то из той поры, когда начали появляться не сильно широкие по размеру и теперь они стали более актуальны.

Источник: http://internetempire.ru/

источник: zornet.ru

Похожие посты