Лідери

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/portal_assets/img/side_qn_download.png" alt="download cs by zombr"> <figcaption> <h2><span>Скачать CS 1.6</span></h2> <p>Скачать сейчас!</p> <a href="http://zombr.org/_counter_strike_1_6.html"></a> </figcaption> </figure> <figure class="effect-sadie"> <img src="http://zombr.org/portal_assets/img/side_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/portal_assets/img/side_qn_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); }