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

Вид материалов каталога (блога, статей) для uCoz

Вид материалов каталога (блога, статей) для uCoz
Разнообразен по тематике вид материалов, что адаптивный на мобильные аппараты и отлично подойдет на такие каталоги, как новости, блог. Он был полностью перестроен по своей формаций, где теперь изображение идет на всю ширину каркаса. Все функций размещены не у названия, а были перемещены ближе к краткому описанию. По правую сторону стоит кнопка, что при клике выводит пользователя или гостей на основной мануал или прокачать файл. Под это шрифтовые иконки подключены, и по ним видно, сколько было просмотров или какое количество скачали архив. Но и сама категория, что через нее можно перейти.

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

Все можете просмотреть, где проверено на тестовом портале.

HTML

Код
<div class="karunlemys-vid">
  <div class="karunlemys-title">
  <div class="zornet_ru"><a href="$ENTRY_URL$">$TITLE$</a></div>
  </div>
  <div class="karunlemys-img-text">
  <div class="karunlemys-img">  
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>
  </div>
  <div class="karunlemys-text">
  $MESSAGE$
  </div>
  </div>
<div class="karunlemys-detali">
  <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-calendar"></i></span><span class="karunlemys-1-r">$DATE$</span></div>  
  <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-eye"></i></span><span class="karunlemys-1-r">$READS$</span></div>  
  <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-comments-o"></i></span><span class="karunlemys-1-r"><?if($COMMENTS_NUM$)?>$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?><?else?>нет комментариев<?endif?></a></span></div>
  <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-clone"></i></span><span class="karunlemys-1-r"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span></div>  
  <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-user-o"></i></span><span class="karunlemys-1-r"><a href="$PROFILE_URL$">$USERNAME$</a></span></div>  
  <div class="karunlemys-1"><span class="karunlemys-2"><a href="$ENTRY_URL$">Читать далее</a></span></div>
  </div>
</div>

CSS

Код
.karunlemys-vid {border-radius: 3px;background-color: rgba(247, 247, 247, 0.96);box-shadow: 0px 0px 1px 2px rgba(185, 185, 185, 0.95);padding: 10px;margin-bottom: 17px;}
.karunlemys-title {border-bottom: solid rgba(204, 204, 204, 0.97) 1px;padding: 0 0 10px 0;margin: 0 0 10px 0;}
.karunlemys-title a {color: rgba(68, 64, 64, 0.95);font-size: 17px;font-weight: bold;}
.karunlemys-title a:hover {color: rgba(63, 89, 183, 0.95);text-decoration: none;}
.karunlemys-title span {font-size: 12px; margin-top: 5px; display: block;}
.karunlemys-title span a {display: inline-block; font-weight: normal; font-size: 12px;}
.karunlemys-img-text {width: 100%;min-height: 100%;}
.karunlemys-img {width: 100%;height: 175px;margin: 0 10px 10px 0;border-radius: 3px;}
.karunlemys-img img {width: 99%;height: 165px;object-fit: cover;border: 3px solid rgba(241, 235, 235, 0.97);border-radius: 7px;box-shadow: 0px 0px 18px rgba(109, 102, 102, 0.29), 0px 3px 20px 0px rgba(117, 110, 110, 0.32);}
.karunlemys-text {text-align: justify;height: 50px;overflow: hidden;line-height: 135%;color: #504949;}
.karunlemys-detali {padding: 10px;margin: 10px 0 0 0;border-radius: 5px;box-shadow: 0px 0px 5px 0px rgb(193, 193, 193);border: 1px solid rgba(216, 206, 206, 0.98);font-weight: bold;}
.karunlemys-1 {display: inline-block;font-size: 11px;margin-right: 9px;color: rgba(24, 115, 142, 0.99);font-weight: bold;}
.karunlemys-1:last-child {display: table; float: right; margin: -3px 0 0 0;}
.karunlemys-1-l {margin-right: 5px;}
.karunlemys-1-r {
  color: #3498db;
  font-weight: bold;
}
.karunlemys-2 a {display: block;background-color: rgba(21, 95, 19, 0.9);color: rgba(243, 238, 238, 0.98);padding: 5px 20px;border-radius: 5px;margin: -1px 0px 5px 16px;}
.karunlemys-2 a:hover {background-color: rgba(45, 152, 37, 0.9); text-decoration: none;}

  @media only screen and (max-width: 690px){
.karunlemys-img, .karunlemys-detali {float: none!important;width: 100%!important;}
.karunlemys-detali {margin: 10px 10px 20px -11px ;}
.karunlemys-1:last-child {display: none;}
.karunlemys-detali {display: none;}
.karunlemys-img img {width: 97.3%;}
}

  .zornet_ru {
  white-space: nowrap;  
  overflow: hidden;  
  padding: 5px;  
  background: rgb(247, 247, 247);  
  position: relative;  
  }
  .zornet_ru::after {
  content: '';  
  position: absolute;  
  right: 0; top: 0;  
  width: 58px;  
  height: 100%;  

  background: -moz-linear-gradient(left, rgba(247, 247, 247, 0.5), #f7f7f7 100%);
  background: -webkit-linear-gradient(left, rgba(247, 247, 247, 0.79), #f7f7f7 100%);
  background: -o-linear-gradient(left, rgba(247, 247, 247, 0.65), #f7f7f7 100%);
  background: -ms-linear-gradient(left, rgba(247, 247, 247, 0.61), rgba(247, 247, 247, 0.35) 100%);
  background: linear-gradient(to right, rgba(247, 247, 247, 0.18), rgb(247, 247, 247) 100%);
  }

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

Вид материалов для ucoz новости сайта

Планшет почти нет изменений.

Вид материалов скрипты юкоз

Вот уже смартфон, здесь визуализация меняется.

Адаптивный вид материалов сайта

По и остается телефон, что обзор шикарный.

Простой вид материалов Каталога Файлов для uCoz

На какой модуле вы его видите, только ваше мнение, он разносторонний в такой редакций, не исключаю, что на доску объявление можно увидеть.
23 Октября 2017 Просмотров: 2673 Комментариев: (4)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 4
Kosten
Kosten 29 Октября 2017 17:491
0
Также на форуме выложен адаптивный вид материала, который точно такой по дизайн, но в плане адаптивности он немного доработан, где перейдете на форум увидите, что при узком экране появится кнопка, только в другом стиле.

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

VadimW
VadimW 24 Февраля 2020 22:132
0
Самое интересное решение мне понравилось с комментариями, ранее ни где не встречал.

Код
<?if($COMMENTS_NUM$)?>$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?><?else?>нет комментариев<?endif?>
Kosten
Kosten 24 Февраля 2020 23:383
+1
Это решение уже давно применяется, если хорошо комментируют под материалом, т о думаю такое решение будет отличным вариантом.
na3uTuB4uk
na3uTuB4uk 25 Февраля 2020 14:304
+2
Вот с одной стороны условные операторы на uCoz более удобнее чем на DLE, но вот такой кусок кода лишь для того, чтобы сделать правильное склонение слов это просто извращение, с этим планом DLE конечно молодцы.
Войдите:
avatar