» »

Вид материалов файлов kinovego для uCoz

Вид материалов файлов kinovego для uCoz

Красиво сделанный вид материалов сайта kinovego для uCoz. Который идет под кино сайт, но здесь конструкция позволяет на другую тему. Так как это вид по конфигураций создан просто и красиво и идет в темном оттенке цвета, где можно изменить и настроить под свою гамму. У него красивые и уникальные кнопки с иконками под различные функций. Также установлена широкая кнопка на функцию перехода на основной материал или как основном пишут "смотреть дальше" где производится по клику переход. С правой стороны будет стоять изображение и настроено под афишу, если другая площадка, то стоит только поменять размеры в стилях.

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

Проверяя его на тестовом сайте, хотя он установлен на сайте и отлично работает и выводит. но нужно было стили на его вывести. То когда заливал материал и краткого описание не было, то он автоматически меньше по ширине был и в стилях этот элемент не прописан, но когда вы напишите примерно 100 - 120 знаков, но это обязательно нужно, то все встает на свое место.

Полностью настраивал модератор First, что можете посмотреть демонстрацию, что будет представлена.

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

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

Вид материала:

Код
<div class="shorts-film">
  <div class="shorts-img" style="height: 28px;">
<div class="shorts-img-over">
<div class="article-favorite"></div>
<a href="$ENTRY_URL$" class="ulightbox" target="_blank"><img src="$IMG_URL1$" alt="$TITLE$" ></a>
  </div>
  </div>
  <div class="shorts-in">
  <div class="shorts-over">
  <div class="shorts-title"><a href="$ENTRY_URL$">$TITLE$</a><div style="float:right;">$MODER_PANEL$</div> </div>
  <div class="shorts-text">
<br>  
$MESSAGE$
</div>
</div>
<div class="article_counters">  
  <span class="dats">$DATE$</span>  
<a href="/index/8-1" target="_blank"><span class="user ifnot-mob">$USERNAME$</span></a>  
  <span class="views">$READS$</span>  
<a href="$COMMENTS_URL$"><span class="coms">$COMMENTS_NUM$</span></a>  
  <div class="shorts-open"><a href="$ENTRY_URL$">Смотреть онлайн</a></div>
</div>
  </div>  
</div>

Стили в CSS:

Код
/*============================*/
.article_counters {
  margin-bottom: 10px;
}

.article_counters .dats {
  background: url('http://zornet.ru/zorner_ru_1/ABVUSA/Clock-01-16.png') 0px 0px no-repeat;
  padding-left: 20px;
}

.article_counters span {
  display: inline-block;
  margin-right: 10px;
}
.article_counters .user {
  background: url('http://zornet.ru/zorner_ru_1/ABVUSA/User-16.png') 0px 1px no-repeat;
  padding-left: 20px;
}
.article_counters .views {
  background: url('http://zornet.ru/zorner_ru_1/ABVUSA/3D-Glasses-16.png') 0px 1px no-repeat;
  padding-left: 20px;
}
.article_counters .coms {
  background: url('http://zornet.ru/zorner_ru_1/ABVUSA/Messages-Information-16.png') 0px 1px no-repeat;
  padding-left: 20px;
}
/*==============================*/  

.shorts-film{background: #0F1117;display:table;width:auto;display:inline-block;float:left;padding:5px 5px 10px 5px;position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin-bottom:10px;}
.shorts-img{display:table-cell;vertical-align:top;width:220px;}
.shorts-img img{width:100%;height:100%;vertical-align:bottom;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.shorts-img .shorts-img-over{width:200px;height: 283px;overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top: 5px;margin-left: 5px;}
.shorts-in{display:table-cell;vertical-align:top;padding-right:20px;}
.shorts-title{padding-bottom:0px;}
.shorts-title a{color:#fff;font-size: 18px;/*font-weight:bold;*/}
.shorts-date{padding-bottom:7px;font-size:12px;color:rgba(255,255,255,0.5);}
.shorts-text{color:#969696;}
.shorts-over{height:251px;overflow:hidden;}
.shorts-open{/* position:absolute; */bottom:12px;width:150px;float: right;}
.shorts-open a, .shorts-open a:hover{display:block;padding:7px 14px;background:#34495E;color:#fff;text-align:center;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.shorts-open a:hover{text-decoration:none;background: #2c3544;}

Этот вид установлен на сайте Kinovego.Ru, что можете посмотреть визуально как он будет смотреться на сайте.
30.07.2017 Просмотров: 476 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 30.07.2017 02:261
0
Чтоб не забыть, то изначально не мог по запросу найти старый вид материалов, что можете сравнить и посмотреть какой больше подходит. Что полностью его создал Angerfist с нуля и получилось оригинально, хотя структура близка друг другу.
trem200
trem200 30.07.2017 02:352
0
Да вид материала хороший, а kinovego вроде твой сайт?
Kosten
Kosten 30.07.2017 02:383
0
Мы с First его ведем, он отвечает за функциональность, с моей стороны контент. Это вообще бывший сайт CSTAVR, просто домен сменили и дизайн.
trem200
trem200 30.07.2017 02:444
0
В общем отлично сайт смотрится
Kosten
Kosten 30.07.2017 02:495
0
Но и полностью занимался First, и адаптировал его под мобильный. Вот вид материала залил. но он не адаптивный, так как надо было стили, что ставятся под адаптивность найти, но думаю кому нужно, то шаблон установлен и найдет.
Critic©
Critic© 05.08.2017 18:376
0
Смотрится вполне годно, хоть и стандартный вид, но под кино онлайн, то что нужно, и вообще больше такой вид понятнее, чем просто в колонку сделано.
Kosten
Kosten 05.08.2017 20:597
0
Но а как ты хотел, можно сказать ручная работа, что как описал, можно подогнать и делать под любую гамму цвета. Это больше всего темный оттенок, так как по умолчанию темно синий установлен.
avatar