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

Адаптивный дизайн в 2 колонки для сайта

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

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

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

Адаптивный вид материала на CSS для сайта

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

Создание вид материалов при помощи CSS3 + HTML

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

Мобильный вид на вывод информации для сайта в CSS

Теперь сама установка:

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

HTML

Код
<div class="kaneias-vudsa">  
  <div class="vid-materiala"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a> <div class="kategorua"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> </div>
<div class="dusanika_adekusen"><a href="$ENTRY_URL$">$TITLE$</a></div>  
  <div class="kusana_kusen">$MESSAGE$</div>  
<div class="eDetails"><div class="dakuteblom"> <span><i class="fa fa-eye"></i> $READS$</span> <span><i class="fa fa-comments"></i> $COMMENTS_NUM$</span> </div></div>  
<div class="kapenun-material"><a href="$ENTRY_URL$">Читать далее</a></div>  
</div>

CSS

Код
.kaneias-vudsa {
  margin-bottom: 30px;
  border-bottom: solid 2px #10639a;
  display: inline-block;
  background-color: #fdfafa;
  width: 49%;
  float: left;
  margin: 10px 3px 0px 3px;
}  

.vid-materiala img {
  width: 99%;
  height: 227px;
  border: 2px solid #fff9f9;
  border-radius: 7px 7px 1px 1px;
  /* box-shadow: 0px -1px 6px 0px rgba(72, 67, 67, 0.57); */
  box-shadow: 0px -1px 3px 1px #888888b3;
}

.vid-materiala img:hover{  
opacity:0.9;  
}  

.dusanika_adekusen{  
padding: 10px 12px 0 5px;  
white-space: nowrap;  
overflow: hidden;  
text-overflow: ellipsis;  
}  

.dusanika_adekusen a{  
color: #1c71a2;  
font-size: 15px;  
padding: 0;  
font-weight: bold;  
}  

.dusanika_adekusen a:hover{  
color: #582f0c;  
}  

.kusana_kusen{  
text-align: justify;  
padding: 5px;  
max-height: 61px;  
overflow: hidden;  
}  

.kapenun-material {
  border-radius: 3px 0 0 0;
  float: right;
  margin-top: -30px;
  background-color: #167bbf;
  padding: 7px 10px;
}

.kapenun-material:hover{  
background-color: #16941a;  
}  

.kapenun-material a{  
color: #fdf7f7;  
font-weight: 700;  
font-size: 13px;  
}  

.kapenun-material a:hover{  
color: #f9f4f4;  
}  

.dakuteblom a{  
color: #555658;  
}  

.dakuteblom{  
font-size: 12px;  
padding-left: 5px;  
padding-top: 0px;  
font-family: Tahoma, Geneva, sans-serif;  
}  

.dakuteblom span{  
margin-right: 17px;  
font-weight: bold;  
text-shadow: 0 1px 0 rgba(253, 247, 247, 0.99);  
color: #4f5052;  
}  

.kategorua a{
background: rgba(33, 136, 44, 0.82);
color: #f1ebeb;
display: block;
font-size: 12px;
height: 6px;
line-height: 5px;
margin: -41px 0px 0px 2px;
padding: 15px;
position: absolute;
width: auto;
border-radius: 0px 3px 0px 0px;
}

.kategorua a:hover{
text-decoration:none;
background: rgba(13, 105, 17, 0.89);
}

@media screen and (max-width: 1124px){  
.kaneias-vudsa{  
width: 48%;  
margin: 1%;  
}  

}  

@media screen and (max-width: 860px){  
.kaneias-vudsa{  
width: 96%;  
margin: 2%;  
}  
}  

@media only screen and (max-width:460px){  
.dakuteblom{  
display: none;  
}  
}  

@media only screen and (max-width: 460px){  
.ranikas_terbla_mkusen a{  
color: #307AA5;  
font-size: 15px;  
}  
}  

@media only screen and (max-width: 680px){  
.kusana_kusen{  
margin: 0px 0px 17px 0px;  
}  
}  

@media only screen and (max-width: 460px){  
.ranikas_terbla_mkusen a{  
color: #1e6994;  
font-size: 13px;  
}  
}

Вот и все, что теперь можете кардинально изменить на сайте стилистику, хоть и для светлого сайта идет этот вид в 2 колонки. Но не забываем, что в CSS можно изменить гамму цвета и поставить вам нужную, что соответствует основному дизайн сайта.
24 Ноября 2019 Просмотров: 2555 Комментариев: (4)
Поделиться в социальных сетях

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

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

Комментарии: 4
-SAM-
-SAM- 24 Ноября 2019 08:051
+1
В своё время задавали вопрос стоит ли ставить на "Каталог файлов" его - на ZorNet просто тот вид, что есть - более подходит для чтения (разбивка на колонки - потом "глаза разбегаются"). И по сути публиковалось не раз, только варьируются слегка, как пример, вот (такой вид давно стоит в модуле "Новости" на ZorNet - считай как демо посмотреть; там еще есть ссылка в материале, что пользователям будет из чего выбрать).
UPD.: можно также использовать переключатель вида материалов, чтобы сделать в виде плитки или в виде списка.
Kosten
Kosten 25 Ноября 2019 19:462
0
По чему то так кажется, что пользователи в таком материале не нуждаются, как это было ранее. Что не новый стиль дизайна, жди рап на его, да, что там, шаблонами воротили, тп от того, от этого, вот где жара было, сейчас болото, это про конструктор.
trem200
trem200 01 Января 2020 21:013
0
Как вижу новых каких либо видом материалов, и скриптов нет. Народ весь уже бежит с ucoz.
-SAM-
-SAM- 02 Января 2020 08:054
+1
Новых скриптов конкретно под систему давно нет (те сайты, которые такие скрипты писали - заброшены владельцами, что выросли - некогда и нет уже им до этого всего дела). На ZorNet тоже давно упор сделан на разные решения для вебмастера (выкладывается то, что не только на uCoz ориентировано, а и на других платформах можно подключать и использовать - html-js, всякие меню и прочее). И шаблоны новые под систему не публикуются - этого и ранее было немного, что в основном рипы (оригинальных шаблонов не было ведь по большому счёту)... идут шаблоны, что адаптированы под uCoz с других платформ.

Войдите:
avatar