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

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

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

Сообщение #1 Sumanai » 05.06.2014, 00:04

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

Создаёте файл sidebar.html с содержимым вашего сайдбара. Оно может быть любым, в HTML разметке. К примеру
Спойлер
Код: Выделить всё
<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>
Для блока в стиле форума, или
Спойлер
Код: Выделить всё
    <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 в этой же папке, ищем
Код: Выделить всё
   <div id="page-body">
Добавляем перед
Код: Выделить всё
   <div id="page-body-wrapper">

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

Переходите в папку \forum\styles\prosilver\theme\, открываете там файл common.css, ищите в нём
Код: Выделить всё
#page-body {
   margin: 4px 0;
   clear: both;
}
И заменяете на
Код: Выделить всё
#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 пикселей разницы- отступ.

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

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

Замечание- хоть этот способ и не требует фиксации ширины форума, но из- за особенностей вёрстки необходимо увеличить минимальную ширину форума из админки примерно до 1060 px.
Sumanai M
Автор темы
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца


Сообщение #21 vbnm » 23.08.2014, 13:23

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

на локалке у мну в шаблоне сайта используется, оч удобная вещь в отношении сайдбаров
vbnm
Репутация: 108
С нами: 11 лет

Сообщение #22 nurgaf » 23.08.2014, 18:45

Хм, думаю это хорошая мысль!
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

Пред.

Вернуться в Мастерская 1.x



cron