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

Темный вид материалов в 2 колонки для uCoz

Стильный вид материала в темном цвете и идет в 2 колонки, что полностью адаптивный под разный размер монитора и мобильных аппаратов. Здесь будет иди код и стили на его, но больше разберем как можно его настроить под свой сайт. Так как у всех он разный. Есть темно зеленый или синий, всегда существует в дизайн шаблона, где еще один оттенок, но основном идет на блоки в контейнере. Что на главной страницы должно быть все красиво и грамотно по цветовой гамме разложено.

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

Рассмотрим стиль, где идет описание, на его отвечает этот стиль. Что меняем цвет background: #585858; здесь, где будут знаки.

Код

.shortstory {
  background: #585858;
  margin: 0 0 20px 0;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

Так он будет смотреться при скопированные данные и установке на сайт.

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

Теперь стиль, где будут стоять шрифтовые иконки. Находим кусок стиля и в нем будет background: #123b48; что цвет здесь выставляем.

Код

.shortstory-bottom {
  background: #123b48;
  color: #fff;
  position: relative;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding-left: 20px;
}

Осталась кнопка, что как видим нужно ее также выставить под свой ресурс. Здесь будет выводить стиль ниже, что в ответе за его, но регулируем оттенок на этот background: #2a8429;месте, что любой цвет можно поставить. Но здесь на ней идет эффект при наведение, что не забываем.

Код

.shortstory-bottom .shortstory-more {
  background: #2a8429;
  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);
}

Мобильная настройка на вид материала для сайта

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

Код

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

15 Августа 2017 Загрузок: 7 Просмотров: 1449 Комментариев: (6)

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

СКАЧАТЬ

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

Kosten

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

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

Комментарии: 6
Порядок вывода комментариев: Critic© 15 Августа 2017 18:42¹ 0 Все это можно было на светлом вид материале на писать. Но с другой стороны, чтоб не путались статью отдельно будет лучше сделать. Kosten 15 Августа 2017 18:52² 0 Так не понял, это нормально или все таки нужно было эту тему за пилить на материале. Здесь просто темный все же дизайн и показано какие стили отвечают за ту или иную функцию в формирование самого вида и его смены цвета. Critic© 15 Августа 2017 18:59³ 0 Не о том, здесь под темный дизайн намного красивее идет, что этот же вид материала ставить на светлый. Что где менять это полезно знать и нужно, все с этого начинают, что сейчас вообще не захожу в CSS и все меняю и смотрю как выглядеть и когда добиваюсь своего, просто копирую и заменяю. Kosten 15 Августа 2017 20:44⁴ 0 Но это все можно сделать через браузер, что даже не нужно чистить КЭШ, что при обновленном браузере иногда нужно делать. По темному и светлому все описано, здесь чисто предпочтение веб мастера. Что кино сайт считаю на темном дизайн как то правильно, чем на светлом. Но этот вид материала на кино онлайн не подойдет, а вот на остальные отлично впишется, это что софт или игровой. Где то можно его самому доработать, как такое обвод на картинку и многое другое. Только в стили не нужно лести, что за адаптивность в ответе, чтоб не нарушить баланс адаптивности под мобильные аппараты, а так самому виднее кто поставит. Kosten 15 Августа 2017 20:51⁵ 0 Вообще при установки стилей новых, это может быть под любой дизайн, то здесь вывести специальный файл под это, чтоб в CSS не прописывать а на этом файле. Как можно сделать, все описано в статье, что у самого места не было и пришлось искать выход как сделать. TheSanya 17 Августа 2017 11:08⁶ 0 То что надо!