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

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

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

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

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

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

1

HTML

Код

<div class="direktor_rasporyaditel">
  <div class="poryadkovye_nomera">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>
  <div class="optimizirovana_tekst-text">
  <div class="optimizirovana_tekst">
  <img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$">
  </div>
  </div>
  <div class="informatsiozarn_blok">
<div class="maksimalna_stepeni"> <span class="rastanovka_karkasa"><i class="fa fa-user-circle-o"></i></span><span class="pokazateli_simvolov"><a href="$PROFILE_URL$">$USERNAME$</a></span></div>
  <div class="maksimalna_stepeni"> <span class="rastanovka_karkasa"><i class="fa fa-folder-open"></i></span><span class="pokazateli_simvolov"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span></div>
<div class="maksimalna_stepeni"> <span class="rastanovka_karkasa"><i class="fa fa-clone"></i></span><span class="pokazateli_simvolov">$DATE$</span></div>
  <div class="maksimalna_stepeni"> <span class="rastanovka_karkasa"><i class="fa fa-eye"></i></span><span class="pokazateli_simvolov">$READS$</span></div>
  <div class="maksimalna_stepeni"> <span class="rastanovka_karkasa"><i class="fa fa-comments-o"></i></span><span class="pokazateli_simvolov"><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></span></div>
  <div class="maksimalna_stepeni"> <span class="zornet_ru"><i class="fa fa-thumbs-o-up"></i> $RATING$</span></div>
  <div class="maksimalna_stepeni"> <span class="semintikar_hsentura"><a href="$ENTRY_URL$">Читать далее</a></span></div>
  </div>
</div>

CSS

Код

.direktor_rasporyaditel{
background-color: #1a1c1d;
border: solid 1px #5a5656;
padding: 10px;
margin-bottom: 15px;
box-shadow: 0px 0px 12px 1px rgba(121, 115, 115, 0.47), 0px 0px 3px 1px rgba(74, 71, 71, 0.8);
border-radius: 7px 7px 3px 3px;
}

.poryadkovye_nomera{
border-bottom: solid #393d40 1px;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
}

.poryadkovye_nomera a{
color: #fff;
font-size: 21px;
display: block;
font-weight: bold;
font-family: Geneva;
white-space: nowrap;
overflow: hidden;
padding: 0px;
text-overflow: ellipsis;
}

.poryadkovye_nomera a:hover{
color: #a0c0ec;
text-decoration: none;
}

.poryadkovye_nomera span{
font-size: 12px;
margin-top: 5px;
display: block;
}

.poryadkovye_nomera span a{
display: inline-block;
font-weight: normal;
font-size: 12px;
}

.optimizirovana_tekst-text{
width: 100%;
min-height: 110px;
}

.optimizirovana_tekst{
width: 100%;
height: 151px;
padding: 1px;
margin: 0 10px 10px 0;
background-color: #45484a;
border-radius: 3px 3px 3px 3px;
}

.optimizirovana_tekst img{
width: 100%;
height: 151px;
object-fit: cover;
}

.informatsiozarn_blok{
padding: 5px;
margin: 10px -7px 0px 0px;
}

.informatsiozarn_blok a{
color: #eff1f3;
}

.maksimalna_stepeni{
display: inline-block;
font-size: 13px;
color: #e8e4e4;
margin: 0px 10px 0px 0px;
}

.maksimalna_stepeni:last-child{
display: table;
float: right;
margin: -4px 0 0 0;
}

.rastanovka_karkasa{
margin-right: 5px;
}

.pokazateli_simvolov{
}

.semintikar_hsentura a{
display: block;
background-color: #2e558e;
color: #fff;
padding: 5px 5px;
border-radius: 3px;
border: 1px solid #808186;
}

.semintikar_hsentura a:hover{
background-color: #1b427b;
text-decoration: none;
}

.zornet_ru{
padding: 1px;
padding-left: 7px;
padding-right: 7px;
border-radius: 5px;
background: #092131;
border: 1px solid #47484a;
}

@media only screen and (max-width: 640px){
.optimizirovana_tekst, .informatsiozarn_blok{
float: none!important;
width: 100%!important;
}

.informatsiozarn_blok{
margin: 10px 10px 19px -3px;
}
}

@media screen and (max-width: 640px){
.maksimalna_stepeni{
display: none;
width: 100%;
text-align: center;
border: 1px solid #999ea7;
border-radius: 3px;
}
}

@media screen and (max-width: 640px){
.semintikar_hsentura a{
background-color: #175f11;
text-decoration: none;
}
}

На этом весь установочный процесс производительности.

01 Декабря 2017 Просмотров: 1398 Комментариев: (5)

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

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

Kosten

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

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

Комментарии: 5
Порядок вывода комментариев: -SAM- 02 Декабря 2017 18:31¹ 0 Чтобы строка заглавия не была кликабельной по всей длине, то вот так прописываем: Код .poryadkovye_nomera{ border-bottom: solid #393d40 1px; padding: 0 0 10px 0; margin: 0 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poryadkovye_nomera a{ color: #fff; font-size: 21px; font-weight: bold; font-family: Geneva; padding: 0px; } Kosten 02 Декабря 2017 18:54² 0 Можно и так сделать, что основном стили прописывал, и красивее, но и стилей более, но можно под класс, что отвечает за заглавие прописать многоточие. Код white-space: nowrap; /* Отменяем перенос текста / overflow: hidden; / Обрезаем содержимое / padding: 5px; / Поля / text-overflow: ellipsis; / Многоточие */ Kosten 02 Декабря 2017 18:55³ 0 Хотя здесь за другое, просто это по обрезке большого название имел виду. -SAM- 02 Декабря 2017 20:49⁴ 0 Конечно под другое, вы просто эти стили присваиваете анкору, когда нужно присваивать блоку, в котором анкор находиться... делаете анкор блочным, что после заглавия с ссылкой становятся кликательными на всю строку (даже, если заглавие короткое)... написал, так как не считаю это всё нужным (такой эффект больше для меню подходит, что анкор внешне идёт с обводкой и задним фоном, здесь же - просто текст заглавия, на который нужно нажать). Kosten 02 Декабря 2017 23:08⁵ +1 Если не ошибаюсь, вы мне скидывали , что исправить, но все не магу найти, так как только в последнее время на письма отвечаю. Есть функция, на время, чтоб от некоторых групп получать, много пишут, и 99% не по теме.