Адаптивный сайдбар

Назначение: На Главной выводится сайдбар, куда перемещаются данные о форуме. Помимо этого, в бар можно добавить что угодно. При ширине окна менее 1100 пикселей происходит адаптивное перереключение сайдбара вниз. Модификация улучшает вид Главной страницы в диапазоне 735-2000 пикселей ширины окна, недостижимом при обычной "резиновой" вёрстке.
Ограничения: модификация непригодна для самобытных стилей, где всё поменяли.
Демо: http://ogo.zz.mu/go/index.php


Установка

В шаблоне FORUMHOME:

1. находим место

<!-- main -->

и выше добавляем:

<div id="wrappera">
<div id="content">
<div id="aleft">

2. находим место

<br />
$ad_location[ad_forumhome_afterforums]
<br />

и убераем оба тега <br />, чтобы получилось так:

$ad_location[ad_forumhome_afterforums]

3. находим место

<!-- what's going on box -->

и выше добавляем:

</div>
<div id="aright">

4. находим место

<!-- end what's going on box -->

и ниже добавляем:

</div>
</div>
</div>

5. Находим фрагмент:

<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>

и меняем его на:

<phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase>

6. Находим фрагмент:

<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')">

и меняем его на:

<a style="float:$stylevar[right]; margin-left:15px" href="#top" onclick="return toggle_collapse('forumhome_activeusers')">

В шаблоне GENERIC_SHELL:

1. Находим место

</head>

и выше добавляем:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Заходим в Панель администратора - Управление стилями - Все опции стиля - Дополнительные определения CSS

Туда в самый низ копируем:

@media screen and (min-width:480px) and (max-width:2000px) {
#wrappera {
	width:100%;
        margin:0px;
	}
#wrappera #content {
	width:100%;
        margin:0px;
	}
#wrappera #content #aleft {
        float:left;
	width:72%;
        }
#wrappera #content #aright {
        float:left;
	width:27%;
	margin-left:10px;
        }
}

@media screen and (min-width:480px) and (max-width:1100px) {
#wrappera {
	width:100%;
        margin:0px;
	}
#wrappera #content {
	width:100%;
        margin:0px;
	}
#wrappera #content #aleft {
        float:none;
	width:100%;
        }
#wrappera #content #aright {
        float:none;
	width:100%;
	margin: 10px 0px 0px 0px;
	}
}

Установка завершена. Чтобы добавить в сайдбар ещё какие-то элементы, размещаем их в блоке <div id="aright">...</div>
Можно менять ширину переключения и ширину самого бара как хотите, но сумма <div id="aleft"> и <div id="aright"> должна составлять 99%.
Можно задать ещё варианты вывода при каких-то значениях ширины, добавив css по аналогии. Скажем, второе переключение для 1500px ширины, будет лучше.

Originally Posted by Elsa

Демо: http://ogo.zz.mu/go/index.php

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator at admin@main-hosting.eu to inform them of the time this error occurred, and the actions you performed just before this error.

More information about this error may be available in the server error log.

Originally Posted by Sven

Internal Server Error

да вроде нормально все

Originally Posted by kerk

да вроде нормально все

уже да..

@media screen and (min-width:480px) and (max-width:2000px) {

@media screen and (min-width:480px) and (max-width:1100px) {

Вроде не совсем корректные медиа-запросы же, или так и задумано?
На экранах с шириной выше 2к пикселей (Например распространенный WQHD, 2560px) никакой адаптивности не будет.
Быть может первый запрос следует переписать как

@media screen (min-width: 1100px)

?


Кстати, заметил, что для описания правок здесь совсем не принято использовать patch формат. Отчего так? Он удобнее же, не надо ничего искать, наложил и все.

Originally Posted by Core dumped

На экранах с шириной выше 2к пикселей (Например распространенный WQHD, 2560px) никакой адаптивности не будет.

Такие мониторы использует мизерный процент людей.

Originally Posted by Sven

Такие мониторы использует мизерный процент людей.

Э-э-э, ну, я не знаю что на это ответить)
Я использую такой монитор. Мои знакомые используют такие мониторы, мои коллеги используют такие мониторы. Такие мониторы уже давно есть в довольно бюджетном сегменте.
А в целом я к тому, что малое распространение ещё не значит, что их нет вовсе. К тому же тут может авторская задумка, мол на широких мониторах оно и не смотрится совсем.

Originally Posted by Core dumped

Вроде не совсем корректные медиа-запросы же, или так и задумано?
На экранах с шириной выше 2к пикселей (Например распространенный WQHD, 2560px) никакой адаптивности не будет.
Быть может первый запрос следует переписать

Конечно лучше делать несколько переключений. Но, мне кажется, с одним вышло коротко, понятно, и любой админ добавит переключения по аналогии, если надо. И под самые большие мониторы тоже...
А ещё сомневаюсь, что ставить meta name именно в шаблон GENERIC_SHELL верно. Он, как бы, глобальный, но слишком особенный...
Если у кого-то не будет работать адаптация, уберите meta name из GENERIC_SHELL, найдите в шаблоне headinclude место

<meta name="description" content="$vboptions[description]" />
</if></if>

и ниже добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Извините, я просто не знаю, где лучше.