вСкрипты для Юкоз

Вид материала 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

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

источник: zornet.ru

Похожие посты