ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Каркас с переключателем фильмов для uCoz

Каркас с переключателем фильмов для uCoz

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

И там само нутро, где будем ставить фильмы:

Код

CSS:

Код

/* TabControl Start */
p {padding: 7px 0;}
.sectiontable {
  width: 100%;
  margin: 10 0 30px;
}
ul.tabs {
  height: 34px;
  padding:0px 0 5 0px;
line-height: 25px;
  list-style: none;
}
.tabs li {
  float: left;
  display: inline;
  margin: 0 3px -1px 0;
  padding: 0 13px 1px;
border-radius:4px;
  color: #8EFFFB;
  cursor: pointer;
  background: #121212;
  border: 1px solid #E4E4E4;
  border: 1px solid #5E5E5E;
  position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
  color: #FFF;
  padding: 0 13px;
  background: #21585C;
  border: 1px solid #666555;
}
.tabs li.current {
color: #FFFAA5;
  background: #3C9CB9;
  padding: 0 13px 2px;
  border: 1px solid #3C9CB9;
}
.box {
  display: none;
  border-radius: 3px;
  border: 1px solid #E4E1E1;
  border-width: 0 1px 1px;
  background: #DEDDDD;
}
.box.visible {
  display: block;
}
.section.vertical {
  width: 440px;
  border-left: 160px solid #FFF;
}
.vertical .tabs {
  width: 160px;
  float: left;
  display: inline;
  margin: 0 0 0 -160px;
}
.vertical .tabs li {
  padding: 0 13px;
  margin: 0 0 1px;
  border: 1px solid #E4E4E4;
  border-right: 1px solid #F9F9F9;
  width: 132px;
  height: 25px;
}
.vertical .tabs li:hover {
  width: 131px;
}
.vertical .tabs li.current {
  width: 133px;
  color: #444;
  background: #EFEFEF;
  border: 1px solid #D4D4D4;
  border-right: 1px solid #EFEFEF;
  margin-right: -1px;
}
.vertical .box {
  border-width: 1px;
}
/* TabControl End */

Там по умолчанию стоит под 2 плеера, можно скопировать и ниже поставить третий и по верх также копируем и пишем к примеру трейлер к фильму, не чего сложного нет. С начало стили прописываем а потом ставим саму систему где ваши плееры прописаны и нужно только под Панель HTML кодов устанавливать.

31 Октября 2015 Просмотров: 2157 Комментариев: (14)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 14
Порядок вывода комментариев: Сопрано 31 Октября 2015 20:54¹ 0 А что решил перейти на светлый дизайн, это же cstavr, темный больше нравился, и как видно забили на него, что то не понятно. Kosten 31 Октября 2015 20:55³ 0 Светлый больше нравиться. Сопрано 31 Октября 2015 20:59⁴ 0 Но видно что все изменилось, возможно как то стильный стал, а что с посещаемостью, она упала, из за смены шаблона. Kosten 31 Октября 2015 21:04⁵ 0 Вы что на приколе, давно его отдал, не пишите в личку за сколько продал, так как такой же сайт есть и не знаю ему цену, в моем случай он был подарен и не знаю какие там расценки, меня это в последнее очередь беспокоит. Только по теме. Kosten 31 Октября 2015 20:55² 0 Да, забыл сказать, шрифт будет у вас такой какой на сайте. Kosten 22 Мая 2016 15:05⁶ 0 Так как был светлый шаблон и потом перешел на темный, то и пришлось сам каркас по плеер менять, и все сменил, так как стили идут и с ними это получилось быстро и красиво. Сопрано 22 Мая 2016 15:07⁷ 0 Но по названию сериала видно, что второй шанс дан сайту.))) Шарлотка 17 Октября 2018 23:24⁸ 0 Здравствуйте. Скажите пожалуйста как мне поменять или убрать белый цвет? Куда там надо сделать замену? Заранее благодарю. Белые поля около плеера. Kosten 17 Октября 2018 23:59⁹ 0 Это обвод, что сделан для красоты, в стилях находим border-radius:4px; и выставляем на ноль -0 или вообще убираем элемент стиля. DESTEQ 18 Октября 2018 08:12¹⁰ 0 Чтобы убрать белый фон и рамку вокруг плеера: Замените в стилях это: Код .box { display: none; border-radius: 3px; border: 1px solid #E4E1E1; border-width: 0 1px 1px; background: #DEDDDD;} На это (полностью без фона и рамки): Код .box {display:none;} С рамкой, но без фона: Код .box {display:none; border-radius: 3px; border: 1px solid #E4E1E1; border-width: 0 1px 1px;} Шарлотка 18 Октября 2018 09:01¹¹ 0 Спасибо большое. Супер получилось, но только сейчас видны только кнопки, плеер появляется только при нажатии на одну из этих кнопок. Может так и должно? Афона белого теперь нет. Шарлотка 18 Октября 2018 09:16¹² 0 Все, получилось. Я просто не скопировала закрытую скобку при копировании не прихватила. Оболденно получилось. У меня возник еще один вопросик. Я не поняла куда и как скопировать, чтобы поставить еще одну кнопку для 3 плеера. Kosten 18 Октября 2018 11:14¹³ 0 Изначально добавляем название и место под плеер, за него класс box, как и за второй и после него последующие. Код <script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Frank/tables.js"></script> <div class="sectiontable" id="multmult"> <ul class="tabs"> <li class="current">Первый плеер</li> <li>Второй плеер</li> <li>Трейлер</li> </ul> <div class="box visible"> Код плеера </div> <div class="box"> Код плеера 2 </div> <div class="box"> Код Трейлер </div> </div>
1 2 »