Информация о фильме при наведение

1289
8.8 из 10
Проголосовало: 13






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

Установка:

1) Панель управления ---> Управление дизайном ---> Нужный модуль ---> В вид материалов, и вставляем куда нужно данный html-код:

Код

<div class="MiniPostDopInfo">  
  <a href="" class="pull-left popupinfo">Тут текст или иконка</a>  
  <div class="MiniPostDopInfoIcon">  
  <div class="MiniPostDopInfoForm">  
  <div class="b-pp_content_arrow_l"></div>  
  <div class="b-pp_content_arrow_r"></div>  
  <div class="MiniPostDopInfoContent">  
  <div class="DopInfoContentTitle">  
  <a href="$ENTRY_URL$">$TITLE$ </a>  
  </div>  

  <div class="DopInfoContentEx">  
  Режиссёр: $AUTHOR_NAME$  
  <div class="DopInfoContentRating"></div>  
  Премьера (мир): $OTHER2$  
  <div class="DopInfoContentRating"></div>  
  Опубликовано: $DATE$ в $TIME$  
  <div class="DopInfoContentRating"></div>  
  </div>  
  </div>  
  </div>  
  </div>  
  </div>


2) Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), и всамый низ вставляем данный css-код:

Код

.MiniPostAllForm{width:177px;height:400px;}  
  .MiniPostAllForm{width:177px;height:400px;}  
  .MiniPostAllFormDop{float:left;margin:0 10px;position:relative;}  
  .MiniPost{border:1px solid #F0F0F0;border-radius:5px;overflow:hidden;margin-bottom:3px;}  
  .MiniPost .MiniPostPoster img{display:block;width:177px;height:263px;}  
  .MiniPostName{margin-bottom:3px;}  
  .MiniPostName a{color:#31669B;text-decoration:none;font-size:13px;font-weight:normal;line-height:16px;}  
  .MiniPostName a:hover{text-decoration:underline;}  
  .MiniPostInfo{margin-bottom:3px;line-height:14px;}  
  .MiniPostInfo a{text-decoration:none;line-height:14px;font-size:11px;color:#848484;}  
  .MiniPostInfo a:hover{text-decoration:underline;}  
  .MiniPostAllForm .MiniPostDopInfo{display:none;background:rgba(0,146,219,1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:8px 0 0 140px;position:absolute;height:27px;width:27px;}  
  .MiniPostAllForm:hover .MiniPostDopInfo{display:block;}  
  .MiniPostDopInfo:hover{background:rgba(0, 0, 0, 0.8);}  
  .MiniPostDopInfo .MiniPostDopInfoForm{border-radius:3px;display:none;position:absolute;padding:5px;background:rgba(0, 0, 0, 0.35);margin:29px 0px 0px -60px;width:400px;z-index:9999999999;}  
  .MiniPostDopInfo:hover .MiniPostDopInfoForm{display:block;}  
  .MiniPostDopInfo:hover .revers{margin:-9px 0px 0px -511px !important;}  
  .revers .b-pp_content_arrow_l{background:#f60;display:none !important;}  
  .b-pp_content_arrow_r{display:none;}  
  .MiniPostDopInfoContent{background:rgba(255,255,255,1);padding:20px 20px 0px 20px;}  
  .MiniPostDopInfoContent > a{float:right;width:116px;height:26px;overflow:hidden;}  
  .MiniPostDopInfoContent > a img{margin: 0 0;}  
  .MiniPostDopInfoContent > a img:hover{margin:-26px 0 0;}  
  .ModalWindowsClickForm{display:none;}  
  .MiniPostAllForm:hover .ModalWindowsClickForm{display:block;cursor:pointer;float:right;position:relative;margin:-226px 8px 0 0;width:27px;height:27px;background:rgba(0,146,219,1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}  
  .MiniPostAllForm .ModalWindowsClickForm:hover{background:rgba(0, 0, 0, 0.5);}  
  .kp_imdb{width:454px;height:42px;}  
  .kp_imdb_full{width:225px;height:85px;margin:0 37px 0px;}  
  .in_kp_imdb{width:225px;height:41px;padding:0px 0px;float:left;}  
  .in_name{width:225px;height:15px;margin:22px 0 0 0;text-align:center;}  

  .DopInfoContentTitle{display:block;margin:0 10px 8px 0;line-height:15px;font-size:16px;font-weight:normal;color:#363636;}  
  .DopInfoContentEx {margin-bottom:8px;color:#959595;}  
  .DopInfoContentEx a{color:#959595;}  
  .DopInfoContentText{margin-bottom:8px;line-height:18px;font-size:12px;color:#292929;}  
  .DopInfoContentRating{padding-top:8px;border-top:4px solid #F2F2F2;color:#292929;}  

  .RelatedFormTitle{margin:30px 0 6px 0;padding:0;font-size:16px;font-weight:bold;width:688px;float:right;}  

  .MiniPostAllFormRelated{width:142px;height:250px;float:right;margin:0 30px 0 0;}  
  .MiniPostRelated{border:1px solid #F0F0F0;border-radius:5px;overflow:hidden;margin-bottom:3px;}  
  .MiniPostRelated .MiniPostPosterRelated img{display:block;width:140px;height:198px;}  
  .MiniPostNameRelated{margin-bottom:3px;}  
  .MiniPostNameRelated a{color:#31669B;text-decoration:none;font-size:13px;font-weight:normal;line-height:16px;}  
  .MiniPostNameRelated a:hover{text-decoration:underline;}  

  .ContentShowfull{padding:0 !important;width:100% !important;}  

  .popupinfo {  
  position: absolute;  
  }


готово!
Автор публикации: Загрузка
Загрузка
fabio_coentrao, это его n материал
Источник: http://kinowa.at.ua
  • Всего комментариев: 5

BilNoob
0
BilNoob написал: в материале Написано 21 Декабря 2015 в 16:27
Комментарий №3
Подскажите как мне это сделать на моём сайте

Вовчик
0
Вовчик написал: в материале Написано 21 Декабря 2015 в 17:39
Комментарий №4
руками

vover6
0
vover6 написал: в материале Написано 21 Декабря 2015 в 18:28
Комментарий №5
Берешь и вставляешь :3

Betme
+1
Betme написал: в материале Написано 28 Ноября 2015 в 10:25
Комментарий №1
было бы не плохо если - сам вид материалов для фильмов сделать красиво, удобно современно! Этого и не хватает!

fabio_coentrao
0
fabio_coentrao написал: в материале Написано 28 Ноября 2015 в 13:54
Комментарий №2
Будет Вам вид материалов но позже smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 433
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • dalamkontak написал:
  • Попробуйте социальную сеть Dalam Kontak !
    Сайт сети: Dkon.app
  • mrnoobsky написал:
  • Это моя работа, которая велась давольно таки давно smile Времени было мало, поэтому я скачал полностью все, что было и сделал архив happy
  • Snoopak написал:
  • 111 мегабайт? wtf? Что в архив напихали?
  • mrnoobsky написал:
  • Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
  • geleson2222 написал:
  • ?
    Последние темы
    Опрос
    541
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей:
    • Обратная связь
    • Правила
    • RSS
    • +18
    • Мобильная версия
    • Хостинг от uCoz
    • Хостинг от uCoz
    • Copyright - webo4ka.ru © 2010-2025 г.
    • Design by Вовчик
      Администратор:)