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

Список разделов 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 месяца

Сообщение #2 sag-sag » 05.06.2014, 12:16

Sumanai, а как сайд бар опустить, чтоб он наравне с форумом был?
sag-sag M
Аватара
Репутация: 411
С нами: 10 лет 7 месяцев

Сообщение #3 Sumanai » 05.06.2014, 12:26

Какими именно и где? Этот сайдбар для всех страниц, поэтому начинается с шапки. Делать его с других мест несколько проблематично, максимум- это сразу после строки с текущим временем.
И да, я до сих пор не вижу смысла в этом. Бесполезная вещь, ни байта полезной информации в сайдбарах на пхпбб не видел. Подумайте ещё раз о нужности и чем вы его будете заполнять.
Sumanai M
Автор темы
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #4 sag-sag » 05.06.2014, 12:46

Sumanai, не заполнять, у меня есть чем его... И жаль что он на всех страницах.
sag-sag M
Аватара
Репутация: 411
С нами: 10 лет 7 месяцев

Вариант сайдбара только для главной страницы

Сообщение #5 Sumanai » 05.06.2014, 12:58

Ну есть же вариант от WolfGeeN. Хотя ладно, я сегодня.

Итак, вариант только для главной. Код наполовину копипаста варианта WolfGeeN, плюсы ей.
Начало с файлом то же
Открываете index_body.html в этой же папке, ищем
Код: Выделить всё
<!-- INCLUDE forumlist_body.html -->
Заменяем на
Код: Выделить всё
<div id="forumlist-wrapper">
<div id="forumlist">
<!-- INCLUDE forumlist_body.html -->
</div>
</div>
<div id="sidebar">
<!-- INCLUDE sidebar.html -->
</div>

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

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

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

Код не тестировал, но должен работать.
Sumanai M
Автор темы
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #6 sag-sag » 05.06.2014, 14:01

Sumanai:Ну есть же вариант от WolfGeeN
спасибо :wink: .

Код от WolfGeeN, за что ей большое спасибо, на моем стиле (например когда я смотрю, через планшет), не работает. Точнее сайдбар вниз уезжает).
sag-sag M
Аватара
Репутация: 411
С нами: 10 лет 7 месяцев

Сообщение #7 rvszap » 07.06.2014, 13:27

Сегодня только заметил, что на списке форумов разметка все равно съезжает.
список форумов.JPG


На главной и в темах все отлично:
главная.JPG
тема.JPG
rvszap
Репутация: 6
С нами: 11 лет

Сообщение #8 Sumanai » 07.06.2014, 15:24

rvszap, с ссылкой было бы проще.
Sumanai M
Автор темы
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #9 rvszap » 08.06.2014, 18:34

Sumanai, Спасибо, все заработало, убрал тег <center>, который остался от старого скрипта.
rvszap
Репутация: 6
С нами: 11 лет

Сообщение #10 nurgaf » 23.08.2014, 10:38

Прошу подсказать в чем проблема http://nurgaf.tk/index.php ? Почему-то код конфликтует со стилем.
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

Сообщение #11 vbnm » 23.08.2014, 10:59

nurgaf, пока видно, что кодировка не та
нужно УТФ 8 без бум, если мну память не изменяет
vbnm
Репутация: 108
С нами: 11 лет

Сообщение #12 nurgaf » 23.08.2014, 11:08

vbnm, да, вы правы. Я сменил кодировку на Ютф8, "?" сменились на слова, но помимо этого форум попрежнему отображается некорректно (список разделов)!
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

Сообщение #13 vbnm » 23.08.2014, 11:10

nurgaf, легче будет вас понять, если вы сделаете скриншот и стрелками на нем же покажете, что не таг, и как вам бы хотелось?
vbnm
Репутация: 108
С нами: 11 лет

Сообщение #14 nurgaf » 23.08.2014, 11:23

Извините что показываю на разных сайтах (один тестовый).

Был стандартный шаблон "разделов", все как обычно:
do.png


С добавлением сайдбара все съехало:
posle.png


Почему?
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

Сообщение #15 vbnm » 23.08.2014, 11:25

из видимых:
у меня показывает, что висят какие-то лишние кавычки сразу после
см красным цветом
<div id="sidebar">
"
"

<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>
vbnm
Репутация: 108
С нами: 11 лет

Сообщение #16 nurgaf » 23.08.2014, 11:35

Что странно, этих кавычек нет в файлах sidebar, overail (footer/header)
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

Сообщение #17 vbnm » 23.08.2014, 11:45

nurgaf, в каком редакторе были созданы файлы?
Возможно, что это просто проблема формата.
Я бы открыл ноутпейд и пересохранил все редактируемые файлы в кодировке утф-8 без БУМ
возможно где-то у вас просто пробел лишний

но ощушение такое, что какой-то тег незакрыт, или экранируется лишним знаком, как кавычки приведенные выше

особое внимание к лишним пробелам
vbnm
Репутация: 108
С нами: 11 лет

Сообщение #18 nurgaf » 23.08.2014, 11:47

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

Сообщение #19 vbnm » 23.08.2014, 11:48

ах, да, если вы копировали код напрямую отсель и потом просто его вставляли и делали из него фаил, то..это может быть причиной появление лишних невидимых знаков пробела, иль еще чего.
vbnm
Репутация: 108
С нами: 11 лет

Сообщение #20 nurgaf » 23.08.2014, 12:41

Проблема отвалилась не хитрым способом - передумал делать сайдбар :toothless: . И в самом деле, в него нужно пихать что-то стоящее, да и есть такая актуальная проблема, что длина страницы везде разная, а сайдбар определенной (небольшой) высоты - а это будет не очень то и красиво. Хотя можно было бы делать "плавающий" сайдбар - но не люблю назойливость, и не думаю что это понравилось бы читателям форума.
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

След.

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



cron