Footer - Как на Zombr IPB 3.4.X » TOPSKRIPT.ORG Всё о скриптах и для скриптов

Footer - Как на Zombr IPB 3.4.X

В данном уроке я расскажу как сделать footer как на zombr
Для этого пройдём в АЦ - Внешний вид - Ваш стиль - CSS
и создадим zm-footer с таким содержанием:

/* Footer
-------------------------------------------------------------------------------*/
#zm-footer {
    color: #808080;
    font-family: tahoma, sans-serif;
    font-size: 11px;
    margin: 20px 0 0 0;
}

#zm-footer .first-level {
    background: #fff;
    border-top: 3px solid #e9e9e9;
    padding: 12px 29px;
    overflow: hidden;
}

#zm-footer .first-level .site-description {
    width: 278px;
    margin: 0 20px 0 0;
    float: left;
}

#zm-footer .first-level .site-description > img {
    margin: 8px 0 6px 0;
}

#zm-footer .first-level .primary-links {
    margin: 10px 0 0 0;
    width: 160px;
    float: left;
}

#zm-footer .first-level .primary-links > strong {
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #686868;
    margin: 0 0 16px 0;
}

#zm-footer .first-level .primary-links > a {
    display: block;
    color: #808080;
    margin: 8px 0;
    text-decoration: none;
}

#zm-footer .first-level .primary-links > a:hover {
    display: block;
    color: #686868;
    margin: 3px 0;
}

#zm-footer .first-level .last-news {
    margin: 10px 25px 0 0;
    width: 240px;
    float: left;
}

#zm-footer .first-level .last-news > strong {
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #686868;
    margin: 0 0 10px 0;
}

#zm-footer .first-level .last-news > a {
    display: block;
    color: #808080;
    padding: 6px 0;
    text-decoration: none;
}

#zm-footer .first-level .last-news > a:hover {
    color: #686868;
}

#zm-footer .first-level .other {
    margin: 10px 0 0 0;
    width: 276px;
    float: left;
}

#zm-footer .first-level .other > strong {
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #686868;
    margin: 0 0 8px 0;
}

#zm-footer .first-level .other > .feedback {
    padding: 4px;
    line-height: 16px;
}

#zm-footer .first-level .other .feedback_row {
    padding: 0 0 6px;
}

#zm-footer .first-level .other .feedback_row__icon {
    float: left;
}

#zm-footer .first-level .other .feedback_row__type {
    margin: 0 0 0 40px;
}

#zm-footer .first-level .other .feedback_row__type .desc {
    font-size: 11px;
}

#zm-footer .second-level {
    background: #fff;
    height: 53px;
    line-height: 53px;
    padding: 0 12px;
}

#zm-footer .second-level .banners {
    overflow: hidden;
    margin: 0;
}

#zm-footer .second-level .banners > .banner {
    float: left;
    margin: 0 6px 0 0;
}

#zm-footer .second-level .banners > .banner:last-child {
    margin: 0;
}

#zm-footer .second-level .ipbmenu_content {
    line-height: 18px;
}

#zm-footer .second-level .secondary {
    padding: 2px 0 0 0;
}

#zm-footer .second-level .secondary a {
    padding: 0 10px 0 0;
}

#zm-footer .second-level .studio-copy {
    margin: 0 0 0 0;
    height: 32px;
}

#zm-footer .second-level a {
    color: #808080;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

#zm-footer .second-level a:hover {
    color: #cc0000;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

Далее изменяем globalTemplate
ищем:

<!-- ::: FOOTER (Change skin, language, mark as read, etc) ::: -->
			<div id='footer_utilities' class='clearfix clear'>

И после добавляем код:

<footer id="zm-footer">
        <div class="first-level">
            <div class="main_width">
                <div class="site-description">
                    <img src="http://zombr.org/public/style_images/bulletin/footer_logo.png" alt="">
                    <div>ZOMBR.ORG © 2010 - 2015</div>
                </div>
                <div class="primary-links">
                    <strong>Основные ссылки</strong>
                    <a href="http://zombr.org">Главная страница</a>
                    <a href="http://zombr.org/forums">Сообщество</a>
                    <a href="http://zombr.org/shop/">Магазин</a>
                    <a href="http://zombr.org/banlist/">Бан-листы</a>
                    <a href="http://zombr.org/sitemap.xml">Карта сайта</a>
                </div>
                <div class="last-news">
                    <strong>Последние новости</strong>
                    <a href="http://zombr.org/news/53/">Стартуем! Обновления "Зомби Серверов" - 0.1</a><a href="http://zombr.org/news/52/">Обновления которых все ждут.</a><a href="http://zombr.org/news/51/">Опять проблемы с БД...</a><a href="http://zombr.org/news/50/">Базы данных восстановлены.</a><a href="http://zombr.org/news/49/">Слетели базы данных на серверах.</a><a href="http://zombr.org/news/48/">SURF сервер полноценно работает! </a>
                </div>
                <div class="other">
                    <strong>Связаться с Администрацией</strong>
                    <div class="feedback">
                        <div class="feedback_row">
                            <div class="feedback_row__icon"><img src="http://zombr.org/public/style_images/bulletin/feedback_ico/skype_circle_color-32.png" alt=""></div>
                            <div class="feedback_row__type">
                                <strong>zombr4elovek</strong>
                                <div class="desc">Свяжитесь с администратором через Skype</div>
                            </div>
                        </div>
                         <div class="feedback_row">
                            <div class="feedback_row__icon"><img src="http://zombr.org/public/style_images/bulletin/feedback_ico/icq.png" alt=""></div>
                            <div class="feedback_row__type">
                                <strong>628-165-318</strong>
                                <div class="desc">Свяжитесь с администратором через ICQ</div>
                            </div>
                        </div>
                        <div class="feedback_row">
                            <div class="feedback_row__icon"><img src="http://zombr.org/public/style_images/bulletin/feedback_ico/vkontakte-30.png" alt=""></div>
                            <div class="feedback_row__type">
                                <strong>http://vk.com/kirille</strong>
                                <div class="desc">Свяжитесь с администратором ВКонтакте</div>
                            </div>
                        </div>
                        <div class="feedback_row">
                            <div class="feedback_row__icon"><img src="http://zombr.org/public/style_images/bulletin/feedback_ico/basic1-036_phone_call-32.png" alt=""></div>
                            <div class="feedback_row__type">
                                <strong>38 063 74 6 74 (восемь) (два)</strong>
                                <div class="desc">Свяжитесь с администратором по телефону</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                <div class="secondary">
                    
                        <a rel="nofollow" href="#" id="new_language">Русский (RU)</a>                         
                        <ul id="new_language_menucontent" class="ipbmenu_content with_checks" style="display: none; position: absolute; z-index: 9999;">
                            
                                <li class="selected" style="z-index: 10000;">
                                    <a href="http://zombr.org/index.php?&amp;k=76f26d90983ba52d2dc891bc12a12273&amp;setlanguage=1&amp;langurlbits=&amp;cal_id=&amp;langid=1" style="z-index: 10000;">Русский (RU)</a>
                                </li>
                            

                                <li style="z-index: 10000;">
                                    <a href="http://zombr.org/index.php?&amp;k=76f26d90983ba52d2dc891bc12a12273&amp;setlanguage=1&amp;langurlbits=&amp;cal_id=&amp;langid=2" style="z-index: 10000;">Русский (RU) (COPY)</a>
                                </li>
                            
                        </ul>
                        <a href="http://zombr.org/sitemap.xml">Карта сайта</a>
                    
                </div>
            </div>
        </div>
    </footer>