» »

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


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

Вот наткнулся на один скрипт, который смотрится очень просто и пришлось скрипту Вид материала для сайта кино онлайн системы uCoz, немного нарастить мускул, а точнее добавить дизайна. Что первое встретил, его нужно самому подгонять по размеру под ваш ресурс, он автоматически не стает. Но это всего лишь сделать или сменить 3 размера в стилях, что потом ниже укажу. Сделал ему кнопку, чтоб переходить на основной плеер а также рамку красивую вокруг самой картинки и уже вид совершенно другой.

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

Установка:

Что касается подгонки по размеру, то в начале стилей стоит width:768px - это вы делаете шире основу. Дальше вам останется сделать правей или левей кнопку и функций, все это делается в CSS ниже.

Ставим там где хотите видеть и на каком модуле вид материала:

Код
<div class="cell-news">  
  <div class="cell-news-l">  
<div id="ugolkrug"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$"><?endif?><?endif?></div>  
  <p> <div class="cell-news-rating left">  
  <div class="left"><?if($RATING$)?><?$RSTARS$('16','http://zornet.ru/SKRIPT/dsar/trend/rating_star_01.png','1','float')?><?endif?></div>  
  <div class="cell-news-rating-os right">$RATING$</div>  
  </div></p>
  </div>  
  <div class="cell-news-r">  
  <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>  
  <div class="cell-news-top">
  <span class="right">  
  <b>Дата</b> <img src="http://zornet.ru/SKRIPT/dsar/trend/YeHP9TI.png" alt="дата" /> <b>$DATE$</b> |  
  <b>Просмотров</b> <img src="http://zornet.ru/SKRIPT/dsar/trend/fon_img_glaz.png" alt="просмотров" /> <b>$READS$</b> |  
  <b>Комментарии</b> <img src="http://zornet.ru/SKRIPT/dsar/trend/fon_img_coment.png" alt="комментарии" /> <b>$COMMENTS_NUM$</b>
<span><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></span>  
  </span>  
  </div>  
  <p class="cell-news-center"><?if($MESSAGE$)?>$MESSAGE$<?endif?></p>  
  <div class="cell-news-bottom">  
<span class="left"><?if($CATEGORY_NAME$)?>Рубрика: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?endif?></span>  
<a class="button24" title="Подробнее о $TITLE$" href="$ENTRY_URL$" style="float: right;"><span>Подробнее</span></a>
  </div>  
  </div>  
  </div>  

<style>  
#ugolkrug{
  width:170px; /* Длина фигуры */
  height:230px; /* Высота фигуры */
  color: #0000; /* цвет текста */
  background:#48ADF1; /* фон блока */
  border: 1px #CCCCCC solid; /* стили рамки */
  -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
  -webkit-border-radius: 10px; /* закругл. для старых Chrome и Safari */
  -khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
  border-radius: 10px; /* закругление углов для всех, кто понимает */
  padding: 5px; /* внутренние отступы */
}
   
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: #FDBE33 #000 #D77206;
  border-radius: 4px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
}  
a.button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
</style>


В любое место CSS можно в самый низ, конфликтовать не будет.

Код
/* Вид новостей zornet.ru сайтов на uCoz  
------------------------------------------*/  
.cell-news {  
  float:left;  
  width:768px;  
  margin-bottom: 15px;  
  background: #fff;  
  border-radius:3px;  
  padding: 15px 15px 15px 15px;  
  border: 1px solid #34B6DB  
}  

.cell-news-l {  
  float:left;  
  width:180px;  
  margin-right: 15px;  
}  

.cell-news-r {  
  float:left;  
  width:375px;  
}  

.cell-news-l-img {  
  width:180px;  
  height:230px;  
  margin-bottom: 5px;  
  border-radius:3px;  
}  

.cell-news-rating {  
  width:100%;  
}  

.cell-news-rating img{  
  margin-top: 2px;  
}  

.cell-news-rating-os{  
  margin-left: 10px;  
  background: #8EC98C;  
  padding: 3px 10px 3px 10px;  
  text-shadow: 1px 1px 1px #469943;  
  font-weight: bold;  
  color:#fff;  
  border-radius:3px;  
}  

.cell-news-r h2 {  
  margin:0;  
  float:left;  
  width:153%;  
  padding-bottom: 10px;  
  border-bottom: 1px solid #D6D6D6;  
  font: 125% Verdana,Arial,Helvetica, sans-serif;  
  font-weight: 700;  
}  

.cell-news-top{  
  float:left;  
  width:153%;  
  padding: 5px 0px;  
  border-bottom: 1px solid #D6D6D6;  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  color:#999;  
}  

.cell-news-center{  
  float:left;  
  width:153%;  
  margin:0;  
  min-height: 163px;  
  padding: 10px 0px;  
  border-bottom: 1px solid #D6D6D6;  
  font:11px 1.5 Verdana,Arial,Helvetica, sans-serif;  
  text-align:justify;  
}  

.cell-news-bottom{  
  float:left;  
  width:150%;  
  font-weight: bold;  
  padding: 10px 0px 0px 0px;  
}  

.left {float:left;}  
.right {float:right;}


На этом все!

Забыл показать где будет модерн панель.

12.08.2015 Просмотров: 862 Комментарий: (12)

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

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

Комментарий: 12
ZruBkul
ZruBkul 05.09.2015 19:051
0
Но можно кнопку убрать и с ней стили которые идут виде материала, не чего она сейчас не дает, кроме дизайна.
Kosten
Kosten 05.09.2015 19:262
0
Нормальный вид, только вот под мобильные устройство не был проверен.
Kvint
Kvint 06.09.2015 02:023
0
Вот когда сам создаешь и тем ты учится, это практика и потом можео что то по серьезней сделать. Хотя здесь уже готовый код был как понимаю и на его навесили гирлянд, чтоб красивей был.
Kosten
Kosten 06.09.2015 02:134
0
Вид с кино сайта и старался его сделать под софт а значит это много бы по тематике кому подошло.
videokinozal
videokinozal 24.01.2016 20:275
0
Доброго всем времени суток! Спасибо за скрипт. Всё установилось. Работает. Единственное, что не получается - это занести информацию в середину блока (жанр,страна, год выпуска и т.д.). Занимаюсь созданием сайта на ucoz 4-й день, возможно, что-то не серьезное спрашиваю, но всё же может кто-то подскажет? Перепробовал уже все настройка в ПУ, в таблице стилей CSS и в виде материалов каталога файлов. Разные значения там пробовал менять - результат НОЛЬ.
Kosten
Kosten 24.01.2016 20:556
0
Здесь жанр и все остальное прописано в кратком содержание и потому так получилось на изображение.
AnTron
AnTron 24.01.2016 21:027
0
Для системы юкоз не разу не встречал такой вид материала, но не исключаю, что он есть.
videokinozal
videokinozal 24.01.2016 22:058
0
Kosten, я пытался прописать в кратком содержание, но запись всегда выходит за нижнюю черту, а середина всегда остается пустой.
Kosten
Kosten 24.01.2016 22:359
0
Не знаю, у меня нормально получилось!
Можно описание заключить в

Код
<p>Описание</p>


Но также еще смотря как прописываете, через BB коды или Панель HTML кодов.
Сафрон
Сафрон 24.01.2016 22:4410
0
Но плеер, если у вас кино сайт, то думаю вы работаете на Панель HTML кодов просто на BB кодах может все полететь.
videokinozal
videokinozal 25.01.2016 01:3511
0
Всем спасибо за ответы! Получилось! В кратком описании заменил переводы строк тегом <BR>, отключив при этом HTML теги.
Kosten
Kosten 25.01.2016 01:5312
0
videokinozal, с чем вас и поздравляю, так как этот вид материала нашел в неприличном состояние и пришлось его восстановить и свое добавить.
avatar