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

Вид материала файлов для uCoz широкий фон

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

Установка:

Ваш модуль, как сказано, можно выбрать файлы, новости , блог или статьи и в админ панели заменить на этот код вид материала, а старый полностью убрать и этот поставить.

Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">  
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>  
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>  
  <a href="$ENTRY_URL$"><div class="news-small-ph"><a href="$IMG_URL1$" class="ulightbox" target="_blank"><img src="$IMG_URL1$"></div></a>  
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?><div class="eDetails" style="clear:both;">  
<?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/t/1221/12.png','0','float')?></div><?endif?>  
<?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?>  
</div></td></tr></table>


Теперь нужно прописать стиль в CSS:

Код
.news-small-ph{  
width: 100%;  
height: 300px;  
overflow: hidden;  
position: relative;  
}  
.news-small-ph img{  
width: 100%;  
min-height: 100%;  
}


Это было проверено как на мобильном будет.

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

Но также есть рейтинг, который только можно клик сделать в самом материале и краткое описание на материал. Вообщем такой вид уже не новинка, и все больше его можно заметить на всяких ресурсов и различной тематикой, на белом фоне.
10 Ноября 2015 Просмотров: 2229 Комментариев: (8)

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

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

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

Комментарии: 8
AnTron
AnTron 10 Ноября 2015 04:391
0
Здесь понятно, почему он будет отлично отображаться для мобильного устройства, так как это стандартный вид и в него грамотно добавлен скрин.
Kolinkor
Kolinkor 11 Ноября 2015 06:334
0
Но а что, сейчас так многие делают и не просто под мобильные устройства а свой такой неповторимый стиль.
Kosten
Kosten 11 Ноября 2015 06:365
0
Что такое, какое то новое видение в дизайне что ли. Просто это уже не ново, и давно такой вид устанавливают. Надоело ведать стандартные виды ставить, которые похоже друг на друга, а здесь реально что то новое.
Kolinkor
Kolinkor 10 Ноября 2015 04:432
0
Kosten, забыл закруглить углы, ты же на всех завинчиваешь, как то этот пропустил.
Kosten
Kosten 10 Ноября 2015 04:543
0
Но как то оригиналом хотелось поставить, а если честно, забыл. Хотя стандартный вид и кто то шикарно вывел его совершенно в другую конструкцию, источника не было, кто так замутил красиво.

Теперь о закругление углов, тут придется ставить 2 border-radius, хотя можно было один прописать на 4 угла, но это не ошибка и так работает. Вообщем, чтоб у вас было как на этом изображение, а здесь как уже видно нет углов, ставим этот стиль.



В CSS:

Код
.news-small-ph{  
width: 100%;  
height: 300px;  
overflow: hidden;  
position: relative;
border-radius: 5px;  
}  
.news-small-ph img{  
width: 100%;  
min-height: 100%;  
border-radius: 5px;  
}


Там выставлено на 5, чем меньше, то угол острее, чем больше цифра, тем закругление больше.
Kosten
Kosten 11 Ноября 2015 06:386
0
Здесь вы можете поставить рейтинг свой, есть же от самой системы пальцы вверх, только не помню под каким номером и заменить на эту ссылку 12','/.s/t/1221/12.png','0','float и сразу будет другой вид.
AnTron
AnTron 11 Ноября 2015 06:417
+1
Это просто стандарт как не крути и вы можете его принять как есть или если что то знаете все ваших руках и можете сделать, здесь уж не создать, так как создано, а сделать что то свое под свои стили оригинальные, которые вписались в дизайн красиво. Это может быть как тени, хотя много весям. Главное картинка и при наведение можно сделать, чтоб также краткое описание на темном фоне появлялось.
Kosten
Kosten 11 Ноября 2015 06:488
0
А можно просто в него не вмешиваться и не захламлять всяких плюшек. Да он прост, но вы его не ставили и не видели как он вообще на сайте визуально смотрится. Так как проверял на работу его, скажу что нормально, а что добавить. Можно кнопку далее поставить или краткое описание поставить в корпус обвода, и также сразу измениться, тут главное краткое описание и оригинальный размер изображение в нем.
avatar