» »

Светло серый вид материалов новостей для uCoz

Светло серый вид материалов новостей для uCoz

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

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

Но если визуально смотреть, то по сторонам идут тени и в один пиксель обвод, что смотрится в 3D обзоре. Не считая такие элементы, как эффект изображение и при наведение на заголовок, аналогично идет изменение оттенка.

Проверенно и доработано на тестовом сайте и здесь полный обзор на мобильные приложение.

1.

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

2.

в одну колонку для файлов на сайт

3.

Мобильная версия в 2 колонка материалов для сайта

HTML

Код
<div class="otorhinolary_ngological">  
<article class="munoelectro_phoretically">  
<div class="psychophys_icotherapeutics">  
<div class="thyroparat_hyroidectomized pneumoen">  
<a href="$ENTRY_URL$"><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://zornet.ru/CSS-ZORNET/Abvan/zornerikhda120.jpg<?endif?>" alt="$TITLE$"></a>  
<?if($CATEGORY_NAME$)?><h5><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></h5><?endif?>  
</div>  
<h4 class="radioim_munoelectrop"><a href="$ENTRY_URL$">$TITLE$</a></h4>  
<div class="psychoneuro_endocrinological ">  
<a href="$PROFILE_URL$"><div class="paticochola_ngiogastros"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="http://zornet.ru/CSS-ZORNET/Abvan/tuniresaxtun.jpg" alt="" style="width: 25px; height: 25px;"><?endif?></div></a>  
<span style="padding-left:0px bottom:1px; font-style: normal;"><span></span>  
<span class="spectrophot_ofluoromet"><i class="fa fa-user-circle"></i>$USERNAME$ <span style="padding-left:10px;"> Время: $TIME$ : $WDAY$ </span>  
</div>
<div class="pseudop_seudohyp">  
<p>$MESSAGE$</p>  
</div>  
</div>  
<footer class="parath_yroidism">  
<span class="zornet_ru_gersalom"><i class="fa fa-comments"></i> <?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$">$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?> </a><?endif?></span>  
<span class="zornet_ru_gersalom"><i class="fa fa-eye"></i> $READS$</span>  
<span class="zornet_ru_gersalom"><i class="fa fa-thumbs-up"></i> $RATING$</span>  
</footer>  
</article>  
</div>

CSS

Код
.otorhinolary_ngological {padding: 1px 1px 12px 10px;width: 48%;margin: 0 !important;float: left;}  
.munoelectro_phoretically {position: relative;background: rgba(247, 247, 251, 0.79);box-shadow: 0 1px 6px 0 rgba(74, 70, 70, 0.81), inset 0px 0px 0px 0px rgba(82, 84, 86, 0.84);border-radius: 7px 7px 5px 5px;border: 1px solid rgba(134, 136, 142, 0.92);}  
.psychophys_icotherapeutics {padding: 3px;position: relative;}  
.spectrophot_ofluoromet {position:relative;bottom: 9.7px;color: #4a350d;text-shadow: 0 1px 0 rgba(251, 238, 238, 0.3);font-family: Tahoma;}  
.thyroparat_hyroidectomized {width: 100%;position: relative;}  
.thyroparat_hyroidectomized img {width: 99.9%;-webkit-transition: all 0.3s;display: block;margin: auto;height: 193px;box-shadow: 0 0px 3px 1px rgba(222, 215, 215, 0.78), inset 0 0 0 1px rgba(84, 86, 90, 0.66);opacity: 0.9;border-radius: 5px 5px 0px 0px;}  
.thyroparat_hyroidectomized img:hover {opacity: 1;}  
.thyroparat_hyroidectomized > h5 {position: absolute;left: 0;bottom: 0;font-family: "Roboto", sans-serif;font-size: 12.9px;color: #cac5c5;padding: 4.7px 15px;background: rgba(22, 167, 40, 0.8);margin: 0;border-radius: 0px 5px 0px 0px;}  
.thyroparat_hyroidectomized > h5:before {content: '';position: absolute;}  
.thyroparat_hyroidectomized > h5 a:first-child {margin-left: 0;}  
.thyroparat_hyroidectomized > h5 a {display: inline-block;color: #f1ecec;text-shadow: 0 1px 0 rgba(14, 14, 14, 0.95);}  
.thumb-icon.pneumoen { text-align: center; width: 60px;height: 40px; line-height: 40px;font-size: 20px;position: absolute;top: 50%; margin-top: -20px; margin-left: -30px; color: #34495e;}  
.radioim_munoelectrop {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-bottom: 1px solid rgba(197, 191, 191, 0.93);padding: 0px 0px 7px 5px;margin: 10px 0px 14.3px 1px;}  
.radioim_munoelectrop a {text-transform: none;font-size: 16px;font-family: PT Sans;color: rgba(47, 45, 45, 0.97);text-shadow: 0 1px 0 rgba(251, 243, 243, 0.99);font-weight: bold;}  
.radioim_munoelectrop a:hover{color: rgba(152, 47, 15, 0.94);text-decoration:underline;}  
.paticochola_ngiogastros {float: left;margin-top: -10px;margin-right: 10px;padding: 0px 0px 0px 3px;}  
.paticochola_ngiogastros img {border-radius: 87%;margin-right: 0px;display: inline-block;width: 28.3px;height: 28.3px;box-shadow: 0px 0px 3px 1px rgba(27, 24, 24, 0.51), 0px 10px 30px -15px rgba(162, 152, 152, 0.57);}
.paticochola_ngiogastros span {font-weight: 500;color: rgba(195, 216, 255, 0.99);display: inline-block;font-size: 13px;}  
.psychoneuro_endocrinological > span, .psychoneuro_endocrinological > p {display: inline-block;margin: 0;font-family: "Roboto", sans-serif;font-size: 13px;color: #e3e3f5;text-transform: capitalize;margin-top: 5px;}  
.psychoneuro_endocrinological > span i, .psychoneuro_endocrinological > p i {font-size: 12px;color: #5d4306;font-style: normal;margin-right: 3.7px;float: left;margin-top: -7px;}  
.parath_yroidism {border-top: 1px solid rgba(212, 208, 208, 0.81);display: block;background: rgba(220, 220, 220, 0.73);height: 39.9px;border-radius: 0px 0px 5px 5px;}  

.psychoneuro_endocrinological {padding: 0px 1px 2px 0px;margin: 3px 1px 0px 2px;border-bottom: 1px solid rgba(179, 178, 178, 0.98);}  

.zornet_ru_gersalom {font-size: 13px;display: inline-block;margin: 9px 0px 1px 9px;color: rgba(48, 56, 80, 0.98);text-shadow: 0 1px 0 rgba(249, 242, 242, 0.73);}  
.zornet_ru_gersalom a{color: rgba(12, 36, 53, 0.88);text-decoration:none;}  
.zornet_ru_gersalom a:hover{color: rgba(17, 75, 125, 0.95);text-decoration:underline;}  
.pseudop_seudohyp {height: 68px;overflow: hidden;text-align: justify;color: rgba(33, 30, 30, 0.97);font-size: 12px;padding: 0px 5px 2px 5px;margin: 0px 0px 7px 0px;}  
li {list-style-type: none;}  
@media (max-width: 369px){.zornet_ru_gersalom {display:none;}}  

@media screen and (max-width: 1124px) {  
  .otorhinolary_ngological {width: 48.1%;margin: 1%;}  
}  
@media screen and (max-width: 860px) {  
  .otorhinolary_ngological {width: 97.5%;margin: 2%;}  
}

PS - Все гаджеты будут корректно выводить этот материал, но на самом небольшой экране, автоматически пропадут кнопки. Это для того, чтоб понятнее было для просмотра.
11.01.2018 Просмотров: 243 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 11.01.2018 20:461
0
Если решите сделать в одну колонку или в 3 , то просто в начале стилей находим width: 48%, что идет на 2 колонка, на 3 нужно 33% процента, но там плюс минус. И остается одна, там от 97% - 100% идет, но там по настройке все выставляется.
avatar