» »

Вид материала uCoz как на сайте Vebmastak


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


Вы можете сами что то добавить, так как код не сложный и все ваших руках. Если захотите убрать кнопку, то в самом коде ниже под нее идут стили и их тоже нужно будет убирать, хотя по мне так отлично смотрится.
16.09.2015 Просмотров: 495 Комментарий: (12)

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

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

Комментарий: 12
Сопрано
Сопрано 17.09.2015 00:111
0
Вопрос, который думаю многих волнует, он адаптирован под мобильные устройства. То сейчас без этого не куда, даже персональная страница должна быть и обязательно 404 чтоб отряжалась хорошо.
Brung
Brung 17.09.2015 00:232
0
Trantel, нет оно не адаптированное, нужно какие то стили медео прописывать специально под каждый модуль и задействовать весь сайт, хотел это дело изучить и на блогах есть информация, но не понять не чего, ставите это и будет отлично. Поставил и не чего не изменилось.
FeStemBer
FeStemBer 17.09.2015 00:353
0
А вы в поиск вбей те вил материала, который адаптирован под мобильные устройства, и не найдете не одного. Так как адаптация происходит на целом сайте. Хотя вот страница, 404 уже готорая и в коде видно, что прописаны стили на ее.
Kosten
Kosten 17.09.2015 00:464
0
Все правильно, работа едет по полному сайту, лично с этим видом, который на сайте, мне даже на блоге uCoz не помогли, а только дали код, который убирает лишнее. Пришлось идти на платный и заказывать, и то сделали как думал все, а проверил потом небольшие картинки, как AVA в PSD, что имеется раздел и он не был адаптирован и мне пришлось обратно обращаться.
Kvint
Kvint 17.09.2015 03:595
0
Не чего себе, зашел на сайт, де предлагают услуги, чтоб только один размер адаптировать, с меня запросили 250 рублей, я спрашиваю, а что уже за такие деньги все нельзя. Так еще должен в о череде простоять, занят он и у него заказ на 5 тыс, а тут всего 250, не как не в план не входит.
Nemoy
Nemoy 10.12.2015 02:546
0
Как изменить размер текст, и как сделать что бы описание файла было как на zornet
Kosten
Kosten 10.12.2015 02:597
0
lugep2011, как описание сделать, все просто, если каталог файлов, то писать краткое описание и оно потом появиться.
Kosten
Kosten 10.12.2015 03:008
0
А размер текста, надо стиль добавить или который отвечает за него, немного больше в CSS сделать.
Nemoy
Nemoy 10.12.2015 03:299
0
а как изменить размер изображение просто не могу найти в css
Kosten
Kosten 10.12.2015 03:5910
0
Точно не помню, так обвод на вид материалов делал сам, и нужно в коде посмотреть.
Kosten
Kosten 10.12.2015 04:0111
0
Шине точно не скажу не сделать, только длинна там установлена, но нужно установить и посмотреть.
А что размер такой не подходит?
Kosten
Kosten 10.12.2015 04:0912
0
Шире не мог сделать, просто нужно убирать обвод, хотя как помню делал, но пока сейчас выстави так.



Нужно ставить его на сайт и потом подгонять как вам нужно, и это в стилях, в коде пробовал, но почему то не чего не получилось.
avatar