Вид материала файлов для 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%; } Это было проверено как на мобильном будет.  Но также есть рейтинг, который только можно клик сделать в самом материале и краткое описание на материал. Вообщем такой вид уже не новинка, и все больше его можно заметить на всяких ресурсов и различной тематикой, на белом фоне. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 8 | |
|
Но как то оригиналом хотелось поставить, а если честно, забыл. Хотя стандартный вид и кто то шикарно вывел его совершенно в другую конструкцию, источника не было, кто так замутил красиво.
Теперь о закругление углов, тут придется ставить 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, чем меньше, то угол острее, чем больше цифра, тем закругление больше. | |
