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

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

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

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

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

HTML

Код

<div class="avuperevoz_perekluchaeum">
<div class="kaldenokeremukys clr">
<div class="kaltemeruy-osmiduck">
<a href="$ENTRY_URL$" class="dkimadetun">$TITLE$</a>
</div>
<div class="tumodermub" style="background:url($IMG_URL1$) no-repeat;background-size: cover;">
  <a href="$ENTRY_URL$"><div class="brydergikab">
  <span class="akitudalomev"><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/search.png"></span>
  </div></a>
</div>
<div class="zornet_ru_binat">
<span><a href="$CATEGORY_URL$"><i class="fa fa-folder-open"></i> $CATEGORY_NAME$</a></span>
<span><i class="fa fa-eye"></i> $READS$</span>
<span><a href="$COMMENTS_URL$"><i class="fa fa-comments-o"></i> $COMMENTS_NUM$</a></span>
<span><i class="fa fa-thumbs-o-up"></i> $RATING$</span></div>
<div class="kaldenokeremukys-img-text">
<div class="kaldenokeremukys-text">
$MESSAGE$
</div>
</div>
</div>

CSS

Код

.avuperevoz_perekluchaeum{
width: 48.5%;
float:left;
margin: 3px 10px 3px 0px;
}

.kaldenokeremukys {
  padding: 7px;
  margin-bottom: 17px;
  background: #242527;
  border-radius: 5px 5px 3px 3px;
  box-shadow: 0px 0px 0px 1px rgba(127, 121, 121, 0.42), 0px 0px 3px 1px rgba(82, 79, 79, 0.86);
}

.kaltemeruy-osmiduck {
  padding: 0 0 12px 0;
}

.kaltemeruy-osmiduck a {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.25;
  color: #FFFFFF;
}

.zornet_ru_binat {
  padding: 3px 3px 7px 7px;
  border-bottom: 1px solid #414344;
}

.zornet_ru_binat span {
  letter-spacing: .1em;
  font-size: 14px;
  display: inline-block;
  padding-right: 5px;
  margin-right: 7px;
  color: #d1f4ff;
}

.zornet_ru_binat > span:last-child {
  float:right;
  background-color: rgba(0, 0, 0, 0.76);
  margin: -5px 5px 0 0;
  padding: 3px 15px;
  border-radius: 30px;
  border: 1px solid rgba(63, 63, 64, 0.89);
}

.zornet_ru_binat span a {
  letter-spacing: .1em;
  font-size: 14px;
  display: inline-block;
  color: #d1f4ff;
}

.kaldenokeremukys-text {
  text-align: justify;
  height: 78px;
  overflow: hidden;
  line-height: 135%;
  font-size: 14px;
  color: #c9cece;
  padding: 3px 0px 0px 5px;
}

.dkimadetun {
  white-space: nowrap;
  overflow: hidden;
  padding: 3px;
  background: #242527;
  position: relative;
  margin: 0px 0px 0px 3px;
  }
  .dkimadetun::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 70px;
  height: 100%;
  background: linear-gradient(to right, rgba(36, 37, 39, 0.29), rgb(36, 37, 39) 100%);
}

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

@media only screen and (max-width: 1224px){
.avuperevoz_perekluchaeum {width: 100%;
}
}

.tumodermub {
  border: 1px solid #4e4b4b;
  padding:5px;
  height: 131px;
  width: 100%;
  border-radius: 5px;
  margin: 0px 0px 9px 0px;
}
.brydergikab {
  background: rgba(0, 0, 0, 0.59);
  text-align:center;
  opacity: 0;
  width:100%;
  height:100%;
  transition: all 0.3s cubic-bezier(0.42, 0, 0.24, 0.98);
  border-radius: 5px;
}
.tumodermub:hover {
  border:1px solid #555;
  border-radius:5px;
}
.tumodermub:hover .brydergikab {
  opacity: 1;
}
.akitudalomev {
  position:relative;
  top: 50px;
}

Вторая вариация:

Где картинку через стили выводим, где в коде заменяем вывод изображение, от div до /div где остальное не трогаем.

Код

<a href="$ENTRY_URL$" class="tumodermub" style="background-image:url(<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>);"><span class="brydergikab"></span></a>

После в стилях от класса tumodermub в самом почти конце, нужно заменить на эти.

Код

.tumodermub {
  border: 1px solid #4e4b4b;
  padding: 5px;
  height: 131px;
  width: 100%;
  border-radius: 5px;
  margin: 0px 0px 9px 0px;
  transition: all 0.3s cubic-bezier(0.42, 0, 0.24, 0.98); /*на этот счёт не уверен, куда его поставить, чтобы был эффект такой, как было до этого, что плавное появление "шторки" при наводке*/
background-repeat: no-repeat;
background-position: center; /*позиционирование фона по центру*/
background-size: cover; /*масштабирование обложки*/
display: block; /*делаем ссылку блоком сразу, чтобы div лишних не пихать вокруг*/
position:relative;
}
.brydergikab {
  background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/search.png) no-repeat center rgba(0, 0, 0, 0.59);
  /*text-align: center;*/
  opacity: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
background-size: auto;
display: none;
}
.tumodermub:hover .brydergikab {
  opacity: 1;
display: flex !important; /*тут block или inline-block*/
}

.tumodermub:hover {
  border:1px solid #555;
  border-radius:5px;
}

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

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

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

1.

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

Вид материалов каталога файлов (Новостей,статей) для ucoz

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

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

Спасибо пользователю -SAM- за варианты и полную доработку материала.

20 Ноября 2017 Просмотров: 1497 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: -SAM- 20 Ноября 2017 19:46¹ 0 Еще такой эффект прокрутки фона при наводке можно замутить: где в стилях идёт Код .tumodermub {background-position: center;} убрать его и прописать так Код .tumodermub:hover { border:1px solid #555 !important; border-radius:5px; background-position: center !important; /эффект прокрутки фона/ } Если прокрутить до самого низа фон нужно, то соответственно прописать background-position: bottom !important;