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

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: 1612
With us: 4 yaers 10 months

Post #2by sag-sag » 05.06.2014, 12:16

Sumanai, а как сайд бар опустить, чтоб он наравне с форумом был?
Заметки системного администратора [TEHADM.RU]
sag-sag M
Гуру
Reputation: 359
With us: 4 yaers 3 months

Post #3by Sumanai » 05.06.2014, 12:26

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

Post #4by sag-sag » 05.06.2014, 12:46

Sumanai, не заполнять, у меня есть чем его... И жаль что он на всех страницах.
Заметки системного администратора [TEHADM.RU]
sag-sag M
Гуру
Reputation: 359
With us: 4 yaers 3 months

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

Post #5by Sumanai » 05.06.2014, 12:58

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

Итак, вариант только для главной. Код наполовину копипаста варианта WolfGeeN, плюсы ей.
Начало с файлом то же
Открываете index_body.html в этой же папке, ищем
Code: Select all
<!-- INCLUDE forumlist_body.html -->
Заменяем на
Code: Select all
<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, ищите в нём
Code: Select all
#page-body {
   margin: 4px 0;
   clear: both;
}
И добавляете после
Code: Select all
#forumlist {
   padding-right: 250px;
}

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

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

Код не тестировал, но должен работать.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Topic author, Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Post #6by sag-sag » 05.06.2014, 14:01

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

Код от WolfGeeN, за что ей большое спасибо, на моем стиле (например когда я смотрю, через планшет), не работает. Точнее сайдбар вниз уезжает).
Заметки системного администратора [TEHADM.RU]
sag-sag M
Гуру
Reputation: 359
With us: 4 yaers 3 months

Post #7by rvszap » 07.06.2014, 13:27

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


На главной и в темах все отлично:
главная.JPG
тема.JPG
rvszap
Мастер
Reputation: 6
With us: 4 yaers 9 months

Post #8by Sumanai » 07.06.2014, 15:24

rvszap, с ссылкой было бы проще.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Topic author, Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Post #9by rvszap » 08.06.2014, 18:34

Sumanai, Спасибо, все заработало, убрал тег <center>, который остался от старого скрипта.
rvszap
Мастер
Reputation: 6
With us: 4 yaers 9 months

Post #10by nurgaf » 23.08.2014, 10:38

Прошу подсказать в чем проблема http://nurgaf.tk/index.php ? Почему-то код конфликтует со стилем.
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #11by vbnm » 23.08.2014, 10:59

nurgaf, пока видно, что кодировка не та
нужно УТФ 8 без бум, если мну память не изменяет
vbnm
Гуру
Reputation: 96
With us: 4 yaers 9 months

Post #12by nurgaf » 23.08.2014, 11:08

vbnm, да, вы правы. Я сменил кодировку на Ютф8, "?" сменились на слова, но помимо этого форум попрежнему отображается некорректно (список разделов)!
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #13by vbnm » 23.08.2014, 11:10

nurgaf, легче будет вас понять, если вы сделаете скриншот и стрелками на нем же покажете, что не таг, и как вам бы хотелось?
vbnm
Гуру
Reputation: 96
With us: 4 yaers 9 months

Post #14by nurgaf » 23.08.2014, 11:23

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

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


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


Почему?
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #15by 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
Гуру
Reputation: 96
With us: 4 yaers 9 months

Post #16by nurgaf » 23.08.2014, 11:35

Что странно, этих кавычек нет в файлах sidebar, overail (footer/header)
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #17by vbnm » 23.08.2014, 11:45

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

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

особое внимание к лишним пробелам
vbnm
Гуру
Reputation: 96
With us: 4 yaers 9 months

Post #18by nurgaf » 23.08.2014, 11:47

Хорошо, спасибо! Буду искать! :wink:
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Post #19by vbnm » 23.08.2014, 11:48

ах, да, если вы копировали код напрямую отсель и потом просто его вставляли и делали из него фаил, то..это может быть причиной появление лишних невидимых знаков пробела, иль еще чего.
vbnm
Гуру
Reputation: 96
With us: 4 yaers 9 months

Post #20by nurgaf » 23.08.2014, 12:41

Проблема отвалилась не хитрым способом - передумал делать сайдбар :toothless: . И в самом деле, в него нужно пихать что-то стоящее, да и есть такая актуальная проблема, что длина страницы везде разная, а сайдбар определенной (небольшой) высоты - а это будет не очень то и красиво. Хотя можно было бы делать "плавающий" сайдбар - но не люблю назойливость, и не думаю что это понравилось бы читателям форума.
nurgaf M
Гуру
Avatar
Age: 21
Location: г.Челябинск
Reputation: 65
With us: 4 yaers 8 months

Next

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



cron