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