Фиксированный сайдбар на всех страницах

Board index phpBBex 1.x Мастерская

Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Moderator: Поддержка

Post #1by Sumanai » 05.06.2014, 00:04

Это пошаговое руководство позволит сделать левую/правую колонку для форума с любым содержимым.
В отличии от руководства WolfGeeN, этот метод не требует фиксированной ширины форума, позволит создать сайдбар фиксированной ширины при тянущейся остальной части форума.
Для всех правок используйте редактор с поддержкой UTF-8 без BOM, например, Notepad++.

Создаёте файл sidebar.html с содержимым вашего сайдбара. Оно может быть любым, в HTML разметке. К примеру
Spoiler
Code: Select all
<div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Блок 1</dt>
                </dl>
            </li>
        </ul>
        <div style="margin: 0px; padding: 5px 10px;" class="panel">Мой первый блок</div>
    <span class="corners-bottom"><span></span></span></div>
</div>
Для блока в стиле форума, или
Spoiler
Code: Select all
    <div class="panel bg1">
        <div class="inner"><span class="corners-top"><span></span></span>
           Панель 1
        <span class="corners-bottom"><span></span></span></div>
    </div>

    <br />

    <div class="panel bg2">
        <div class="inner"><span class="corners-top"><span></span></span>
            Панель 2
        <span class="corners-bottom"><span></span></span></div>
    </div>

    <br />

    <div class="panel bg3">
        <div class="inner"><span class="corners-top"><span></span></span>
            Панель 3
        <span class="corners-bottom"><span></span></span></div>
    </div>
Для панелей разных цветов.

Помещаете этот файл в папку \forum\styles\prosilver\template\
Открываете overall_header.html в этой же папке, ищем
Code: Select all
   <div id="page-body">
Добавляем перед
Code: Select all
   <div id="page-body-wrapper">

Открываете overall_footer.html
Ищите сверху первое вхождение
Code: Select all
   </div>
И добавляете после
Code: Select all
   </div>
<div id="sidebar">
<!-- INCLUDE sidebar.html -->
</div>

Переходите в папку \forum\styles\prosilver\theme\, открываете там файл common.css, ищите в нём
Code: Select all
#page-body {
   margin: 4px 0;
   clear: both;
}
И заменяете на
Code: Select all
#page-body {
   margin: 4px 0;
   clear: both;
   padding-right: 250px;
}

#page-body-wrapper {
   float: left;
   margin-right: -250px;
   width: 100%;
}

#sidebar{
   margin: 4px 0;
   float: right;
   width: 235px;
}

На счёт чисел- 250- это отступ справа для блока с содержимым форума, 235- ширина правого блока, 15 пикселей разницы- отступ.

В итоге у вас выйдет что- то типа этого (кликабельно):
Image

Это создаст сайдбар справа. Если вы хотите сайдбар слева, поменяйте везде в инструкции right и left.
Проверялось в современных и не очень браузерах, мобильном браузере андроида, гарантируется работа в ИЕ8.

Замечание- хоть этот способ и не требует фиксации ширины форума, но из- за особенностей вёрстки необходимо увеличить минимальную ширину форума из админки примерно до 1060 px.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Topic author, Гуру
Avatar
Reputation: 1536
With us: 4 yaers 2 months


Post #21by vbnm » 23.08.2014, 13:23

nurgaf, у мну задумка есть на ентот счет
в бутстрапе используется такая финтиклюшка,- Туггле называется
на яве
так вот, кнопочка при нажатии на которую сайдбар будет бегать из стороны в сторону, то скрываться, то показываться в самом шаблоне)))
не совсем то, но как пример:
http://javascript.ru/ui/show-hide-toggle

на локалке у мну в шаблоне сайта используется, оч удобная вещь в отношении сайдбаров
vbnm
Гуру
Reputation: 87
With us: 4 yaers 1 month

Post #22by nurgaf » 23.08.2014, 18:45

Хм, думаю это хорошая мысль!
nurgaf M
Гуру
Avatar
Age: 20
Location: г.Челябинск
Reputation: 67
With us: 4 yaers

Previous

Forum name: Мастерская
Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.

Quick reply


Enter the code exactly as it appears. All letters are case insensitive.
Confirmation code
:hi: :smile: :wink: :twisted: :sad: :evil: :smoke: :eh: :eek: :fie: :silenced: :razz: :oops: :help: :spy: :insane: :biggrin: :toothless: :ill: :nervious: :weirdface: :pray: :clap: :think: :boxing: :cyclop: :rambo: :zombie: :cry: View more smilies

   

Return to Мастерская



Who is online (over the past 10 minutes)

Users browsing this forum: 1 guest