PERO-GAMING.RU:Игры,видео,обзоры,гайды,D2,CS:GO,СS.1.6

Вид информера онлайн кинотеатра

ainur4ik — Mon, 27 Jan 2014 11:49:40 GMT

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

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

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

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

[greentable]

$TITLE$

[/greentable]
После чего, в CSS вставляем данные стили

[yellowtable].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;
}[/yellowtable]

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

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

[redtable]h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}
.image {
position: relative;
width : 100%; /* for IE 6 */
} [/redtable]

Кот на сайт для uCoz

ainur4ik — Mon, 27 Jan 2014 11:47:01 GMT

Появление персонажей на сайте – не редкость, особенно популярно украшать сайты кошками, которые следят за перемещением курсора, а некоторые даже пытаются поймать курсор. Был у нас и такой. Этого кота можно установить на любой сайт, сделанном на uCoz. Он будет скромно наблюдать за действиями пользователей на сайте. Когда пользователь наведет курсор на кота, он будет застенчиво улыбаться и смотреть вверх.
Установка

Вставьте в Нижнюю часть сайта или в любой другой глобальный блок

скрип:
[redtable]

[/redtable]
в css:
[yellowtable]#cat {
position: fixed;
right: 80px;
bottom: 0;
width: 146px;
height: 55px;
}
#cat:hover .cat-itself {
height: 103px;
}
#cat:hover .cat-eye {
display: none !important;
}
.cat-paws {
position: absolute;
right: 0;
bottom: -4px;
width: 132px;
height: 33px;
z-index: 2;
background: url(http://pnghosts.ru/img/cat-paws.png) no-repeat right bottom;
}
.cat-itself-wrap {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.cat-itself {
position: absolute;
left: 0;
bottom: 0;
width: 125px;
height: 55px;
z-index: 0;
background: url(http://pnghosts.ru/img/cat-itself.png) no-repeat;
-webkit-transition: all 0.1s 0.1s ease-out;
transition: all 0.1s 0.1s ease-out;
}
.cat-eye {
position: absolute;
display: none;
width: 28px;
height: 28px;
background: url(http://pnghosts.ru/img/cat-eye.png);
}
.cat-eyeball {
position: absolute;
left: 7.5px;
top: 7.5px;
width: 13px;
height: 13px;
background: url(http://pnghosts.ru/img/cat-eyeball.png);
}
#cat-eye-left {
left: 25px;
top: 23px;
}
#cat-eye-right {
left: 74px;
top: 26px;
}[/yellowtable]

Прозрачный админбар

ainur4ik — Wed, 28 Aug 2013 20:08:42 GMT

Код

/* Прозрачный Админ - Бар */
  .cuzadpn {background:url('http://crgs.clan.su/ajax_images/admin_bar_okno/1.png') repeat-x !important;}
  .admBarCenter {color:#0073e0;font-size:10;font-family:visitor_rus; !important}
  /* ----------------------- */

Полоса прокрутки

devil_kiss — Sun, 18 Aug 2013 19:50:57 GMT

[table] Вы настроили свой сайт но вас не устраивает стандартная полоса прокрутки сайта? Можно найти решение и для вашего сайта. Я вам хочу предложить один из многих примеров полосы прокрутки. Темная полоса прокрутки для uCoz. Как она выглядит? Темная тоненькая полоса прокрутки, которая не раздражает глаз. Установим CSS стили и начинаем любоваться.[/table]
[table]Установим данный код в таблицу стилей (CSS):[/table]

Код

/* Прокрутка */
#body{}
    ::-webkit-scrollbar
    {
    width: 5px;
    height: 5px;
    }
    ::-webkit-scrollbar-track-piece
    {
    background-color: #ffffff;
    -webkit-border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:vertical
    {
    height: 5px;
    background-color: #666;
    -webkit-border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:horizontal
    {
    width: 5px;
    background-color: #666;
    -webkit-border-radius: 5px;
    }
/* Прокрутка */

Увеличение картинки от Mir-Devil

devil_kiss — Sun, 18 Aug 2013 19:49:52 GMT

Данный код вставьте в верхнею часть сайта

Код