• Страница 1 из 1
  • 1
Форум Kentos311 » uCoz » Скрипты для сайта » Адаптивный вид материала для uCoz сайта (Светлый вид материала для системе uCoz)
Адаптивный вид материала для uCoz сайта
Kentos311Дата: Среда, 10.01.2018, 01:20 | Сообщение # 1
Сообщений: 472
Статус:

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

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

1. Таблица стилей CSS:
Код
#wid_m_bc {  
position: relative;  
overflow: hidden;  
margin: 20px;  
background: #FFF;  
height: 170px;  
}  
#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: rgba(26, 92, 235, 0.9);  
box-shadow: 0px 0px 23px 5px rgba(76, 100, 150, 0.9);  
color: #FFF;  
padding: 6px 15px;  
margin:5px;  
border-radius: 3px;  
}  
#wid_m_img {  
max-width: 100%;  
height: 170px;  
overflow: hidden;  
}  
#wid_m_img img {  
max-width: 100%;  
min-width: 100%;  
height: 170px;  
object-fit: cover;  
border-radius: 3px;  
}  
#wid_m_kp p1 {  
position: absolute;  
bottom: 5px;  
right: 10px;  
color: #FFF;  
line-height: 38px;  
text-align:center;  
font-family: 'Jura', sans-serif;  
font-size: 13px;  
font-weight:600;  
color:#fff;  
background: rgba(0, 158, 255, 0.9);  
border-radius: 50%;  
box-shadow: 0px 0px 23px 5px rgba(0, 197, 255, 0.58);  
width:40px;  
height:40px;  
}  
#wid_m_kp p2 {  
position: absolute;  
bottom: 5px;  
right: 50px;  
color: #FFF;  
line-height: 38px;  
text-align:center;  
font-family: 'Jura', sans-serif;  
font-size: 13px;  
font-weight:600;  
color:#fff;  
background: rgba(6, 148, 49, 0.9);  
border-radius: 50%;  
box-shadow: 0px 0px 23px 5px rgba(6, 148, 49, 0.9);  
width:40px;  
height:40px;  
}  
#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: 0px 0;  
display: block;  
color: #434343;  
font-size: 21px;  
padding-right:65px;  
}  
#wid_m_bc:hover h2 {  
color: #0276DD;  

}  
#calendar {  
position: absolute;  
top: 5px;  
right: 5px;  
color: #FFF;  
text-align:center;  
font-family: 'Jura', sans-serif;  
font-size: 13px;  
font-weight:600;  
color:#fff;  
width:60px;  
height:60px;  
padding:5px;  
}  
#wid_m_bc p {  
display: block;  
color: #;  
font-size: 14px;  
max-height: 170px;  
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;}


2. Вид материала
Код
<div id="wid_m_bc">  
<div id="wid_m_left">  
<div id="wid_m_cat">$CATEGORY_NAME$</div>  
<div id="wid_m_kp">  
<p1><i class="fa fa-thumbs-o-up"></i> $RATING$</p1>  
<p2> <i class="fa fa-comments-o"></i> $COMMENTS_NUM$</p2>  
</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$)>293)?><?substr($MESSAGE$,0,293)?>.....<?else?>$MESSAGE$<?endif?>  
</p></a>  
</div>  
<div id="clr"></div>  
</div>


Дополнительно вам нужно подключить шрифтовые иконки, код вставляйте в верх часть сайта:
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Автор: waak
Прикрепления: 7058533.jpg(49.0 Kb) · 2751669.jpg(54.6 Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » Адаптивный вид материала для uCoz сайта (Светлый вид материала для системе uCoz)
  • Страница 1 из 1
  • 1
Поиск: