» »

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


Вид материалов Каталога файлов 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 a{color: #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/
24.02.2016 Просмотров: 708 Комментарий: (17)

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

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

Комментарий: 17
Scheme
Scheme 24.02.2016 22:181
0
Самый нормальный вид материала, где точно не найдете не чего лишнего, все на стилях почти создано.
Сопрано
Сопрано 24.02.2016 22:222
0
kvyntin, что то такое за придельное для меня, просто привык к другим. Но такие давно были, и сейчас вообще смотришь как что то новое, и если рассудить, то не 10 или 12 можно вывести а намного больше. Название написано понятно и большим шрифтом, для меня это уже нормально. А что там какие то эффекты, они и раньше были, этим уже не удивить, если он при нажатие далее на развернется как роза.
Kvint
Kvint 24.02.2016 22:243
0
Так в нем стандартные коды прописаны, зачем что то придумывать, когда есть уже полный скрипт.
Canon
Canon 24.02.2016 22:254
0
Если категория будет большой, то можно представить как вытянется на пол вида. biggrin
Kosten
Kosten 24.02.2016 22:295
0
Но также представлен второй вид, там уже немного изменено, и кто то хочет так поставить с такими иконками. А сто за функций,, так и написал, что взяты были системы, просто не вижу что то мудрить и все правильно, когда есть уже готовый с операторами и настроен.

Просто саму ширину изображение больше сделал, но совсем малая была и висела на функциях, пришлось немного шире сделать и хватило еще на обвод, так как настраивал на светлый сайт и темными элементами.
Сафрон
Сафрон 24.02.2016 22:336
0
Ну зачем делать большие категорий, их выводят же по ключичным словам, а где вы большие ключи выдели, все продуманно и правильно, вид сменился, если бы без него, то точно был бы простой.
Maryges
Maryges 24.02.2016 22:437
0
Вид как вид, но не чего такого в нем не увидел, не скажу что простой, вы стили посмотрите, а потом пишите, что просто как 2 копейки, нормальный рабочий и тем много подойдет под него.
Alex_L_X
Alex_L_X 24.02.2016 22:458
0
Старался человек, сделал достойно необычно, всегда радуют новые идеи именно в этот раздел сайта
Tergran
Tergran 24.02.2016 22:499
0
Мне интересно, как вы вообще подсчитываете или как вообще делаете, что вид простой или сложный. Вам не кажется, что все сложно, если качается сайт строение. Это другое дело, если ты знаешь, но суди от себя а не навязывай другим, и говорите прямо, что для меня, меня здесь ключевое слово. А то пишите, он простой, где простой, кто то читать будет и подумает, а зачем мне простой, мне нужно что то серьезное, хотя по самое для него он серьезен.
Alex_L_X
Alex_L_X 24.02.2016 22:5110
0
ты под чем?
csretven
csretven 24.02.2016 22:5711
0
Он о том, что много умных собралось, и считаю все простым. Но сами не чего не понимают, не чего простого нет, а адаптация, если она качественная, то думаю и такого слово не слышали, люди стараються делают, а здесь, прост не для меня, но перец, а что тебе нужно, что то что у других нет. Так иди много ресурсов тебе предложат услугу, а денег требуют, но тогда лучше предержи свое мнение при себе и довольствуйся что есть.
Alex_L_X
Alex_L_X 24.02.2016 23:0012
0
вы оба под чем?
Maryges
Maryges 24.02.2016 23:0816
0
А что так круто в интернете грубить, под чем они, или просто интересует так сильно.
Kosten
Kosten 24.02.2016 23:1117
0
Заканчиваем, только по теме, кто под чем, другой за слова цепляется, двор что ли нашли.
По теме, есть что сказать пишите, и так нафлудили по самое.
Kosten
Kosten 24.02.2016 23:0113
0
Тут теперь осталось под мобильное устройство настроить, но нужно делать, когда установлен будет. У меня вообще вывод изображение на 2 кода расписан, один для мобильного, следующий для ПК и планшетов.
Scheme
Scheme 24.02.2016 23:0414
0
Что то в ширь не идет картинка, по длине нормально, а так все прописано, но не идет.
frecsarg
frecsarg 24.02.2016 23:0615
0
Не идет, сделано под описание, илмм вы хотите чтоб изображение на его по вверх было, но не знаю, ваше дело, просто оптимально по размерам выставлено.
avatar