» »

Вид материалов файлов с адаптацией для uCoz

Вид материалов файлов с адаптацией для uCoz

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

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

Для начало разберем его на работоспособность.

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

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

Если с мобильного аппарата, то видимость будет отличная.

Вид материала сайта под мобильные аппараты

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

Эффекты на вид материала на сайт uCoz

Приступаем к установки:

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

Код
<div id="wid_m_bc">  
  <div id="wid_m_left">  
  <div id="wid_m_cat">$CATEGORY_NAME$</div>  
  <div id="wid_m_kp">  
  <span><i class="fa fa-thumbs-o-up"></i> $RATING$</span>  
  <span> <i class="fa fa-comments-o"></i> $COMMENTS_NUM$</span>  
  </div>  
  <div id="wid_m_img"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>  
  </div>  
  <div id="wid_m_right"><a href="$ENTRY_URL$">  
  <div id="wid_m_border"></div>  
  <h2>$TITLE$</h2>  
  <p>  
<?if(len($MESSAGE$)>376)?><?substr($MESSAGE$,0,376)?>.....<?else?>$MESSAGE$<?endif?>  
  </p></a>  
  </div>  
  <div id="clr"></div>  
</div>


CSS:

Код
#wid_m_bc {  
  position: relative;  
  overflow: hidden;  
  margin: 20px;  
  background: #FFF;  
  height: 250px;  
}  
#wid_m_left {float: left;width: 40%;position: relative;}  
#wid_m_right {margin-left: 40%;width: 60%;padding: 0px 15px;}  
#wid_m_cat {  
  position: absolute;  
  background: #0276DD;  
  opacity: .7;  
  color: #FFF;  
  padding: 6px 15px;  
}  
#wid_m_img {  
  max-width: 100%;  
  height: 250px;  
  overflow: hidden;  
}  
#wid_m_img img {  
  max-width: 100%;  
  min-width: 100%;  
  height: 250px;  
  object-fit: cover;  
}  
#wid_m_kp {  
  position: absolute;  
  bottom: 5px;  
  right: 10px;  
  color: #FFF;  
  font-size: 16px;  
}  
#wid_m_border {  
  width: 40px;  
  height: 5px;  
  background: #0276DD;  
  position: absolute;  
  bottom: 0;  
}  
#wid_m_bc:hover #wid_m_border {  
  width: 100%;  
  -webkit-transition: all 2s;  
  -moz-transition: all 2s;  
  -o-transition: all 2s;  
  transition: all 2s;  
}  
#wid_m_bc h2 {  
  padding: 10px 0;  
  display: block;  
  color: #434343;  
  font-size: 24px;  
}  
#wid_m_bc:hover h2 {  
  color: #0276DD;  
}  
#wid_m_bc p {  
  display: block;  
  color: #;  
  font-size: 14px;  
  max-height: 160px;  
  overflow: hidden;  
  color: #999999;  
}  
#clr {clear: both;}  

@media screen and (max-width: 600px) {  
  #wid_m_bc {height: auto;padding-bottom: 10px;}  
  #wid_m_left {float: none;width: 100%;}  
#wid_m_right {margin-left: 0px;width: 100%;padding: 0px;position: relative;}  
#wid_m_border {top: 0px;}  
#wid_m_bc h2 {padding: 10px 15px;}  
#wid_m_bc p {padding: 15px;}  
}  
/*Podcerkivanie*/  
a:link {text-decoration:none;}


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

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

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Установка полностью завершена.
Автор: waak
Источник: bоbа.ucoz.com
04.04.2017 Просмотров: 815 Комментарий: (28)

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

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

Комментарий: 28
Kolinkor
Kolinkor 04.04.2017 16:321
0
Что то вид материала в последнее время стало много и все такие адаптивные.) Но такой формат нужен, то уже до изжоги эти вид материала в колонку.
Kosten
Kosten 04.04.2017 16:574
0
Такой вид думаю труднее делать адаптивным, с колонкой гораздо легче, это мое субъективное решение, так как к адаптаций только краем.
waak
waak 04.04.2017 17:146
0
Смени источник! мой сайт не talantlev.ru а boba.ucoz.com
Kosten
Kosten 04.04.2017 17:277
0
Взял источник с браузера и его строки и там явно не боба был.

Опять источник.)
FeStemBer
FeStemBer 04.04.2017 17:408
0
Может что то новое о вид материала напишите, а с источниками в ЛС разберетесь а не выносить на сайт, это глупо выглядит.
FeStemBer
FeStemBer 04.04.2017 16:422
0
Сейчас можно поставить стандартный шаблон и туда установить этот вид материала, и вот готовый и адаптивный вам сайт. Но мне больше этот материал нравится на новости, все равно какие они игровые или политические.
Kosten
Kosten 04.04.2017 16:585
0
Что то когда поставил, тоже решил, что точно новостной блог, но и под файлы различные пойдет, но только описание здесь реально нужно писать, чтоб пустоту закрывать.
Марковичь
Марковичь 04.04.2017 16:473
0
Не вижу не чего в нем новое, просто такой дизайн привычнее для любого, если в колонках можно все по картинке разглядеть, то не факт, что на тематическом сайте другого направление можно это сделать. И здесь такой вид как не когда пригодиться.
ucozmental
ucozmental 04.04.2017 17:449
0
Спасибо за скрипт, переделаю его, уберу категорию, это устарело, сделаю красивый обвод, а вот остальное оставлю.
Kolinkor
Kolinkor 04.04.2017 17:5910
0
Если решили немного преобразовать, только в стили не лезь, то адаптивность собьешь.
Kosten
Kosten 04.04.2017 18:0111
0
Что то не слушал, а наоборот больше вижу, что категорий и много чего выводят на изображение, но здесь каждому виднее.
Kolinkor
Kolinkor 04.04.2017 18:3912
0
Уже попробовал, с этого сайта обвод взял, но посчитал, лучше оставить как есть.
Kolinkor
Kolinkor 04.04.2017 18:4113
0
Делаю подруги сайт, кулинария, там вот тоже хотел поставить этот вид материала, но все же на такой тематике сам обзор важнее, это визуально видеть, и нужно ставить большое изображение.
waak
waak 04.04.2017 21:4516
0
Так я не понял если честно что вы имели введу но если вам нужно сделать картинку больше то это не беда и займёт секунду вашего времени если на оборот блок с текстом то это тоже не займёт много времени

Код


#wid_m_left {float: left;width: 40%;position: relative;}  

Тут указаны стили для блока с картинкой

#wid_m_right {margin-left: 40%;width: 60%;padding: 0px 15px;}  
Тут для блока с текстом  

#wid_m_bc p {  
  display: block;  
  color: #;  
  font-size: 14px;  
  max-height: 160px;  
  overflow: hidden;  
  color: #999999;  
}  
тут стили для блока с описанием  

Kosten
Kosten 04.04.2017 22:5017
0
waak, и что, также адаптивный останется материал.
waak
waak 04.04.2017 22:5318
0
Адаптация не куда не денется так как название блоков не меняются
Kosten
Kosten 04.04.2017 23:4921
0
waak, у меня так получилось, а это описание не видно, но думаю и не должно быть. Но когда экран уже становиться, только тогда описание появляется.
waak
waak 05.04.2017 01:0323
0
Я не пойму твой комментарий это вопрос или ты просто показываешь как изменил?
waak
waak 05.04.2017 01:0824
+1
Если ты хочешь чтоб описание было в низу под картинкой в полной версии то нужно изменить стили

вот тут поменять 250 на auto

Код
#wid_m_bc {  
  position: relative;  
  overflow: hidden;  
  margin: 20px;  
  background: #FFF;  
  height: 250px;  
}  


И вот тут сделать ширину 100% и убрать margin-left: 40%;
Код
#wid_m_right {margin-left: 40%;width: 60%;padding: 0px 15px;}  
Kosten
Kosten 05.04.2017 01:4526
0
Да, все правильно понял, чтоб по умолчанию в низу название и описание было. Попробую, потом отпишу как получилось, но по идее уже красиво смотрится, а здесь плюсом идет адаптивность, то шикарно должно.
Kosten
Kosten 04.04.2017 23:2920
0
Вот от души waak, сейчас на тестовом сайте попробую сделать, если все получиться, то точно фишки добавлю.)
Kosten
Kosten 05.04.2017 00:1922
0
Вот так бы сделать, но только получается, когда экран сузить, по умолчанию, даже название не вывести.

waak
waak 05.04.2017 01:0925
0
Читай 24 комментарий
1 2 »
avatar