by rps
Многие уже давно хотели получить для своего форума боковую панель. Теперь эта возможность есть!
Посмотреть, как это всё выглядит и работает, можно тут: ссылка.
1. Ставить в HTML-верх следующий код:
Для большинства стилей:
<style>
#pun {
margin: auto 20px auto 185px;
width : 870px;}
.sidbar {background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); width: 188px; height: 1600px; border: 1px solid; position: absolute; z-index: 1000; top: 0px; right: 310px; left: 5px;}
.sidbar h1 , .sidbar h2 , .sidbar h3 {
background: transparent url(http://i041.radikal.ru/0908/f8/606ac58d6426.png); height: 17px; text-align: center; color: #496690; border: 0px none; width: 90%; margin: auto;}
.sidbar p {padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}
</style>
<div class="sidbar">...</div>Для стилей линии Classic и стилей из генератора:
<style>
#pun {
margin: auto 20px auto 205px;
width : 870px;}
.sidbar {background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); width: 188px; height: 1600px; border: 1px solid; position: absolute; z-index: 1000; top: 0px !important; right: 210px !important; left: -195px !important;}
.sidbar h1 , .sidbar h2 , .sidbar h3 {
background: transparent url(http://i041.radikal.ru/0908/f8/606ac58d6426.png); height: 17px; text-align: center; color: #496690; border: 0px none; width: 90%; margin: auto;}
.sidbar p {padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}
</style>
<div class="sidbar">...</div>2. Рассмотрим содержимое кода по-порядку, чтоб Вы смогли максимально точно настроить его под себя.
#pun {
margin: auto 20px auto 185px;
width : 870px;}
Выделенное зелёным - это ширина Вашего форума. В пикселах.
Выделенное красным - отступы от краём экрана до форума. Тоже в пикселах. Причём значения идут в порядке: верхний, правый, низний и левый отступы. Auto указывает на то, что отступ подберётся сам при необходимости.
.sidbar {background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); width: 188px; height: 1600px; border: 1px solid ; position: absolute; z-index: 1000; top: 0px; right: 310px; left: 5px;}
Выделенное красным - цвет самой панели. Значение transparent - прозрачная.
Выделенное зелёным - фоновая картинка для панели. При значении none - без фонового изображения.
Выделенное синим - ширина и высота самой панели. Допустимо использовать значения в пикселах или процентах (в процентах - от общей длинны или ширины форума).
Выделенное оранжевым - рамка вокруг боковой панели. Первое значение - толщина в пикселах, второе слово - тип начертания.
Выделенное розовым - позиция панели относительно форума. НЕ РЕКОМЕНДУЕТСЯ изменять эти значения начинающим пользователям и пользователям со средним опытом.
.sidbar h1 , .sidbar h2 , .sidbar h3 {
background: transparent url(http://i041.radikal.ru/0908/f8/606ac58d6426.png); height: 17px; width: 90%; text-align: center; color: #496690; border: 0px none; margin: auto;}
Выделенное красным - цвет заголовков минидополнений. Значение transparent - прозрачные.
Выделенное зелёным - фоновая картинка для заголовков минидополнений. При значении none - без фонового изображения.
Выделенное синим - ширина и высота самих заголовков. Допустимо использовать значения в пикселах или процентах (в процентах - от общей длинны или ширины форума).
Выделенное оранжевым - выравнивание текста в заголовках категорий по центру.
Выделенное розовым - цвет текста заголовков.
Выделенное оливковым - рамка вокруг боковой панели. Первое значение - толщина в пикселах, второе слово - тип начертания.
Выделенное голубым - выравнивание заголовков относительно сайдбара. НЕ РЕКОМЕНДУЕТСЯ изменять это значение начинающим пользователям и пользователям со средним опытом.
.sidbar p {padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}
Выделенное красным - отступы от минидополнений до границы сайдбара. Необходимы для выравнивания минидополнений по центру панели. Значения идут в порядке: верхнее, правое, нижнее, левое.
Выделенное зелёным - выравнивание текстовой информации в минидополнениях.
