» »

Адаптивный вид материала 3 колонки для uCoz

Адаптивный вид материала 3 колонки для uCoz

Этот светлый вид материала выполнен в 3 колонки, что имеет адаптивность под мобильные аппараты, что можно поставить на модуль файлы. Плюс в нем, что он визуально понятен и имеет изображение с красивым эффектом, что будет появляться при наведение курсора. Ниже идет название вашей статьи или файла, где подкрепляется кратким сообщением. И все это можно выставить по длине в CSS, что идет с ним. По краткому, то в самом коде установлен оператор и там вы только можете поставить в ручную, сколько выводить знаков. Здесь подключены шрифтовые иконки, которые красиво вписались под функций, такие как дата, когда был размещен материал на сайте и выводит количество комментарий.

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

Давайте посмотрим как он адаптирован под разные размеры монитора, включая мобильные аппарата, как смарфон и другие.

Это будет иди по умолчанию на сайте, это хоть конструктор фиксирован или нет.

Красивый вид материала в три колонки для сайта

Здесь примерно вид будет как на планшете, просто все проверял на браузере.

Вид материала файлов uCoz адаптивный

Так визуально смотреться будет на смартфоне или на том же планшете с узким экраном.

Настройка адаптивности на вид материала сайта

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

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

Первым делом подключим шрифтовые иконки, то без них не чего не появится, в плане дизайн даты и комментариев, что в самом низу прописаны.

Если у вас они уже установлены, то не нужно не чего ставить, если нет, то вверх сайта в шапку идем и в самый его потолок ставим стили.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Теперь нам нужно на каталог файлов или новостей, также блог поставить основной код.

Код
<div class="col-lg-4 col-sm-6 col-xs-12">
  <div class="shortstory">
  <div class="shortstory-images">
  <a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"></a>  
  </a>  
  </div>  
  <div class="shortstory-content">
  <h4 class="shortstory-link"><a href="$ENTRY_URL$"><?if(len($TITLE$)>40)?><?substr($TITLE$,0,37)?>...<?else?>$TITLE$<?endif?></a></h4>
  <p><?if(len($MESSAGE$)>85)?><?substr($MESSAGE$,0,82)?>...<?else?>$MESSAGE$<?endif?></p>
  </div>  
  <div class="shortstory-bottom">
  <span class="shortstory-date"><i class="fa fa-calendar"></i> $DATE$</span>
  <span class="shortstory-comments"><i class="fa fa-comment-o"></i> $COMMENTS_NUM$</span>  
  <a href="$ENTRY_URL$" class="shortstory-more">Читать далее</a>
  </div>
  </div>
</div>


И в CSS:

Код
.shortstory{background:#fbfbfb;margin:0 0 20px 0;box-shadow:0px 2px 5px rgba(0,0,0,0.2);}  
.shortstory-images{position:relative;}  
.shortstory-images a{display:block;overflow:hidden;}  
.shortstory-images a img{height:auto;width:100%;display:block;}  
.shortstory-images a:hover img{opacity:0.8}  
.shortstory-content{height:auto;overflow:hidden;padding:20px 20px 0 20px;margin-bottom:20px;}  
.shortstory-link{font-size:18px;margin-bottom:20px;}  
@media (min-width:768px){.shortstory-images a img{height:220px;}  
.shortstory-content{height:150px;}  
}  
@media (min-width:992px){.shortstory-images a img{height:220px;}  
.shortstory-content{height:150px;}  
}  
@media (min-width:1200px){.shortstory-images a img{height:180px;}  
.shortstory-content{height:150px;}  
}  
.shortstory-bottom{background: #447b7d;color:#fff;position:relative;height:38px;line-height:38px;overflow:hidden;padding-left:20px;}  
.shortstory-date, .shortstory-comments{font-size:11px;}  
.shortstory-date i, .shortstory-comments i{font-size:14px;margin-right:5px;}  
.shortstory-comments{padding-left:10px;}  
.shortstory-bottom .shortstory-more{background:#3ba8ac;color:#fff;position:absolute;right:0;width:110px;display:inline-block;font-size:12px;text-align:center;text-shadow:1px 1px 1px rgba(255,255,255,0.2);}  
.shortstory-bottom .shortstory-more:hover{background: #2c9ca0;color:#fff;}  
.col-lg-4, .col-sm-6,  
.col-xs-12  
.col-vs-12{position:relative;min-height:1px;padding-left:10px;padding-right:10px;}  
.col-xs-12{float:left;}  
.col-xs-12{width:100%;}  
@media (min-width:768px){ .col-sm-6,  
.col-sm-6{width:45%;}}  
@media (min-width:1200px){.col-lg-4,  
.col-lg-4{width:30.33333333%;}}

Как можно заметить, что этот вид полностью создан на стилях и нет на нем не одной ссылки, потому он корректно будет отображаться на разных видах по размеру экрана.
07.08.2017 Просмотров: 626 Комментарий: (12)

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

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

Комментарий: 12
Kosten
Kosten 07.08.2017 15:471
0
Прекрасный вид материала, что проверил его, и настраивается под свой сайт отлично, все есть для понимание, что за файл или статья. Но безусловно, для кого как, для меня адаптивность на первом месте, что отлично показал себя. И на любом размере все показывает корректно и не чего лишнего нет на нем,все что нужно поставлено.

Не стал закруглять, как ранее делал, если кому нужно, то находите элемент дизайн и под него стили и там прописываете стиль border-radius: 3px; что на 3 пикселя закругление будет, если больше, то и закругление увеличиться.
Dagada
Dagada 07.08.2017 15:582
0
.col-vs-12 лишний я что то не заметил 11a



Код
.col-xs-12,.col-lg-4, .col-sm-6 {position:relative;min-height:1px;padding-left:10px;padding-right:10px;}
Kosten
Kosten 07.08.2017 16:154
0
По сути не мешает, так как стили не закреплены под него, но кому нужно, можете убрать.
Kosten
Kosten 11.08.2017 00:0810
0
Dagada, нет это не лишние думаю стили, так как их убираю, весь вид слетает, это говорю про 2 колонки если делать.
Dagada
Dagada 07.08.2017 16:063
0
Вид материалов вытащил вот отсюда http://zornet.ru/load/svetlyj_shablon_varezbook_na_ucoz/142-1-0-7205 .Спасибо : nk-cs.ru
Kosten
Kosten 07.08.2017 16:165
0
Dagada, от души, что главное, ты его адаптировал, что сейчас только такие лучше устанавливать.
Dagada
Dagada 07.08.2017 16:216
0
Он адаптивный...Я только вытащил css из этого шаблона
Kosten
Kosten 07.08.2017 16:237
0
Но все же, надо грамотно вытащить, и без всяких хвостов.
Kosten
Kosten 07.08.2017 18:588
0
Чтоб в личные сообщение не писали, то вот как закруглить изображение или картинку, кому как, но здесь нужно найти стиль который за нее отвечает, а отвечает этот.

Код
.shortstory-images a{display:block;overflow:hidden;}


И в самый конец стиля ставим border-radius: 5px; - что на 5 пикселей закругляем, что получиться так.

Код
.shortstory-images a{display:block;overflow:hidden;border-radius: 5px;}


И вот видим, как реально на вид материалов получилось. Так и другие элементы, стиль на них находим и добавляем.

Kosten
Kosten 10.08.2017 22:459
0
Если вам нужно сделать на 2 колонки, то в стилях нужно немного поправить проценты, так как у каждого своя фиксация, то все делается в ручную. Это самый низ стилей заменить, те убрать эти поставить.

Код
@media (min-width:768px){ .col-sm-6,  
.col-sm-6{width:46.8%;}}  
@media (min-width:1200px){.col-lg-4,  
.col-lg-4{width:47.7%;}}


Ширина на 2 колонки редактируется здесь.

Код
.col-lg-4{width:47.7%;}}


И вот что получилось.

avatar
Lexarus64 08.10.2017 17:5411
0
Как сделать в 3 колонки? Ну никак не получается(
Kosten
Kosten 08.10.2017 18:0012
0
В самом низу стиля найдите.

col-lg-4{width:30.33333333%;}}

И примерно поставите

.col-lg-4{width:32%;}}

или больше или меньше.
avatar