Вид материала uCoz как на сайте Vebmastak
 | |
| Нечего скрывать, он был изначально создан из материала yraaa и переделан и теперь вам хочу представить Вид материала uCoz как на сайте Vebmastak который уже не похоже от первоисточника, только своим оттенком цвета, который является светлым. Первое что сделал, это поставил под стили кнопку далее и отрегулировал гамму при ее нажатие, просто при наведение она как будто впадает внутрь а на меняется как у всех. Нашел хорошие стили, которые смогли сделать вокруг изображение красивый обвод, если вы будете делать серый, то заметите что там идут полосы, и вам будет не трудно просто подобрать свой оттенок на сайте, там не нужно нечего красить. Но и добавил комментарий и саму категорию, чтоб смотрелся полным и можно было при нажатие их перейти. Установка: Вид в админ панели, под модуль: Код <div class="mtr"> <div class="im"> <div class="inim"> <a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="272" height="123" style="padding:1px;float:center;border: 3px solid #50849E; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;" alt="$TITLE$" title="$TITLE$" /></a> </div> </div> <div class="mtr_td"> <div class="name_mtr"><a href="$ENTRY_URL$">$TITLE$</a><?if($MODER_PANEL$)?><div style="float:right;display: block; margin: -2px auto;z-index: 100; opacity: 0.7; padding-right: 30px;">$MODER_PANEL$</div><?endif?> </div> <div class="article_counters"><span class="dats">$DATE$</span> <span class="catalog">$CATEGORY_NAME$</span> <span class="views">$READS$</span><?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$"><span class="coms">$COMMENTS_NUM$</span></a><?endif?></div> <p class="mtr_d"> <span class="text"><div class="ntext">$MESSAGE$</div> <br><a href="$ENTRY_URL$" style="float: right;" class="button24">Читать далее</a> </span> </p><hr> </div> </div> <style> a.button24 { display: inline-block; color: #FFF; text-decoration: none; padding: .2em 1em; outline: none; border-width: 3px 0; border-style: solid none; border-color: #6CB8D0 #1E292B #284B52; border-radius: 6px; background: linear-gradient(#4BC0E8, #15404C) #3B696F; transition: 0.2s; } a.button24:hover { background: linear-gradient(#338392, #71ABBF) #8FBCFF; } a.button24:active { background: linear-gradient(#2A7B98, #4792BB) #296C8C; } </style> А это разместите в CSS сайта: Код /*Vid Materiala*/ .mtr {padding: 7px;display:table} .mtr .article_counters {margin-bottom:10px;} .mtr .im {background:#FFFFFF;padding-right:10px;display:table-cell;vertical-align:top} .mtr_td {display:table-cell;vertical-align:top} .mtr .inim {width:280px;height:132px;overflow:hidden} .mtr_descr {margin:0;position:absolute;top:-9000px} .name_mtr {margin-bottom:9px;font-size:15px;font-weight:bold} .article_counters {margin-bottom:14px;font-size:13px;color:#8c8c8c} .article_counters span {display:inline-block;margin-right:10px} .article_counters .dats {background:url('http://vebmastak.ru/Fail/time.png') 0px 1px no-repeat;padding-left:20px} .article_counters .views {background:url('http://vebmastak.ru/Fail/views.png') 0px 1px no-repeat;padding-left:20px} .article_counters .coms {background:url('http://zornet.ru/ZORNET/Fail/comment-999.png') 0px 1px no-repeat;padding-left:20px} .article_counters .catalog {background:url('http://zornet.ru/ZORNET/Fail/views-8888.png') 0px 1px no-repeat;padding-left:20px} .article_counters .user {background:url('http://zornet.ru/ZORNET/Fail/user-444.png') 0px 1px no-repeat;padding-left:20px} Вы можете сами что то добавить, так как код не сложный и все ваших руках. Если захотите убрать кнопку, то в самом коде ниже под нее идут стили и их тоже нужно будет убирать, хотя по мне так отлично смотрится. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
|
| |
