» »

Вид материала файлов для 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.11.2015 Просмотров: 695 Комментарий: (8)

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

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

Комментарий: 8
AnTron
AnTron 10.11.2015 04:391
0
Здесь понятно, почему он будет отлично отображаться для мобильного устройства, так как это стандартный вид и в него грамотно добавлен скрин.
Brung
Brung 11.11.2015 06:334
0
Но а что, сейчас так многие делают и не просто под мобильные устройства а свой такой неповторимый стиль.
Kosten
Kosten 11.11.2015 06:365
0
Что такое, какое то новое видение в дизайне что ли. Просто это уже не ново, и давно такой вид устанавливают. Надоело ведать стандартные виды ставить, которые похоже друг на друга, а здесь реально что то новое.
Brung
Brung 10.11.2015 04:432
0
Kosten, забыл закруглить углы, ты же на всех завинчиваешь, как то этот пропустил.
Kosten
Kosten 10.11.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.11.2015 06:386
0
Здесь вы можете поставить рейтинг свой, есть же от самой системы пальцы вверх, только не помню под каким номером и заменить на эту ссылку 12','/.s/t/1221/12.png','0','float и сразу будет другой вид.
AnTron
AnTron 11.11.2015 06:417
+1
Это просто стандарт как не крути и вы можете его принять как есть или если что то знаете все ваших руках и можете сделать, здесь уж не создать, так как создано, а сделать что то свое под свои стили оригинальные, которые вписались в дизайн красиво. Это может быть как тени, хотя много весям. Главное картинка и при наведение можно сделать, чтоб также краткое описание на темном фоне появлялось.
Kosten
Kosten 11.11.2015 06:488
0
А можно просто в него не вмешиваться и не захламлять всяких плюшек. Да он прост, но вы его не ставили и не видели как он вообще на сайте визуально смотрится. Так как проверял на работу его, скажу что нормально, а что добавить. Можно кнопку далее поставить или краткое описание поставить в корпус обвода, и также сразу измениться, тут главное краткое описание и оригинальный размер изображение в нем.
avatar