Перейти к содержимому

Добро пожаловать на форум IP-Board.Ru - У нас есть хуки, стили и релизы IP.Board
Зарегистрируйтесь сейчас, чтобы получить доступ ко всем из наших особенностей. После регистрации и входа в систему вы сможете создавать темы, отвечать на сообщения в существующих разделах, изменять репутацию другим пользователям, получить возможность обмениваться личными сообщениями, обновления статуса, управлять профилем и многое другое.Если у вас уже есть аккаунт, войдите или зарегистрируетесь бесплатно!
Уважаемые пользователи IP-Board.ru , спешу сообщить, что каждую неделю администрация будет выкладывать VIP файлы для общего доступа.
Форум нуждается в активных участниках, для получения привилегий на форуме любой пользователь может оставить заявку тут Набор команды на форум. Внесите свой вклад на форум и форум Вас не забудет. ;)

Фотография

Рекламный блок как на ZOMBR

- - - - -

В этой теме нет ответов

#1
Offline Ciko

Ciko

    Хуй с горы

  • Заблокированные
  • 28 сообщений
  • 16 тем
22
  • Версия IP.Board:2.3.x

                                                      Рекламный блок как на ZOMBR
                              
Screenshot_1.png

1. Перейти Admin CP -> Look & Feel -> Select Template -> Board Index > boardIndexTemplate и найти:
 

Цитата

 

 

<foreach loop="side_blocks:$side_blocks as $block">
                {$block}
            
</foreach>

2. Перед ним поместить этот код:
 

Цитата

 

 

<div class='ipsSideBlock clearfix '>

<div class='_sbcollapsable'>

<div class="grid">
<figure class="effect-sadie">
<img src="http://zombr.org/por...n_download.png" alt="download cs by zombr">
<figcaption>
<h2><span>Скачать CS 1.6</span></h2>
<p>Скачать сейчас!</p>
<a href="http://zombr.org/_co...trike_1_6.html"></a>
</figcaption> 
</figure>

<figure class="effect-sadie">
<img src="http://zombr.org/por...e_qn_unban.png" alt="unban request">
<figcaption>
<h2>Вас <span>забанили</span>?</h2>
<p>Подайте заявку на разбан!</p>
<a href="http://zombr.org/banlist/"></a>
</figcaption> 
</figure>

<figure class="effect-sadie">
<img src="http://zombr.org/por...n_watchers.png" alt="watcher">
<figcaption>
<h2>Как стать смотрителем?</h2>
<p>Подать заявку прямо сейчас!</p>
<a href="http://zombr.org/forum/6/"></a>
</figcaption> 
</figure>
</div>
</div></div>

3. Сохранить.

 

4. Перейти Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Select Template -> и нажмите кнопку Добавить CSS-файла.

 

5. Назовите его grid
 
6. Поместите следующий код в нем:

Цитата

 

 

.grid {
overflow: hidden;
margin: 0;
width: 100%;
max-width: 1920px;
list-style: none;
text-align: center;
}
figure.effect-sadie {
-webkit-transition: background 0.35s, -webkit-transform 0.35s;
transition: background 0.35s, transform 0.35s;
}
.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: 0 -0.135em 0.600em -0.135em;
background: #3047A3;
text-align: center;
cursor: pointer;
}
figure.effect-sadie img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 0.8;
}
.grid figure figcaption, .grid figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.grid figure figcaption {
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 0 0 6px 0;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
figure.effect-sadie figcaption::before, figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0,-70%,0) translate3d(0,-70px,0);
transform: translate3d(0,-70%,0) translate3d(0,-70px,0);
}
figure.effect-sadie h2 {
position: absolute;
top: 82%;
left: 0;
width: 100%;
color: #fff;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}
.grid figure h2, .grid figure p {
margin: 0;
}
.grid figure h2 {
font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
figure.effect-sadie figcaption::before, figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}

(Замените ваши ссылки и изображения)
7. Сохранить.
Автор: Silence

 


  • 1



Ответить



  


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных