» »

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

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

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

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

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

Теперь переходим к обзорам:

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

Стильный вид материалов файлов на сайте

Это примерно вид с планшета или возможно смартфона, что все корректно выводит и даже категорию, что в верхнем углу.

Адаптирован вид под смарконы

Считаю самый малый экран на мобильном устройстве, и также вы можете отчетливо все видеть и все читабельно.

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

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

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

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


Сам код в админ панели меняем полностью на вид материала, к примеру на доске объявление.

Код
<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>


Стили можно разместить в самом низу 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;}

Прежде, что то менять или делать, вам лучше сохранить позицию в "Резервное копирование (backup)" чтоб можно было откатить на тоже место, с чего начинали.

Автор: waak
Источник: bоbа.ucoz.com

Доработал дизайн: Админ сайта uCozz.pRo

С моей стороны, только уменьшил сам экран под скрин, и по сторонам закруглил на 3 пикселя, и что раздел или категория идет выше, там тоже шумы подобрал, чтоб смотрелось более ярко на любом фоне.
06.04.2017 Просмотров: 842 Комментарий: (25)

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

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

Комментарий: 25
Kolinkor
Kolinkor 06.04.2017 18:511
+1
Здесь соглашусь, что он стал более ярким, но выдавать один и тот же вид материала в разных ракурсах, не кажется, что это потолок, это если отчет с низу ведется. Что тут сделано, стили установили на цвет и тени закрепили, все. Не буду считать, что там уменьшили и закруглили, это каждый может.

Но а так, скажу, этот более нравится от остальных, но не нужно ставить кнопку и выдавать за новый.
maniacvn
maniacvn 06.04.2017 19:003
0
Каждый может,но не делает)Здесь никто ничего не выдает просто делимся своими решениями доработками если бы мы на этом зарабатывали вот тогда другой вопрос а так может кому и пригодиться)
Kosten
Kosten 06.04.2017 19:125
0
По этому он на сайте, что кому то пригодиться, он смотрится красиво и плюсом идет его полная адаптивность. Даже на простой стандартный шаблон поставить и уже все в красках других смотрится.
FeStemBer
FeStemBer 06.04.2017 18:582
0
Brung, можно представить. что кто то не умеет делать а идея у него есть такая, а здесь на тебе и сразу готовый вид. Согласен, один вид коверкать это не правильно, но если там еще что то было, и убрали, то можно понять, что по другому смотрелся. А вот, что не меняется рейтинг с зеленого на красный, здесь вот если бы сделали, то тогда совершенно все в других красках.
Kosten
Kosten 06.04.2017 19:114
0
Но если бы слишком похоже на другой материал был, то не заливал, мне этот также красивей от источника нравится, просто добавление красок и по другому уже видеться. И писал про вывод даты, что гармонично ложилось, но там дело в том, если большое название, то под дизайн будет заходить. что пришлось убрать.
tsakonter
tsakonter 06.04.2017 19:296
0
Доработка шик, все так распыляются по пустому, взяли бы и сделали.
harvus
harvus 06.04.2017 19:337
0
Красиво выглядит. Единственное, мне не нравится слишком яркие цвета кнопок, более мягкий тон куда лучше смотрелся бы.
Kosten
Kosten 06.04.2017 20:019
0
Но это дело самого веб мастера, просто все в стилях можно выставить как нужно и вообще поменять оттенок цвета и уменьшить или вообще убрать тени.
Maryges
Maryges 06.04.2017 19:338
0
Не слишком большая ширина от название, до описание, или это не так важно. Если ее редактировать, то по всему виду будет идти.

Kosten
Kosten 06.04.2017 20:0210
0
Это нормально, главное не куда не чего не расползается и нет в низу скрола, который бы обозначал, что не все так нормально, но его нет, все в рамках установилось.
maniacvn
maniacvn 06.04.2017 20:1311
+2
#wid_m_bc p {padding: 15px;} Поставите padding 5px
Maryges
Maryges 06.04.2017 20:1712
0
Понятно, спасибо, главное, чтоб на всех размерах отображалось нормально, а не для одного.
avatar
tirtuvir 06.04.2017 22:1113
0
А где ид календаря в CSS есть под него прописанные стили.

Код
#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;
}
maniacvn
maniacvn 06.04.2017 22:4214
0
В самый вверх скрипта ставим этот кусок кода, что отвечает за дату.

Код
<div id="wid_m_bc"><div id="calendar">$WDAY$ <em>$DATE$</em></div>
maniacvn
maniacvn 06.04.2017 22:4315
0
Сори вернее так выставить, и будет вернее и правильно.

Код
<div id="calendar">$WDAY$ <em>$DATE$</em></div> после <div id="wid_m_bc">
Kosten
Kosten 07.04.2017 00:2219
0
Да, этот код был, на текстовом документе полностью сохранился, что изначально залит в материале.
maniacvn
maniacvn 06.04.2017 22:4516
0
Должно получиться вот так как на изображение с датой.

Kosten
Kosten 07.04.2017 00:2420
0
maniacvn, не думал, просто дату где то разместить на изображение, так как они идет больше стандартного, но высоту немного срезал и в стилях потом все выровнял.
Kosten
Kosten 07.04.2017 00:2118
0
А что стили остались от даты, думал все почистил и сам код убрал. Возможно с датой можно было по другому определить. но она не сильно важна, если не новостной блог.
1 2 »
avatar