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

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

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

Но давайте разберем ближе, изначально каркас шел в темном цвете, где был переписан на вид материала в одну колонку, что получилось оригинально. Но там сильно были закругленные углы, и так получилось что нужно на самом фоне их делать и на плашке, где идут шрифтовые иконки и визуально, совершенно по другому смотрелось от этого. Здесь подошел с другой стороны, где только убраны углы у самой формы. И так как он стал меньше, что пришлось убрать кнопку "Далее" так как можно перейти через заголовок или сделать так, что по клику на изображение происходил переход. Но это относится к функциональности, что здесь она стандартная, большее уделено дизайн, чтоб отличался от других.

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

И для этого было произведено тестирование, что ниже показаны снимки.

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

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

Скрипт оригинальный материал файлов сайта

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

HTML

Код

<div class="ogsavneu_kovzepsya">
<div class="roaeroionization_derun">
  <div class="klorunes_mdekisuv">
  <a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"></a>
  </div>
  <div class="vuzealomden_guteazem">
  <h4 class="vedagun_kamsinrulim"><a href="$ENTRY_URL$">$TITLE$</a></h4>
  <div class="zornet_runokasug">
  $MESSAGE$
  </div>
  </div>
  <div class="molpsadtun_gyrabtuv">
  <span class="kaguni_revseklun"><i class="fa fa-user-secret"></i>$USERNAME$</span>
  <span class="vigdelunia_krimocam"><i class="fa fa-comments"></i> $COMMENTS_NUM$</span>
  <span class="vigdelunia_krimocam"><i class="fa fa-pencil"></i> $CATEGORY_NAME$</span>
  <span class="vigdelunia_krimocam"><i class="fa fa-eye"></i>$READS$</span>
  <span class="vigdelunia_krimocam"><i class="fa fa-thumbs-up"></i>$RATING$</span>
  </div>
  </div>
</div>

CSS

Код

.ogsavneu_kovzepsya{
width: 48%;
float: left;
margin: 10px 12px 12px 3px;
}

.roaeroionization_derun{
background: #ebedf1;
margin: 0 0 2px 0;
box-shadow: 0px 0px 8px 1px rgba(70, 67, 67, 0.43);
border: 1px solid #b9b5b5;
border-radius: 5px 5px 5px 5px;
}

.klorunes_mdekisuv{
position:relative;
border-radius: 2px 2px 2px 2px;
}

.klorunes_mdekisuv a{
display:block;
overflow:hidden;
border-radius: 5px 5px 0px 0px;
padding: 1px 1px 1px 1px;
box-shadow: 0px 5px 17px 0px rgba(105, 102, 102, 0.61);
}

.klorunes_mdekisuv a img{
width:100%;
display:block;
height: 253px;
border-radius: 5px 5px 0px 0px;
}

.klorunes_mdekisuv a:hover img{
opacity: 0.9;
}

.vuzealomden_guteazem{
height:auto;
overflow:hidden;
padding: 10px 10px 0px 10px;
margin-bottom: 10px;
}

.vedagun_kamsinrulim a{
color: rgba(24, 81, 138, 0.95);
text-decoration:none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.97);
font-weight: bold;
}

.vedagun_kamsinrulim a:hover{
color:rgba(12, 17, 113, 0.91);
text-decoration:underline;
text-decoration:none;
}

.vedagun_kamsinrulim {
font-size: 19px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(195, 183, 183, 0.98);
padding: 0px 0px 12px 0px;
margin: 7px 0px 7px 0px;
text-decoration:none;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.molpsadtun_gyrabtuv{
background: rgba(4, 17, 37, 0.93);
color: rgba(243, 241, 241, 0.98);
position:relative;
height: 41px;
line-height: 41px;
overflow:hidden;
padding-left: 9px;
box-shadow: 0px 3px 14px 3px rgba(0, 0, 0, 0.43);
border-radius: 19px 19px 19px 19px;
}

.kaguni_revseklun, .vigdelunia_krimocam{
font-size: 11.7px;
color: rgba(228, 255, 255, 0.99);
text-shadow: 0 1px 0 rgba(8, 8, 8, 0.94);
}

.kaguni_revseklun i, .vigdelunia_krimocam i{
font-size:15px;
margin-right:5px;
}

.vigdelunia_krimocam{
padding-left:10px;
}

.zornet_runokasug{
opacity: 0.97;
margin-bottom: 0px;
padding: 0 0px;
height: 67px;
overflow: hidden;
text-align: justify;
color: rgba(68, 65, 65, 0.98);
}

@media screen and (max-width: 1220px){
.ogsavneu_kovzepsya{
background: rgba(247, 244, 244, 0.98);
width: 100%;
height: auto;
padding: 0px;
}
}

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

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

03 Декабря 2017 Просмотров: 1790 Комментариев: (9)

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

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

Kosten

Похожие материалы

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

Комментарии: 9
Порядок вывода комментариев: First-1 04 Декабря 2017 17:56¹ 0 Kosten, глянь внимательно на стили, и подправь Kosten 04 Декабря 2017 18:36² 0 First, где именно, плиз, скинь в ЛС исправленную версию. First-1 04 Декабря 2017 18:49³ 0 Я не знаю изначальную, но глянь вот эту часть кода: Код .vedagun_kamsinrulim{ font-size: 19px; margin-bottom: 10px; border-bottom: 1px solid rgba(187, 187, 187, 0.98); padding: 0px 0px 12px 0px; margin: 0px 0px 7px 0px; a{ color: rgba(19, 81, 123, 0.89); text-decoration:none; } font-size: 17px; font-family: sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Как видно здесь нормально начинается класс, открывается скоба и пошли стили, но в этих стилях опять же открывается "a" класс, а после него пошли стили уже без первой скобы, и закрываются... Больше похоже на то, что внутрь стилей, прописанных к классу, всунули ещё и "a". И так к двум материалам.... Kosten 04 Декабря 2017 18:57⁴ 0 На тестовом сейчас установлен этот вид, что можно посмотреть. Сайт: pluton.clan.su Kosten 04 Декабря 2017 19:02⁵ 0 Все нормально было, прогнал через генератор стилей, вот такой калабур, здесь же если убрать, то функция многоточие пропадет. Kosten 04 Декабря 2017 19:07⁶ 0 Если, только так заменить, и по ходу изначально так было. Код .vedagun_kamsinrulim a { font-size: 19px; margin-bottom: 10px; border-bottom: 1px solid rgba(187, 187, 187, 0.98); padding: 0px 0px 12px 0px; margin: 0px 0px 7px 0px; color: rgba(19, 81, 123, 0.89); text-decoration:none; font-size: 17px; font-family: sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } First-1 04 Декабря 2017 19:11⁷ 0 Вот и мне кажется, что так правильнее будет. В общем может я не прав и не знаю, но так как там похоже на мусор Kosten 04 Декабря 2017 19:18⁸ 0 Сейчас просмотрю, так как некоторые элементы убирал, как кнопку далее, может от нее хвосты остались. Kosten 04 Декабря 2017 19:32⁹ 0 Стили исправил и лишнее убрал, немного изменил название, но здесь веб мастер сам может под шрифт поставить или сделать знаки меньше, все проверил на адаптивность, где корректно показывает.