Sidebar (боковая панель) для форума (© 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>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;}
Выделенное красным - отступы от минидополнений до границы сайдбара. Необходимы для выравнивания минидополнений по центру панели. Значения идут в порядке: верхнее, правое, нижнее, левое.
Выделенное зелёным - выравнивание текстовой информации в минидополнениях.
_____________________________________________
(с) Li:
Теперь о том, как добавить своё минидополнение на сайдбар.
Для этого найдите в коде (в самом конце) строчку
Код:<div class="sidbar">...</div>Вместо трёх точек Вы сможете поставить те минидополнения, которые Вам понравятся.
Понятное дело, что заголовок и содержимое может быть любым. Ниже приведён список уже готовых минидополнений. Вам останется только вставить их к себе на форум.
НЕ ЗАБЫВАЙТЕ, что нужно подставлять СВОИ данные, например адреса картинок, тексты, ссылки, коды баннеров и прочее!Приветствие для гостей:
Код:<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><br>Ваш баннер:
Код:<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> <a href="http://narutosvobod.ru"><img src="http://forumupload.ru/uploads/0003/5f/e1/536845-3.gif" title="Ролевая Игра по аниме Наруто"Narutosvobod RPG" /> </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>код опроса с сайта </FORM> </center></p> </div>
________________________________
(с) igo2309:
Неплохо смотрится в боковой панели и упрощает навигацию по форуму "облако тэгов"... Долго искал этот скрипт для форумов MyBB - теперь готов поделится с остальными...
Для реализации этой фичи:
в html-низ
Код:<script type="text/javascript" src="http://anime-4ever.ru/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.mode = 'tags'; flashvars.minFontSize = '8'; flashvars.maxFontSize = '14'; flashvars.tcolor = '0x1D3D61'; flashvars.tcolor2 = '0x4D6D91'; flashvars.hicolor = '0xd193978'; flashvars.distr = 'true'; flashvars.tspeed = '100'; eTagz = document.getElementById('yoblako').getElementsByTagName('A'); flashvars.tagcloud = '<tags>'; for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href') + '\' style=\'' + parseInt(eTagz[i].style.fontSize) + '\'>' + eTagz[i].innerHTML + '</a>'; delete eTagz; flashvars.tagcloud += '</tags>'; var params = {}; params.wmode = 'transparent'; params.bgcolor = '#FFFFFF'; params.allowscriptaccess = 'always'; var attributes = {}; attributes.id = 'yoblako'; attributes.name = 'tagcloud'; swfobject.embedSWF('http://anime-4ever.ru/tagcloud.swf', 'yoblako', '215', '150', '9.0.0', false, flashvars, params, attributes); </script>вставляем вышеприведенный код, а в нужном месте в сайдбар:
Код:<div id=yoblako><noindex> <a style="font-size:9pt;" href="ссылка" rel="nofollow" class="eTag eTagGr9">текст</a> <a style="font-size:9pt;" href="ссылка" rel="nofollow" class="eTag eTagGr9">текст</a> </noindex></div>естественно "ссылка" и "текст" изменяем на свое...
Строку
Код:<a style="font-size:9pt;" href="ссылка" rel="nofollow" class="eTag eTagGr9">текст</a>дублируем необходимое количество раз...
Мда, как это выглядит можно посмотреть у меня на форуме... (НЕ для рекламы... Для примера
)
