» »

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

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

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

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

Проверка на тестовом под адаптивность.

1.



2.



HTML

Код
<div class="ventularsam_zornet_ru-vid">
<div class="ventularsam_zornet_ru-title"><a href="$ENTRY_URL$">$TITLE$</a></div>
<div class="ventularsam_zornet_ru-img"><img src="$IMG_URL1$" title="$TITLE$" alt="$TITLE$"></div>
  <div class="ventularsam_zornet_ru-mix">
<div class="ventularsam_zornet_ru-text">$MESSAGE$</div>
<div class="ventularsam_zornet_ru-detali">
<div class="ventularsam_zornet_ru-dalee"><a href="$ENTRY_URL$">Читать далее</a></div>
<span><i class="fa fa-user-circle" aria-hidden="true"></i> <a href="$PROFILE_URL$">$USERNAME$</a></span>|<span><i class="fa fa-comments" aria-hidden="true"></i> $COMMENTS_NUM$ </span>|<span><i class="fa fa-folder-open" aria-hidden="true"></i> $CATEGORY_NAME$</span>
</div>
</div>
</div>

CSS

Код
.ventularsam_zornet_ru-title {padding: 21px 0px 10px 3px;}
.ventularsam_zornet_ru-title a {color: #315371;font-family: inherit;font-size: 19px;font-weight: 600;display: block;}
.ventularsam_zornet_ru-title a:hover {color: #209fab;}
.ventularsam_zornet_ru-img {float: left; width: 250px; height: 150px;}
.ventularsam_zornet_ru-img img {width: 100%;height: 146px;border: 2px solid #7e7e84;border-radius: 3px 3px 0px 3px;}
.ventularsam_zornet_ru-mix {overflow: overlay;}
.ventularsam_zornet_ru-text {line-height: 24px;font-size: 14px;height: 100px;overflow: hidden;text-align: justify;padding: 1px 0px 0px 10px;}
.ventularsam_zornet_ru-detali {background-color: #7e7e84;height: 40px;line-height: 40px;margin: 9px 0px 10px 0px;font-size: 14px;color: #ffffff;padding: 0 0 0 10px;}
.ventularsam_zornet_ru-detali span {padding: 0 10px;}
.ventularsam_zornet_ru-detali span a {color: #ffffff; text-decoration: none;}
.ventularsam_zornet_ru-dalee a {float: right;background: #2c5786;color: #ffffff;padding: 0 10px;text-decoration: none;}
.ventularsam_zornet_ru-dalee a:hover {background: #17801b;}

@media screen and (max-width: 640px) {
  .ventularsam_zornet_ru-img {
  background: #fff;
  width: 100%;
  height: auto;
}
}

@media screen and (max-width: 640px) {
.ventularsam_zornet_ru-mix {
  background: #ffffff;
  width: 100%;
  height: auto;
  padding: 0 0 0 0px;
}
}

@media screen and (max-width: 640px) {
.ventularsam_zornet_ru-detali {
  background: #22354a;
width: 100%;  
  margin: 7px -10px 7px 0px;
}
}

@media screen and (max-width: 640px) {
.ventularsam_zornet_ru-dalee a {
  float: right;
  background: #2b4a69;
  color: #fff2f2;
  margin: 0px 10px 0px 0px;
  text-decoration: none;
}
}

Здесь идут шрифтовые иконки, что нужно подключить, для отображение кнопок.
29.11.2017 Просмотров: 247 Комментарий: (6)

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

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

Комментарий: 6
Kosten
Kosten 29.11.2017 19:221
0
Пару вечеров его пытался адаптировать, но ангина не давала, но думал, все сделал, но как оказалось, что иногда на мобильном корректно показывает, иногда так. Может кто найдет в чем причина, просто здесь уже на автомате залил, так как все показало нормально. но вот иногда такой обзор.

waak
waak 29.11.2017 21:492
0
Заменить спан для категории на этот

Код

<span class="cat_name"><i class="fa fa-folder-open" aria-hidden="true"></i> $CATEGORY_NAME$ </span>  


все стили на эти
Код
.ventularsam_zornet_ru-vid {padding: 0 10px;}
  .ventularsam_zornet_ru-title {padding: 21px 0px 10px 3px;}  

.ventularsam_zornet_ru-title a {color: #315371;font-family: inherit;font-size: 19px;font-weight: 600;display: block;}  
.ventularsam_zornet_ru-title a:hover {color: #209fab;}  
.ventularsam_zornet_ru-img {float: left; width: 250px; height: 150px;border: 2px solid #7e7e84;border-radius: 3px 3px 0px 3px;}  
.ventularsam_zornet_ru-img img {width: 100%;height: 146px;object-fit: cover;}  
.ventularsam_zornet_ru-mix {overflow: hidden;}  
.ventularsam_zornet_ru-text {line-height: 24px;font-size: 14px;height: 100px;overflow: hidden;text-align: justify;padding: 1px 0px 0px 10px;}  
.ventularsam_zornet_ru-detali {background-color: #7e7e84;height: 40px;line-height: 40px;margin: 9px 0px 10px 0px;font-size: 14px;color: #ffffff;padding: 0 0 0 10px;}  
.ventularsam_zornet_ru-detali span {padding: 0 10px;}  
.ventularsam_zornet_ru-detali span a {color: #ffffff; text-decoration: none;}  
.ventularsam_zornet_ru-dalee a {float: right;background: #2c5786;color: #ffffff;padding: 0 10px;text-decoration: none;}  
.ventularsam_zornet_ru-dalee a:hover {background: #17801b;}  

@media screen and (max-width: 640px) {  
  .ventularsam_zornet_ru-img  {  
  background: #fff;  
  width: 100%;  
  height: auto;  
}  
.ventularsam_zornet_ru-img img {  
  width: 100%;  
  height: auto;  
}  

.ventularsam_zornet_ru-mix {  
  background: #ffffff;  
  width: 100%;  
  height: auto;  
  padding: 0 0 0 0px;  
}  

.ventularsam_zornet_ru-text {
  height: auto;
  padding: 10px;
}

.ventularsam_zornet_ru-detali {  
  background: #22354a;  
width: 100%;  
  margin: 7px -10px 7px 0px;  
}  

.ventularsam_zornet_ru-dalee a {  
  float: right;  
  background: #2b4a69;  
  color: #fff2f2;  
  margin: 0px 10px 0px 0px;  
  text-decoration: none;  
}  
}
@media screen and (max-width: 440px) {  
.cat_name {display: none;}
}


Не за что! 11a
waak
waak 29.11.2017 21:543
0
Категории лучше скрывать при маленьком размере так как ник пользователя может быть больше чем 6 символов
waak
waak 29.11.2017 22:014
0
Так же бордер и закругление лучше указывать блоку а не картинки
Если делаешь конкретные размеры картинкам то нужно указывать в стилях для них
такую строчку object-fit: cover; иначе она будет ломать весь вид так как картинки могут быть разного размера высокие или длинные а это свойство будет автоматом подстраивать её под нужный размер при этом максимально сохранит её качество вобщем много ошибок в твоём коде
Kosten
Kosten 02.12.2017 00:476
0
waak, но получится так, что по высоте изображение все разные, и когда на мобильном просматриваешь, то одни изображение большие, другие меньше, что в этом случай можно в медео задать высоту, а так согласен, чтоб автоматически должна, и для поисковых систем отлично. То бываешь зайдешь в картинки, а там скрин, по форме, что указано в каркасе, и прямо не выводит на материал, только на страницу, где находится он.
Kosten
Kosten 29.11.2017 22:015
0
waak, ты как из мультфильма, чип и дейл всегда спешишь на помощь. Большое спасибо, и так от ангины голова не варит, здесь хоть разрешилось.
avatar