Sidebar (боковая панель) для форума

Поделиться1Вс, 2 Авг 2009 01:35:59

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Многие уже давно хотели получить для своего форума боковую панель. Теперь эта возможность есть!

Посмотреть, как это всё выглядит и работает, можно тут: Ссылка.

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>

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;}

Выделенное красным - отступы от минидополнений до границы сайдбара. Необходимы для выравнивания минидополнений по центру панели. Значения идут в порядке: верхнее, правое, нижнее, левое.
Выделенное зелёным - выравнивание текстовой информации в минидополнениях.

Отредактировано rps (Вс, 23 Авг 2009 20:59:06)

+10

Поделиться2Вс, 2 Авг 2009 01:37:37

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Теперь о том, как добавить своё минидополнение на сайдбар.
Для этого найдите в коде (в самом конце) строчку

Код:

<div class="sidbar">...</div>

Вместо трёх точек Вы сможете поставить те минидополнения, которые Вам понравятся.

Подробнее о минидополнениях.
Выглядят они следующим образом:

Код:

<h3>Заголовок</h3>
<p>
Содержимое
</p>

Понятное дело, что заголовок и содержимое может быть любым. Ниже приведён список уже готовых минидополнений. Вам останется только вставить их к себе на форум.
НЕ ЗАБЫВАЙТЕ, что нужно подставлять СВОИ данные, например адреса картинок, тексты, ссылки, коды баннеров и прочее!

Приветствие для гостей:

Код:

<h1>Добро пожаловать</h1><p><script
        language="JavaScript">
<!--begin fantasyflash.ru
var h=(new Date()).getHours();
if (h > 24 || h <6) document.write('<b>Доброй ночи!</b> ') ;
if (h > 6 && h < 12) document.write('<b>Доброе утро!</b> '); 
if (h > 12 && h < 18) document.write('<b>Добрый день! </b>'); 
if (h > 18 && h < 24) document. write('<b>Добрый вечер!</b> '); 
//-->
</script>  Рады приветствовать Вас на форуме "Не про что ". У нас есть скрытые разделы, поэтому рекомендуем <a href="http://neprochto.forumbb.ru/login.php">войти</a> под своим аккаунтом или пройти несложный процесс <a href="http://neprochto.forumbb.ru/register.php">регистрации</a>.</p><br>

Время и дата на форуме, а так же время существования форума:

Код:

<h2>Текущее время</h2><br><p><iframe name="fantasy" src="http://fantasyflash.ru/vr2/vr12.htm" height="174" width="164" scrolling="no" frameborder="0"></iframe><br><br><SCRIPT language=JavaScript>
<!--
d0 = new Date('June 20, 2009');
d1 = new Date();
dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);
document.write('<b>Наш форум живет</b> ' + Math.round(dt) + '<b>-й день.</b>');
-->
</SCRIPT></p>

Новости форума:

Код:

<h3>Новости форума</h3>
<p>
<a href="#">Новость 1</a><br>
<a href="#">Новость 2</a><br>
<a href="#">Новость 3</a><br>
<a href="#">Новость 4</a><br>
<a href="#">Новость 5</a><br>
<a href="#">Новость 6</a><br>
<a href="#">Новость 7</a><br>
<a href="#">Новость 8</a><br>
<a href="#">Новость 9</a><br>
<a href="#">Новость 10</a><br>
</p>

Навигатор по форуму:

Код:

<h3>Навигатор по форуму</h3><br>
<p>
<form> 
<select name="select" class="forminput" onchange="location.href=(form.select.options[form.select.selectedIndex].value)"> 
 <option>-- Навигатор --</option> 
  <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=282"><small>о1. Правила</small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?pid=13804#p13804"><small>о2. Книга жалоб </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=188"><small>o3. Занятые </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=285"><small>o4. Шаблоны </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=286"><small>o5. Репутация. </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=549"><small>o6. Подпись. </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewforum.php?id=98"><small>o7. Реклама.</small></option> 
</select> 
</form> 
 <br><br>
Просто выбирайте нужный раздел и Вы автоматически будете перемещены в него!</p>

Ваш баннер:

Код:

<h3>Наш баннер</h3><br>
<p>
 <a href="http://narutosvobod.ru"><img src="http://forumupload.ru/uploads/0003/5f/e1/536845-3.gif"  title="Ролевая Игра по аниме Наруто"Narutosvobod RPG" /></a><br><br> 
Если Вы желаете помочь развиться нашему форуму, просто скопируйте следующий код и вставьте в любое удобное для Вас место:<br><br><TEXTAREA class=TEXTAREA rows=3 cols=25 name=S3> &lt;a href="http://narutosvobod.ru"&gt;&lt;img src="http://forumupload.ru/uploads/0003/5f/e1/536845-3.gif"  title="Ролевая Игра по аниме Наруто"Narutosvobod RPG" /&gt; </TEXTAREA></p>

Баннеры друзей:

Код:

<h3>Друзья форума</h3>
<p>
Предлагаем Вам посетить форумы наших друзей:
<center><marquee width="100" height="100" Direction="down" scrollamount="4" onMouseOut="document.all.abc.start()" onMouseOver="document.all.abc.stop()"><center>
<a href="http://style4you.org.ru" target=_blank><img 
src="http://pic.ipicture.ru/uploads/090516/2kbZTC1LZq.gif" alt="Фабрика Стиля!" border="0" 
width="88" hight="31"></a>
 
<a href="http://animetokyo.ru/"><img 
src="http://s55.radikal.ru/i149/0902/29/2695797162af.gif" alt="†Токио: Отражение 
Реальности†"></a>
 
<a href="http://narutoclan.ru"><img src="http://narutoclan.ru/banner.gif" alt="Naruto 
Clan"></a>
 
<a href="http://narutosoul.ru/" target=_blank><img height=31 title="NarutoSoul - скачать, аниме, манга, субтитры, наруто, фанфики, игры, музыка, видео, статьи" 
src="http://narutosoul.ru/banners/banner_88x31.gif" width=88 border=0></a>
 
<a href="http://naruto-online.net.ru/"><img title="РПГ Наруто" 
src="http://naruto-online.net.ru/banner.gif" border="0" height="31" width="88"></a>
 
<a href="http://narutosite.ru/" target="_blank"><img 
src="http://i024.radikal.ru/0906/d4/a243e9e8a0a7.png" border="0" width="88" height="31" 
alt="Narutosite"></a>
 
<a title="OnlyNaruto - аниме, манга, наруто, блич, ролевая, фанфики и многое другое!" 
href="http://onlynaruto.ru"><img src="http://onlynaruto.ru/newnews/banner2.gif" 
align="" border="0"></a>
 
<a target="_blank" href="http://otaku-of-naruto.clan.su/"><img title="Перейти к сайту Otaku of Naruto" alt="кнопка сайта" 
src="http://otaku-of-naruto.clan.su/banner88x31jgkluyuigbnmbkutg.jpg" /></a>
</center>
 
<center>
<a href="http://bleach.hutt.ru"><img 
src="http://s40.radikal.ru/i088/0905/57/9562dc4f3d50.png" width="88" hight="31" title="Bleach RPG.hutt.ru"></a>
 
<a href="http://poke-rpg.ru"><img src="http://pokemon.f-rpg.ru/uploads/0006/df/08/4965-2.png"  alt="Pokemon RPG"></a>
</center>
</marquee></center>
</p>

Случайная картинка:

Код:

<h3>Случайная картинка</h3>
<p>
<script language="JavaScript">
<!--
var a=Math.round(Math.random()*2)
image = new Array();
image[0]="http://www.cjx.ru/images/prw_170x_of_62453.jpg"
image[1]="http://s56.radikal.ru/i153/0901/12/34f7e0647d8dt.jpg"
image[2]="http://foto.ck.ua/files/thumbs/foto/12/55921293/180x120.jpg"
document.write ("<img src="+image[a]+">");
//-->
</script>
</p>

Опрос:

Код:

<h3>Опрос</h3>
<p>
<b>Вопрос</b><br>
<center>код опроса с сайта http://opros2000.ru/ </FORM>
</center></p>
</div>

Получить свой код можно тут: http://opros2000.ru/

Отредактировано rps (Вс, 2 Авг 2009 15:59:45)

+2

Поделиться3Вс, 2 Авг 2009 08:34:44

Автор: Электроник
Заслуженный
Зарегистрирован: Пн, 8 Июн 2009
Сообщений: 96
Уважение: +16
Позитив: +27
Пол: Мужской
Последний визит:
Пт, 9 Апр 2010 23:16:40

Спасибо, хорошая вещь!

+1

Поделиться4Вс, 2 Авг 2009 09:56:56

Автор: Mitsuri
Заслуженный
Зарегистрирован: Вт, 2 Июн 2009
Сообщений: 43
Уважение: +3
Позитив: +10
Последний визит:
Вт, 31 Мар 2020 18:29:59

rps

Знаете,вещь просто классная!Огромное спасибо!)Но у меня возникла проблема с расположением панели.Она никак не хочет стоять в стороне,а лезет прямо на форум)Вот так..Ссылка(скрин)

Я попыталась похимичить,но результат не утешает..Если у вас будет немного времени,помогите пожалуйста!

Отредактировано Mitsuri (Вс, 2 Авг 2009 09:57:55)

+1

Поделиться5Вс, 2 Авг 2009 10:30:43

Автор: [M.@.t.r.i.x]
Cтарожил
Зарегистрирован: Чт, 14 Фев 2008
Сообщений: 1119
Уважение: +1220
Позитив: +141
Пол: Мужской
Последний визит:
Ср, 9 Ноя 2022 00:29:23

Mitsuri
сколько раз говорить, давайте так же ссылку на форум

+1

Поделиться6Вс, 2 Авг 2009 10:38:40

Автор: Mitsuri
Заслуженный
Зарегистрирован: Вт, 2 Июн 2009
Сообщений: 43
Уважение: +3
Позитив: +10
Последний визит:
Вт, 31 Мар 2020 18:29:59

[M.@.t.r.i.x]

Сильно извиняюсь...Вот http://dokugiricity.spybb.ru/

Это тестовый форум,я на нем испытываю новые варианты дизайна)

+1

Поделиться7Вс, 2 Авг 2009 10:47:08

Автор: [M.@.t.r.i.x]
Cтарожил
Зарегистрирован: Чт, 14 Фев 2008
Сообщений: 1119
Уважение: +1220
Позитив: +141
Пол: Мужской
Последний визит:
Ср, 9 Ноя 2022 00:29:23

С CSS намудрили сильно. Отсюда и проблемы.

+1

Поделиться8Вс, 2 Авг 2009 10:50:51

Автор: [M.@.t.r.i.x]
Cтарожил
Зарегистрирован: Чт, 14 Фев 2008
Сообщений: 1119
Уважение: +1220
Позитив: +141
Пол: Мужской
Последний визит:
Ср, 9 Ноя 2022 00:29:23

Вообщем поковырял я ваш бедлам, убираем с селектора #pun - position: relative; а так же margin делаете auto и будет вам счастье

+1

Поделиться9Вс, 2 Авг 2009 10:52:02

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

Mitsuri написал(а):

Я попыталась похимичить,но результат не утешает..

возможно у вас уже стоит код сужающий форум.. :rolleyes:

+1

Поделиться10Вс, 2 Авг 2009 11:23:50

Автор: Mitsuri
Заслуженный
Зарегистрирован: Вт, 2 Июн 2009
Сообщений: 43
Уважение: +3
Позитив: +10
Последний визит:
Вт, 31 Мар 2020 18:29:59

[M.@.t.r.i.x]

Ой..ну и получилось..Ххах))Спасибо огромное вам за помощь.Мне блондинке лучше просто отказаться от этой идеи))Огромное вам спасибо что потратили своё время.

+1

Поделиться11Вс, 2 Авг 2009 12:29:16

Автор: (NIKSU)
Cтарожил
Зарегистрирован: Пн, 23 Июн 2008
Сообщений: 1001
Уважение: +504
Позитив: +451
Последний визит:
Сб, 2 Апр 2022 22:32:35

оу.....ну что прикольно...если зделать прозрачным....ну да будет нормально...
Теперь мне нужно выбрать меню или боковую панель....что советуете? =x
Что прописать чтобы с правой стороны был сид-бар?

+1

Поделиться12Вс, 2 Авг 2009 12:40:52

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

(NIKSU) написал(а):

оу.....ну что прикольно...если зделать прозрачным....ну да будет нормально...

Он уже "сделан из стекла"...

(NIKSU) написал(а):
Что прописать чтобы с правой стороны был сид-бар?

rps написал(а):
Выделенное розовым - позиция панели относительно форума. НЕ РЕКОМЕНДУЕТСЯ изменять эти значения начинающим пользователям и пользователям со средним опытом.

Читать надо.

0

Поделиться13Вс, 2 Авг 2009 12:56:32

Автор: [M.@.t.r.i.x]
Cтарожил
Зарегистрирован: Чт, 14 Фев 2008
Сообщений: 1119
Уважение: +1220
Позитив: +141
Пол: Мужской
Последний визит:
Ср, 9 Ноя 2022 00:29:23

Mitsuri
И опять намудрили я смотрю

0

Поделиться14Вс, 2 Авг 2009 13:00:12

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

[M.@.t.r.i.x]
Петь, я что-то промахнулся, в первых трёх стилях он налазит на форум... В остальных - всё гуд...

Отредактировано rps (Вс, 2 Авг 2009 13:00:28)

0

Поделиться15Вс, 2 Авг 2009 13:02:19

Автор: [M.@.t.r.i.x]
Cтарожил
Зарегистрирован: Чт, 14 Фев 2008
Сообщений: 1119
Уважение: +1220
Позитив: +141
Пол: Мужской
Последний визит:
Ср, 9 Ноя 2022 00:29:23

Ща буду экспериментировать сам, надо лису ставить с плагином веб-девелопер. Уточни стили

0

Поделиться16Вс, 2 Авг 2009 13:04:29

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

[M.@.t.r.i.x]
Классик и все ему подобные в самом начале.

0

Поделиться17Вс, 2 Авг 2009 13:08:31

Автор: Suzi
Заслуженный
Зарегистрирован: Пт, 19 Дек 2008
Сообщений: 132
Уважение: +16
Позитив: +14
Пол: Женский
Последний визит:
Вс, 17 Июл 2011 12:36:27

У меня возник вопрос. Я поставила боковую панель на свой тестовый форум, с оформлением Mybb Garik а он сразу же убрал родную окантовку шаблона вокруг разделов, которая мне очень и очень нравилась. Она гармонично вписывалась в мой дизайн на основном форуме. Как этого избежать?
тестовый форум, где убралась окантовка - http://thedarkbeginnings.mybb.ru/
основной форум, где эта окантовка присутствует и ее очень хочется сохранить - http://triedinstvo.mybb.ru/

+1

Поделиться18Вс, 2 Авг 2009 13:14:18

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

А что вы мудрите? У меня в структуре прописано

/* A5.1 */
#pun {
margin: 0px 0px 0px 0px;
width : 83%;
float: right;
padding: 0px 0px 0px 0px;
}

Из Пашиного кода я просто убрал

#pun {
margin: auto 20px auto 185px;
width : 870px;}

И всё, просто ширину самого бара подогнал по ширине и всё.
И ещё нарыл одно неудобство. Размер шрифта заголовка не реагирует на изменения.
Поменял выделенное

.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;}

На такой вариант
font-size: 17px

+1

Поделиться19Вс, 2 Авг 2009 13:16:56

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Good
Это если через свой стиль - то да, там эта строчка не нужна... А если через шаблонный, то наверное надо импотант прописать...

0

Поделиться20Вс, 2 Авг 2009 13:24:42

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

rps написал(а):

Это если через свой стиль - то да, там эта строчка не нужна... А если через шаблонный, то наверное надо импотант прописать...

Я это к тому что желательно форум ставить справа, меня напрягает полоса прокрутки в низу. А поставив справа эта проблема отпала

+1

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Sidebar (боковая панель) для форума

Сообщений 1 страница 20 из 472

Поделиться1Вс, 2 Авг 2009 01:35:59

Поделиться2Вс, 2 Авг 2009 01:37:37

Поделиться3Вс, 2 Авг 2009 08:34:44

Поделиться4Вс, 2 Авг 2009 09:56:56

Поделиться5Вс, 2 Авг 2009 10:30:43

Поделиться6Вс, 2 Авг 2009 10:38:40

Поделиться7Вс, 2 Авг 2009 10:47:08

Поделиться8Вс, 2 Авг 2009 10:50:51

Поделиться9Вс, 2 Авг 2009 10:52:02

Поделиться10Вс, 2 Авг 2009 11:23:50

Поделиться11Вс, 2 Авг 2009 12:29:16

Поделиться12Вс, 2 Авг 2009 12:40:52

Поделиться13Вс, 2 Авг 2009 12:56:32

Поделиться14Вс, 2 Авг 2009 13:00:12

Поделиться15Вс, 2 Авг 2009 13:02:19

Поделиться16Вс, 2 Авг 2009 13:04:29

Поделиться17Вс, 2 Авг 2009 13:08:31

Поделиться18Вс, 2 Авг 2009 13:14:18

Поделиться19Вс, 2 Авг 2009 13:16:56

Поделиться20Вс, 2 Авг 2009 13:24:42