ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Широкий вид материалов Файлов для uCoz

Широкий вид материалов Файлов для uCoz

Широкий вид материалов Файлов для uCoz
С виду простой вид материала, который настрой под модуль файлы. Но также он сильно отличается от других своей шириной и отлично отражает изображение материала. Изначально он был с углами, но в стилях исправил это, так как основном сейчас дизайн заточен под 3 или 5 пикселей. Недостаток в нем, что он автоматически не станет в каркас сайта, а нужно его подгонять. Вот на тестовом сайте у меня 800px вышло. Это в самом начале делаться.Но и есть плюсы, так как картинка тоже идет под ваш размер, это где то в середине кода, выставил на всю ширину 800px чтоб понятней было, где что делать. В левом верхнем углу стоит светло темная гамма и в ней прописано кто добавил, все сделано как нужно.

Здесь хорошо видно, как логин и кнопку редактирование.

Вид материала сайта uCoz


Переходим к установке:

С начало ставим код:

Код
<div style="width:800px;float:left;padding:0px 2px;">  
<div class="files_hover">  

<div class="files_top"><div class="files_top_text">  
<a href="$ENTRY_URL$" class="entryLink">$TITLE$</a> <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>  
</div></div>  

<div class="files_content" style="text-align:justify;">  
<div style="padding:5px;">  
<div style="background:#f7f7f7; border:1px solid #ddd;padding:3px 5px; line-height: 15px; border-radius: 5px;">  
<center><div style="padding-bottom:7px;">  
<div class="news-gameName"><a title="$USERNAME$" href="$PROFILE_URL$">Добавил: $USERNAME$</a></div>  
<div class="news-Img"><img alt="$TITLE$" src="$IMG_URL1$" class="news-screen2" width="800" height="210"></div></div></center>  
</div> <br>  
<div style="height:47px;">  
<div style="background:#f7f7f7; border:1px solid #ddd;padding:3px 5px; line-height: 15px; border-radius: 5px;"><?if(len($MESSAGE$)>230)?><?substr($MESSAGE$,0,230)?>...<?else?>$MESSAGE$<?endif?></div>  
</div>  

<div class="info_details">  
<span style="padding:0px 5px;"></span><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/rsan/reads_ico.png" width="16"> $READS$<span style="padding:0px 5px;"></span><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/rsan/comments_ico.png" width="16"> $COMMENTS_NUM$<span style="padding:0px 5px;"></span><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/rsan/loads_ico.png" width="16"> $LOADS$  
</div>  

</div>  
</div>


CSS:

Код
a.entryLink a:link, .entryLink a:active, .entryLink a:visited {color:#777;text-shadow:0 1px 0 #ffffff;text-decoration:none;}  
a.entryLink:hover {text-decoration:none;color:#ae8f25;}  
.files_hover {border: 4px solid #D6CECE;margin:0 0 3px 0;border-radius: 5px;}  
.files_hover:hover {border: 4px solid #BFBFBF;margin:0 0 3px 0;border-radius: 5px;}  
.files_top {background: url('') repeat-x #f7f7f7;border-bottom:0px;height:21px;}  
.files_top_text {padding:3px 5px;font-weight:bold;font-size: 12px;}  
.files_content {background:#fff;padding:0px;overflow:hidden;border-top:0px;color:#777;}  
.info_details {text-align:center;border-top:1px dotted #e2e2e2;}  

.news-gameName {border-radius: 0 4px 4px 0;background: none repeat scroll 0pt 0pt rgba(0, 0, 0, 0.5); display: block; float: left; font: 12px Tahoma; padding: 5px 20px; position: absolute; text-align: left; text-shadow: 0pt 0pt 2px rgb(0, 0, 0); margin-left: 0px; margin-top: 10px;}  
.news-gameName a:link, .news-gameName a:visited {color: #CCCCCC;text-decoration: none;}  
.news-gameName a:hover {color: #FFFFFF;text-decoration: none;}  
.inf_title {background:#eee;height:20px;margin:7px;color:#707070;text-shadow:1px 1px 0 #f6f6f6;font-family:tahoma;font-size:11px;font-weight:bold;text-align:center;}


В стилях вы можете подогнать цветовую гамму, все кнопки находятся в скрипте. Сожно сделать так, убрать их и поставить от стандартного, кому как нравиться.

PS - с этого вида, вы можете выставить на другие модули, как статьи или блог, просто нужно немного подредактировать.

Источник: http://internetempire.ru/
08 Февраля 2016 Просмотров: 1311 Комментариев: (6)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 5
Сопрано
Сопрано 08 Февраля 2016 07:541
+1
Что то такой вид материала, все больше замечаю, а простые, которые раньше ставили, с начало было с увеличением, потом убрали его, чтоб заходили на материал. Теперь вот такой дизайн, возможно под мобильные системы хорошие и так они смотрятся очень прилично и красиво.
tsakonter
tsakonter 08 Февраля 2016 08:012
0
Но он так простой и нет такого, все понятно, и удивительно, что кнопки в самом коде а не в стилях, это безусловно облегчит, если кто хочет изменить функций.
Maryges
Maryges 08 Февраля 2016 08:113
0
Это почему простой, этот соглашусь, нет не чего проще, чем поставить и он автоматически установился на сайт. Здесь, хоть и прост, но нужно и каркас подогнать и само изображение также, или выставить авто, должно помочь, чтоб сам размер выбирал по сайту.
Kosten
Kosten 08 Февраля 2016 08:184
0
Сразу хотел его переделать, и информацию по центру убрать с кнопками, и просто поставить операторы, скопировав с тестового вид материала, но посчитал, возможно кому так нужно, и сами могут сделать. Только углы закруглил, это в самом коже 2 стиля и в css один, что можете убрать или сделать по своему.
Kosten
Kosten 08 Февраля 2016 21:055
0
Вот немного переделан и добавлены стандартные коды от шаблона системного и сразу другой вид в показателях. Просто сам вид материала меняем но и стили за одно, так как там центр убран, и кто то разберется, кому то надо подсказать, так что сразу и стили с ним.



Вид материала, где 800 меняем под свой сайт размер.

Код
<div style="width:800px;float:left;padding:0px 2px;">  
<div class="files_hover">  

<div class="files_top"><div class="files_top_text">  
<a href="$ENTRY_URL$" class="entryLink">$TITLE$</a> <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>  
</div></div>  

<div class="files_content" style="text-align:justify;">  
<div style="padding:5px;">  
<div style="background:#f7f7f7; border:1px solid #ddd;padding:3px 5px; line-height: 15px; border-radius: 5px;">  
<center><div style="padding-bottom:7px;">  
<div class="news-gameName"><a title="$USERNAME$" href="$PROFILE_URL$">Добавил: $USERNAME$</a></div>  
<div class="news-Img"><img alt="$TITLE$" src="$IMG_URL1$" class="news-screen2" width="800" height="210"></div></div></center>  
</div> <br>  
<div style="height:47px;">  
<div style="background:#f7f7f7; border:1px solid #ddd;padding:3px 5px; line-height: 15px; border-radius: 5px;"><?if(len($MESSAGE$)>230)?><?substr($MESSAGE$,0,230)?>...<?else?>$MESSAGE$<?endif?></div>  
</div>  

<div class="info_details">  
<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?>  
</div>  
</div>  
</div>


В CSS

Код
a.entryLink a:link, .entryLink a:active, .entryLink a:visited {color:#777;text-shadow:0 1px 0 #ffffff;text-decoration:none;}  
a.entryLink:hover {text-decoration:none;color:#ae8f25;}  
.files_hover {border: 4px solid #D6CECE;margin:0 0 3px 0;border-radius: 5px;}  
.files_hover:hover {border: 4px solid #BFBFBF;margin:0 0 3px 0;border-radius: 5px;}  
.files_top {background: url('') repeat-x #f7f7f7;border-bottom:0px;height:21px;}  
.files_top_text {padding:3px 5px;font-weight:bold;font-size: 12px;}  
.files_content {background:#fff;padding:0px;overflow:hidden;border-top:0px;color:#777;}  
.info_details {text-align: left;border-top:1px dotted #e2e2e2;}  

.news-gameName {border-radius: 0 4px 4px 0;background: none repeat scroll 0pt 0pt rgba(0, 0, 0, 0.5); display: block; float: left; font: 12px Tahoma; padding: 5px 20px; position: absolute; text-align: left; text-shadow: 0pt 0pt 2px rgb(0, 0, 0); margin-left: 0px; margin-top: 10px;}  
.news-gameName a:link, .news-gameName a:visited {color: #CCCCCC;text-decoration: none;}  
.news-gameName a:hover {color: #FFFFFF;text-decoration: none;}  
.inf_title {background:#eee;height:20px;margin:7px;color:#707070;text-shadow:1px 1px 0 #f6f6f6;font-family:tahoma;font-size:11px;font-weight:bold;text-align:center;}


Этот код вид материала, если в статьи или блок, просто убираем загрузку.
Войдите:
avatar