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

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

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

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

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

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

1. Это по умолчанию, где на главной странице стильно смотреться должен.

2. Выставлен на планшет, что с аналога почти без изменений.

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

4. Это главное изменение, которое начнется с 640 пикселей, что точно на телефоне такой обзор будет.

Адаптивная версия в один блог

Приступаем к установке, где все по стандарту производится.

Это полностью поменять код и меняем на предложенный.

Код

<div class="vizantua">
<a href="$ENTRY_URL$" class="vertumugan-image" style="background-image:url(<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>);">
  <span class="vertumugan-category">$CATEGORY_NAME$</span>
  </a>
<p class="danukermisa"><a href="$ENTRY_URL$" class="vertumugan-title">$TITLE$</a></p>
  <div class="vertumugan-mes">
  <p>$MESSAGE$</p></div>
  <div class="vertumugan-footer">
  <ul class="vertumugan-info">
  <li><i class="fa fa-calendar"></i> <span>$DATE$</span></li>
  <li><a href="$AVATAR_URL$" target="_blank"><i class="fa fa-user-circle" aria-hidden="true"></i> <span>$USERNAME$</span></a></li>
  <li><i class="fa fa-eye"></i> <span>$READS$</span></li>
  <li><a href="$COMMENTS_URL$"><i class="fa fa-comments"></i> <span>$COMMENTS_NUM$</span></a></li>
  </ul>
  </div>
  <div class="vertumugan-read"><a href="$ENTRY_URL$"><i class="fa fa-share"></i></a></div>
</div>

В стили CSS прописать, что можно в самый низ.

Код

.vizantua{
margin-bottom: 23px;
}

.vertumugan-image{
display: block;
height: 230px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
border-radius: 3px;
position: relative;
border: 1px solid #b3b5b9;
}

.vertumugan-mes{
color: #2b2828;
font-size: 14px;
overflow:hidden;
height: 74px;
background: rgb(255, 255, 255);
text-align: justify;
margin-bottom: 1px;
line-height: 140%;
margin: -15px 0px 0px 0px;
}

.vertumugan-category{
position: absolute;
right: 7px;
top: 7px;
background: rgba(23, 110, 162, 0.78);
color: #fff;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 1px 0 #080808;
}

.vertumugan-title{
font-size: 25px;
padding: 12px 0px;
display: block;
color: #000;
transition: 0.3s;
}

.vertumugan-title:hover{
color: rgb(183, 50, 31);
transition: 0.3s;
text-decoration: none;
}

.vertumugan-title:first-letter{
color: #b5451d;
}

.vertumugan-info{
padding: 0;
margin: 0;
}

.vertumugan-info li{
display: inline-block;
font-size: 13px;
margin-right: 19px;
}

.vertumugan-info li i{
color: #2e76b5;
margin-right: 5px;
}

.vertumugan-info li span{
font-size: 13px;
font-weight: bold;
color: #23506F;
}

.vertumugan-info li a{
color: #333333;
transition: 0.3s;
}

.vertumugan-info li a:hover{
color: #963b11;
text-decoration: none;
transition: 0.3s;
}

.vertumugan-footer{
padding: 15px 0px;
}

.vertumugan-read{
float: right;
margin: -31px 0px 0px 1px;
}

.vertumugan-read a{
display: inline-block;
background: #3990d0;
width: 34px;
text-align: center;
height: 18px;
padding: 3px 0px 0px 3px;
border-radius: 7px;
}

.vertumugan-read a i{
color: #fff;
}

.vertumugan-read a:hover{
background: #82340e;
}

.danukermisa{
white-space: nowrap;
overflow: hidden;
padding: 3px;
background: #ffffff;
position: relative;
margin: 3px 0px 0px 0px;
}

.danukermisa::after{
content: '';
position: absolute;
right: 0;
top: 0;
width: 70px;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.28), rgb(255, 255, 255) 100%);
}

@media screen and (max-width: 640px){
.vertumugan-footer{
display: none;
}

}

@media screen and (max-width: 640px){
.vertumugan-read{
width: 100%;
margin: 5px 0px 23px 1px;
text-align: center;
background: rgb(57, 144, 208);
color: rgb(255, 255, 255);
padding: 5px 0px 5px 0px;
font-size: 13px;
border-radius: 5px;
border: 1px solid #2b6996;
}

}

}

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

12 Ноября 2017 Просмотров: 1905 Комментариев: (13)

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

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

Kosten

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

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

Комментарии: 13
Порядок вывода комментариев: Kosten 12 Ноября 2017 21:27¹ 0 Как дополнение, что эффект сглаживание, установлен в название, что можно на скринах увидеть. Где теперь не будет складываться в несколько строк, а все понятно выводить. Где прописаны стили на тени, что знаки постепенно исчезают. но просматриваются. Kosten 13 Ноября 2017 01:04² 0 На две колонки добавлены тени, и изменены функций, что убрана дата и вместо ее появится рейтинг. logangl 13 Ноября 2017 12:18³ 0 Помогите мне исправить ошибку в скрипте!!! Добавил я на свой сайт данный вид материалов и вроде всё нормально. Но когда зашел в категории материала, то там ужас что творится. logangl 13 Ноября 2017 12:19⁴ 0 Первый спойлер - это главная страница. Второй спойлер - это страница категории. Kosten 13 Ноября 2017 13:31⁵ 0 Сейчас проверю на категориях. Kosten 13 Ноября 2017 13:36⁶ 0 Проверил, все корректно на категориях отображается. Попробуйте кэш у браузера почистить. Вот скрин с тестового. logangl 13 Ноября 2017 13:53⁷ 0 http://badnews.at.ua/news/proishestvija/1-0-1 Вот ссылка. Можете сами посмотреть!!! Kosten 13 Ноября 2017 14:00⁸ +1 Но на двух сайтах проверил, все нормально. Больше всего в страницы каталогах сбит код. Как пример - http://pluton.clan.su/load/vebmasteru/moi_fajly/7 Kosten 13 Ноября 2017 14:05⁹ 0 Может вам попробовать сохранить шаблон в Резервное копирование (backup) и после этого в в страницы со списком категорий поставить по умолчанию, как шаблон шел и посмотреть. Так как будет возможность все вернуть, что сохранили. logangl 13 Ноября 2017 14:28¹⁰ 0 Уже всё исправил. Благодаря Тех.Поддержке Ucoz Kosten 13 Ноября 2017 15:35¹¹ 0 В чем причина была, в странице категорий или в материале? Kosten 13 Ноября 2017 15:40¹² 0 Найдите в стилях этот код, так как у вам строку немного видно и нужно изменить. Код .vertumugan-mes { color: #2b2828; font-size: 14px; overflow: hidden; height: 67px; background: rgb(255, 255, 255); text-align: justify; margin-bottom: 1px; line-height: 140%; margin: -15px 0px 0px 0px; } У вас 74 прописано height: 74px; нужно на Код 67px height: 67px; и будет корректно все смотреться, так как шрифт мелкий, а вид настроен на более. Kosten 13 Ноября 2017 16:51¹³ 0 waak, приветствую, а здесь в стилях все нормально, просто проверял на тестовых сайтах, и все отлично показывает.