» »

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

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

Это полностью адаптированный под мобильные аппараты вид материала на кино сайт, также вы можете его поставить на другую тематику. Его создал с нуля пользователь Angerfist и также адаптировал под разные размеры монитора и сейчас он установлен на сайте KinoVego.Ru, что является площадкой онлайн просмотра. Здесь нужно сказать, что он отлично подходит на плоские шаблоны, что идут от конструктора. Вы можете менять как оттенок цвета, что об этом позже рассмотрим.

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

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

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

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

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

Так примерно смотреться будет светлый дизайн, просто поменял оттенок, стили на его в текстовом документе.

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

Этот код под вид материала:

Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="Фильм $TITLE$" class="leftimg"></a>$MESSAGE$</div><?endif?>  
<div class="eDetails" style="clear:both;">
<div style="float:right"><a href="$ENTRY_URL$" class="button24"><font color="#fff">Читать дальше</font></a></div>  
<?if($CATEGORY_NAME$)?><a class="e-category" href="$CATEGORY_URL$">$CATEGORY_NAME$</a><span class="ed-sep"> | </span><?endif?>
<span class="e-reads"><span class="ed-title">Просмотров:</span> <span class="ed-value">$READS$</span></span><span class="ed-sep"> | </span>

<?if($USERNAME$)?><span class="e-author"><span class="ed-title">Добавил:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USERNAME$</a></span></span><span class="ed-sep"> | </span><?endif?>
<span class="e-date"><span class="ed-title">Дата:</span> <span class="ed-value" title="$TIME$">$DATE$</span></span>
<?if($COMMENTS_URL$)?><span class="ed-sep"> | </span><a class="e-comments" href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>
</div></td></tr></table>


CSS:

Код
.leftimg {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  
}
.leftimg:hover {
opacity: 0.6;  
}

/* Кнопка
  ------------------------------------------*/  
a.button24 {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .2em 1em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #D4A641 #464343 #775918;
  border-radius: 6px;
  background: linear-gradient(#FF9E03, #504611) #966A22;
  transition: 0.2s;
}  

a.button24:hover {background: linear-gradient(#8A6A1F, #C58A2D) #C19527;}
a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }  
#content fieldset {border:1px solid #dbe1e8;padding:20px;margin: 0 0 20px;}
#content .calTable {width:70%;margin:0 0 30px;}
#content.wide-page {float:none;width:auto;}
#casing label {color: #7D8086!important;}  

.eBlock {border-spacing:0;margin: 0 0 20px;padding: 0 0 12px;border-bottom: 2px solid #A0A0A0;clear:both;table-layout: fixed;}
.eBlock + br {display:none;}
.eBlock + table {margin:40px 0 0;border-spacing:0;}
.eBlock + table td[width="60%"] {font-size:18px;padding:0 0 20px;font-family:'PT Sans';}
.eBlock td {padding:0!important;}
.eTitle {padding:0!important;font-size: 19px;color: #FFFFFF;font-family: tahoma;/* font-weight: bold; */text-shadow: 0 1px 0 #383737;}
.eTitle a {color: #C0F1FF;text-decoration:none;/* font-weight: bold; */font-size: 20px;font-family: tahoma;}
.eTitle a:hover {color: #78C6F5;}
.eTitle div[style^="float:right"] a {font-size:inherit;}
.eDetails,.eDetails1,.eDetails2{clear:both;font-size:12px;padding:7px 0!important;color:#939fae;margin:10px 0 0;line-height:170%;}
.eDetails ul,.eDetails1 ul,.eDetails2 ul {line-height:normal;}
.eBlock .eDetails,.eBlock .eDetails1,.eDetails2 {padding:7px 0!important;margin:10px 0 0!important;}
.eDetails a,.eDetails1 a,.eDetails2 a {text-decoration:none;color:#939fae;}
.eDetails a:hover,.eDetails1 a:hover,.eDetails2 a:hover,.eDetails .ed-value:hover,.eDetails1 .ed-value:hover,.eDetails2 .ed-value:hover {color:#3498db;}
.e-category,.e-comments {background:url(/.s/t/1321/details.png) 0 -500px no-repeat;padding:0 0 0 20px;margin:0 10px 0 0;display:inline-block;line-height:15px;}
.e-category:hover {background-position:-1000px -500px;}
.e-reads,.e-loads,.e-author,.e-date,.e-rating,.e-add,.e-tags {background:url(/.s/t/1321/details.png) 0 0 no-repeat;padding:0 0 0 20px;margin:0 10px 0 0;display:inline-block;height:15px;line-height:15px;}
.e-reads {background-position:0 0;}
.e-reads:hover {background-position:-1000px 0;}
.e-loads {background-position:0 -400px;padding:0 0 0 14px;}
.e-loads:hover {background-position:-1000px -400px;}
.e-author {background-position:0 -100px;padding:0 0 0 16px;}
.e-author:hover {background-position:-1000px -100px;}
.e-date {background-position:0 -300px;padding:0 0 0 20px;}
.e-date:hover {background-position:-1000px -300px;}
.e-comments {background-position:0 -200px;}
.e-comments:hover {background-position:-1000px -200px;}
.e-rating {background-position:0 -600px;padding:0 0 0 20px;}
.e-rating:hover {background-position:-1000px -600px;}
.e-add {background-position:0 -700px;padding:0 0 0 20px;}
.e-add:hover {background-position:-1000px -700px;}
.e-tags {background-position:0 -800px;padding:0 0 0 20px;}
.e-tags:hover {background-position:-1000px -800px;}
.ed-sep,.ed-title {display:none;}
.eBlock td.eMessage,.eBlock td.eText {padding:10px 0 20px!important;}
.eMessage,.eText {margin:0;padding:20px 0 10px!important;line-height:120%;text-align:justify!important;}
.eMessage img,.eText img {width:177px; height:230px;float:left;margin: 5px 10px 5px 0!important;border: 3px solid #7F8E96;border-radius: 2px;}
.eMessage p,.eText p {margin:0;padding:0 0 5px 0; overflow: hidden;}
.eMessage,.eText,.cMessage {word-wrap: break-word;}


Если эти стили добавите, то здесь оттенок цвета можно вывести:

Код
#content {float:left;width:72%;background: #151b23;padding:20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius: 0px 0px 5px 5px;3px3px3px3px}


Хотя у вас должны стили по умолчанию свои идти, но если вы не сможете поменять гамму цвета, то можете этот добавить и с ним работать, это просто на всякий случай, возможно пригодиться. Что на главном изображение идет, так он здесь добавлен, что на светлом представлен, как как его убрал и появился светлый вид/
19.02.2017 Загрузок: 7 Просмотров: 937 Комментарий: (11)

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

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

Комментарий: 11
Сопрано
Сопрано 19.02.2017 23:591
0
Как в одном мультфильме, вот это поворот, что это заставило раздавать дизайн с кино сайта, там то он настроен хорошо и как помню его делал с нуля Angerfist. Темный видно настроен, но светлый нужно еще по цветам пройтись и кнопка желтая не в тему, но если такого цвета нет на сайте.
Kosten
Kosten 20.02.2017 00:062
0
Как то писал, что весь шаблон скину, но просто времени нет, надо все копировать. А здесь увидел, что человеку нужен вид материала, вот и решил с него начать, просто все сделано и ставил на тестовый сайт, изображение светлое с него и проверял на адаптивность, все отлично формирует под любой мобильный аппарат или монитор.
FeStemBer
FeStemBer 20.02.2017 00:273
0
Сейчас вот простой на стилях вид материала востребован, и возможно поменяю, но дело в том, что правильно подчеркнуто, он подойдет под любую тематику. Поставил на игровой сайт и сделал окно намного меньше, все как родной.

Но мне нужен светлый и здесь он хорошо адаптирован, но вот что в низу стиль, там немного замутился, просто адаптация есть, но она не с конструктором пошла, но потом один стиль убрал, как раз его, и все по месту автоматически стало, за вид материала благодарен.
Kosten
Kosten 20.02.2017 00:415
0
Но если его реформировать, и поменять кнопку и в место ее рейтинг поставить, потом немного сменить обвод и уже стилистика изменится а за ней дизайн.

Все правильно, его делал Angerfist, как создан был сайт, то там был простой, что идет по умолчанию, потом Angerfist вывел изображение, вообщем полностью настроил, только сделал со своей стороны этот обвод, с этого сайта взял и посчитал что кнопка яркая на далее на открытие не помешает.
tsakonter
tsakonter 20.02.2017 00:518
0
Так чем проще тем понятнее, просто это года 3 назад все ставили еще рисованные и там смотрелись они, что теперь плоский дизайн просто на высоте.
Сафрон
Сафрон 20.02.2017 00:344
0
Но если так посудить, то этот вид материала не чем не отличается по дизайн, что стоит на сайте здесь, а вот по коду, то большое различие. Сейчас они все похоже, только отличает их адаптивность и не более.
Kosten
Kosten 20.02.2017 00:416
0
Так потому их адаптировать легче, по дизайн похоже, но по коду нет, возможно сам потом поставлю на этот сайт.
tsakonter
tsakonter 20.02.2017 00:507
0
Сейчас основном вид материала сами пишут, за основу берут стандартный, там и операторы все уже поставлены, остается изображение поставить, здесь еще и цвет прикрутить.
Советник
Советник 20.02.2017 00:579
0
Когда ожидать следующего пассажа на вид материала и комметариев к нему, здесь лучше сразу скинуть весь сайт. Там один модуль активирован и большене чего.
Сопрано
Сопрано 20.02.2017 02:4110
0
А здесь еще идет и цвет на шрифт по стилям, так можно вывести какой то шрифт и поставить оттенок, это к описанию краткому.
1 2 »
avatar