Форум А и О (скрипты, дизайн, общение)

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум А и О (скрипты, дизайн, общение) » Общие вопросы и ответы » Сайдбар от пользователя ТП Rps. боковая панель


Сайдбар от пользователя ТП Rps. боковая панель

Сообщений 1 страница 30 из 32

1

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

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

+1

2

Теперь о том, как добавить своё минидополнение на сайдбар.

Для этого найдите в коде (в самом конце) строчку

Код:
<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/









СайдБар под классические стили:

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


Sidebar (боковая панель) для форума в процентах, под все разрешения монитора. (Для стилей типа Classic)

<style>
#pun {
  margin: 0% 0% 0% 13.7%;
  width : 80%;
  padding: 0% 0% 0% 6.4%;
}
.sidbar {background: transparent ; width: 23%; height: 1600px; border: 1px solid; position: absolute; z-index: 1000;  top: 0%; right: 31%; left: -15.6%;}
.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>

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

<style>#pun {
float: left;
  margin: 0px 0px 0px 5px;
  width : 803px;
border: none;
}
.sidbar {background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); width: 195px;  border: 0px solid; position: absolute; z-index: 1000;  top: 0px; right: 0px; left: 810px;}
.sidbar h1 , .sidbar h2 , .sidbar h3 {
background:  transparent ; font-size: 12px; font-weight: bold; text-align: center; color: #9F4F21; border: 0px none; width: 90%; margin: auto;}
.sidbar p {padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;color: #9F4F21; text-align: center;}
</style>
<div class="sidbar"> Здесь вставляем что надо </div>

Sidebar с обеих сторон форума.
Для большинства стилей МайББ:

<style>
#pun {
  margin: auto 175px 0 175px;
  width : 700px;}
.sidbar1 {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;}
.sidbar2 {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: 5px; left: 895px;}
.sidbar1 h1 , .sidbar1 h2 , .sidbar1 h3, .sidbar2 h1 , .sidbar2 h2 , .sidbar2 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;}
.sidbar1 p, .sidbar2 p{padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}
</style>
<div class="sidbar1">...</div>

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


Для стилей линейки "Классик" и стилей из генератора:

<style>
#pun {
  margin: auto 155px 0 195px;
  width : 700px;}
.sidbar1 {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: -190px;}
.sidbar2 {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: 5px; left: 700px;}
.sidbar1 h1 , .sidbar1 h2 , .sidbar1 h3, .sidbar2 h1 , .sidbar2 h2 , .sidbar2 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;}
.sidbar1 p, .sidbar2 p{padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}
</style>

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

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

0

3

смотри что получилосЬ http://willwandam.5bb.ru она весь форум загородила

0

4

Белка воительница

регулировать нужно размеры

0

5

Студентка
регулирую неполучается. вот как отлегуриловала :

<style>
#pun {
  margin: auto 10px auto 185px;
  width : 870px;}
.sidbar {background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); width: 188px; height: 7000px; 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>

0

6

Белка воительница

попозже сделаю, щас тока встала, голова не варит

0

7

Белка воительница

попробуй это

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

0

8

Студентка
пасябки

0

9

Студентка

мож мне сделать а то вообще не чего не понела(( http://i.smiles2k.net/plakat_smiles/dura.gif

0

10

Стюнька)) написал(а):

мож мне сделать а то вообще не чего не понела((

ссылку на  форум

0

11

http://eshli.3bb.ru

0

12

Стюнька))

ну и что, убирай твою таблу которая там и ставь это-в хтмл верх

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

0

13

а как в нее что либо вставлять??))

0

14

Стюнька)) написал(а):

а как в нее что либо вставлять??))

второе сообщение темы читай-в конце кода есть это

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

вместо точек добавляй что нужно, только читай все во 2 сообщении-как добавлять

0

15

ага спасиб))

0

16

А можно мне тоже  на вот этот сайт http://otherhistory.1bb.ru/ , а то чёт голова не варит....
Зарание спасибо!

0

17

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

А можно мне тоже  на вот этот сайт http://otherhistory.1bb.ru/ , а то чёт голова не варит....
Зарание спасибо!

Эм... не поняла, скрипты даны, берит и ставьте)

0

18

Студентка
Я чёт ставлю , а у меня всё в строчку идёт (наверху) =)

0

19

Crazy_doll
куда ставите? и какой из кодов?

0

20

Студентка
В хтмл вверх , все коды....

0

21

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

Студентка
В хтмл вверх , все коды....

в смысле все коды-сразу, или по очереди?))

0

22

Студентка
Ну в линию в одну)

0

23

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

Студентка
Ну в линию в одну)

в линию в одну. блин вас не поймешь.

делаем так-ставьте 1 код, и делайте скриншот

0

24

Студентка
Всё мне погогли , извените что потревожила вас.

0

25

Студентка

[/hide]

0

26

Студентка
как обьявление за место добро пожаловать вставить??
А заместо текущего времени админов??
и чат как туда поставить???

0

27

Стюнька)) написал(а):

Студентка
как обьявление за место добро пожаловать вставить??

скрипт рассмотри внимательно и все увидишь.

<h1>Добро пожаловать</h1>

меняй местами все.

0

28

Как вставить картинку?

0

29

НяФкО написал(а):

Как вставить картинку?

обычным кодом
если картинка заголовок то так

<h1><img src="адрес картинки"></h1>

если содержимое то так

<p><img src="адрес картинки"></p>

+1

30

Новый вариант сайдбара(боковой панели) для Вашего форума! Бета-версия.

Что нового?

1. Панель теперь является частью форумной таблицы и выглядит одинакого при разных разрешениях экрана.
2. Автоподгонка под длину форума. На всех страницах боковая панель будет совпадать по длине с Вашим форумом. Подгонять ничего не требуется.
3. Исправлены ошибки в минидополнениях для боковой панели. Проверена кроссбраузерность.

Установка:
Установите этот код в самый низ поля ХТМЛ-верх:

</div>
<style>
.sidebar{
min-width: 168px;
border-style: solid 1px #fff;
vertical-align: top;
background: #e4eaf2;
padding: 10px;
font-family: Microsoft Sans Serif;
}
.sidebar h1, .sidebar h2 , .sidebar 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;
font-family: Microsoft Sans Serif;
}
.sidebar p {
padding: 5px;
margin: auto auto 15px auto;
text-align: center;
font-family: Microsoft Sans Serif;
}
</style>
<table>
<tr>
<td class="sidebar">Здесь содержимое Вашего сайдбара</td>
<td>

А этот код установите в самый низ поля ХТМЛ-низ:

</td>
</tr>
</table>

посмотреть можно тут

автор тот же-Rps

0


Вы здесь » Форум А и О (скрипты, дизайн, общение) » Общие вопросы и ответы » Сайдбар от пользователя ТП Rps. боковая панель


Сервис форумов BestBB © 2016-2020. Создать форум бесплатно