Вид материала кино сайта uCoz от Angerfist
 | |
| Это полностью адаптированный под мобильные аппараты вид материала на кино сайт, также вы можете его поставить на другую тематику. Его создал с нуля пользователь Angerfist и также адаптировал под разные размеры монитора и сейчас он установлен на сайте KinoVego.Ru, что является площадкой онлайн просмотра. Здесь нужно сказать, что он отлично подходит на плоские шаблоны, что идут от конструктора. Вы можете менять как оттенок цвета, что об этом позже рассмотрим. Здесь окно под изображение создано под афишу фильма, в стилях вы настраиваете по размерам такое как вы видите на своей интернет площадке. Здесь идет темный обвод, но настроено на темный дизайн, под светлый нужно опять гамму цвета менять. Так что при установке вам придется с ним поработать, а точнее просто вывести как цвет или размер на ваш ресурс. Сама название и изображение с эффектом, если на картинке есть затемнение, то в название идет просто по наведению клика смена оттенка. Потом была добавлена кнопка, но просто сделана под функцию далее и на желтый цвет, так как он с темным сочетается, и здесь вы можете изменить гамму или просто убрать эту функцию. Там эффект красивый выставлен, что при наведение на ее она прогибается. Все иконки стоят стандартные от системы, которые прописаны в стилях, вы можете просто в CSS убрать и что то оригинальное установить, но не забываем, что вид материала также нужно делать изменение, здесь оставить как есть актуально. Вам будет предоставлена 2 вида, это светлый и темный, просто под темный идет в материале, а под светлый вы можете скачать в самом архиве, что перекреплен к этому материалу. Модерн кнопка установлена на самом виде, параллельно с названием только они разбросаны по обои стороны. Так все очень сделано понятно, не чего лишнего в нем нет и как уже говорилось, тематика у этого вид материала очень большая, просто не исключаю, что его красиво можно настроить на портал, где софт будет размещаться. Но главное все настраивается и редактируется и можно из него сделать что то свое оригинальное. Приступаем к установке: Так примерно смотреться будет светлый дизайн, просто поменял оттенок, стили на его в текстовом документе.  Этот код под вид материала: Код <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} Хотя у вас должны стили по умолчанию свои идти, но если вы не сможете поменять гамму цвета, то можете этот добавить и с ним работать, это просто на всякий случай, возможно пригодиться. Что на главном изображение идет, так он здесь добавлен, что на светлом представлен, как как его убрал и появился светлый вид/ | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
|
| |
| 1 2 » | |
