ТАБЛИЦА

motools tabs effect

HTML верх

Код:

<style type="text/css" media="screen">
    	body {background-color: #555; color: #fff;}
    	a {color: #afafaf;}
    </style>
<div id="myTabs" class="mootabs">
        <ul class="mootabs_title">
        	<li title="My Work">My Work</li>
        	<li title="About Me">About Me</li>
        	<li title="Contact">Contact</li>
        </ul>
        
        <div id="My Work" class="mootabs_panel">

        	<h1>Tab 1</h1>
        	содержание1        </div>
        
        <div id="About Me" class="mootabs_panel">
        	<h1>Tab 2</h1>
содержание 2        </div>
        <div id="Contact" class="mootabs_panel">

        	<h1>Tab 3</h1>
        	содержание 3       </div>
    	</div>

HTML низ

Код:

<script src="https://forumstatic.ru/files/000f/33/e7/21135.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://forumstatic.ru/files/000f/33/e7/90794.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    	window.addEvent('domready', init);
    	function init() {
        myTabs1 = new mootabs('myTabs', {height: '350px', width: '500px', changeTransition: Fx.Transitions.Back.easeOut, mouseOverClass: 'over'});
        
    	}
    </script>

Цвета style_cs.css

Код:

}



.mootabs_title {
	list-style-image: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	height: 24px;
	
}

.mootabs_title li {
	float: left;
	background-color: transparent;
	padding: 2px 8px 2px 8px;
	margin-right: 2px;
	cursor: pointer;
	color: #fff;
	font-family: "Trebuchet MS";
	font-size: 12px;
	height: 24px;
	line-height: 24px;
}

.mootabs_title li.active {
	border-top: 3px solid #55FF2A;
}

.mootabs_panel {
	display: none;
	position: relative;
	width: 100%;
	top: -1px;
	font-family: "Trebuchet MS";
	clear: both;
	color: #fff;
	overflow: auto;
	text-align:left;
	padding: 3px;
}

.mootabs_panel.active {
	background-color: #272822;
	display: block;
	
}

.mootabs_title li.over {
	border-top: 3px solid #30DA06;
}

из размытого в нормлаьный

верх

Код:

<ul class="hoverbox">
<li>
<a href="ссылка на профиль" target="_blank">
<img src="ссылка на маленькую размытую картинку" border="0"> 
<img class="preview" src="ссылка на большую картинку" border="0" ></a>
</li>
</ul>
<ul class="hoverbox">
<li>
<a href="ссылка на профиль" target="_blank">
<img src="ссылка на маленькую размытую картинку" border="0"> 
<img class="preview" src="ссылка на большую картинку" border="0" ></a>
</li>
</ul>
<ul class="hoverbox">
<li><a href="ссылка на профиль" target="_blank">
<img src="ссылка на маленькую размытую картинку" border="0"> 
<img class="preview" src="ссылка на большую картинку" border="0" ></a></li></ul>

цвета стайл

Код:

/* Hoverbox Code*/ 
.hoverbox {cursor: default;list-style:none;} 
.hoverbox a {cursor: default;} 
.hoverbox a .preview {display:none;} 
.hoverbox a:hover .preview {display: block;position: absolute;top:-33px;left:-45px;z-index:1;} 
.hoverbox img {background: #fff;border-color: #a6dcf5;border-style: solid;border-width: 1px;color: inherit;padding: 0px;vertical-align:top;} 
.hoverbox li {background: #eaf8fe;color: inherit; display: inline;float:left;margin: 3px;padding:1px;position: relative;} 
.hoverbox .preview {border-color: #a6dcf5;}

размытой картинку делаете сами, ага хд

Плавная смена картинок при наведении

В HTML-верх или в стиль без тегов.

Код:

<style>
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
 
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>

Туда, где должны быть изображения:

<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>

Красное - изображение до наведения.
Синее - при наведении.
Можно размножать вместе с внешним div-блоком.

правильно

<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
...

неправильно

<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>

Контейнер в объявление с боковыми вкладками

Аналог

Авторы: Авторы: rps, Deff, Кофеман
Источник: forumdts.org

Код:
В хтмл-верх:

Код:

<style>	
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
}
#submenu, #menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background:#efeff0;
}

#menu .tabactive {
color: #000000;
    background:#777777;
}

#submenu {
padding: 3px;
height: 180px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

В хтмл-низ:

Код:

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

В место установки контейнера:

Код:

<center><table style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
текст добро пожаловать
</div>
     <div id="sm2" class="submenutext"><br /><br />
текст новости форума
</div>
     <div id="sm3" class="submenutext"><br /><br />
текст Администрация
</div>
     <div id="sm4" class="submenutext"><br /><br />
текст баннеры партнеров
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>

Стилизация та же, что и в аналоге.

онтейнер с вкладками для информации

Источник
Автор неизвестен
Установка:
В низ ставится переключатель между вкладками

Код:

<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
<script type="text/javascript">

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>

В верх код, который потом поможет настроить стиль:

Код:

<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
}

ul.tabs li a:hover {
       background: url();
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  
}    

html ul.tabs li.active  {
    background: url();    
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;   
}  

html ul.tabs li.active a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 900px;
    height: 343px;
    background-image : url();   
background-color: #FFFFFF;  
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}
</style>

И сам контейнер. Ставите куда хотите:

Код:

<div class="container">
    <div class="html-box">

<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>

<div style="display: none;" id="tab2" class="tab_content">
текст 2
</div>

<div style="display: none;" id="tab3" class="tab_content"> 
текст 3
</div>

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

Инструкция:
Создание вкладок

<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
</ul>

чтобы добавить вкладку нужно дублировать строчку:

<li><a href="#tab2">Вкладка 2</a></li>

отображаться вкладки будут в том порядке, в котором вы их впишете.
Зеленое нужно вписать в ту вкладку, которая будет по умолчанию открыта.
Краснная цифра - это номер вкладки. Нужно обязательно ставить.
Синее - это название вкладки.
Создание содержимого вкладки

Вкладки создаются в таких контейнерах

<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>

красное - это номер вкладки. он должен соответствовать тому, который вы вписали в список вкладок (см. пункт "Создание вкладок")
такие контейнеры могут идти в любом порядке, который вам удобен, т.к. отображаться они будут при клике.
Стилизация
Берем код, который вставляется в html-верх и редактируем

.container1 {width: 900px; margin: 0 auto; padding: 0;}

Это стиль контейнера, который содержит вкладки и содержимое вкладок.
На месте красной цифры укажите ширину в пикселях.

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;
}

Это стиль всего списка вкладок.
Красное - это расположение: left - слева; right - справа. Значения "центр" не существует!
Синее - это высота в пикселях
Зеленое - это ширина. Либо оставьте сточку в пикселях, либо в процентах в зависимости от ваших предпочтений

ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    margin-bottom: -2px;
    background: #000000 url();
    overflow: hidden;
    position: relative;
}

Это стиль названий вкладок
Красное - это расположение: left - слева; right - справа. Значения "центр" не существует!
Синее - это высота в пикселях
Зеленый кусок - это границы. ниже написано как их настраивать.
Розовое - фон.
можно вписать цвет здесь: #000000
или всписать ссылку на картинку: background: url(http://картинко);
Как настраиваются границы
если вы хотите чтобы границы вокруг названий вкладок были стандартные сделайте так:

Код:

ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 1px;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

Если вы хотите настроить их, экперементируйте:

border-bottom: 1px dotted #000000;

border-top - верхняя граница
border-bottom - нижняя  граница
border-right - правая граница
border-left -  левая граница
красное - толщина границы в пикселях. не хотите, чтобы она отображалась? поставьте нолик
синее - это стиль границ: dotted - точками, dashed - пунктиром, solid - линия, double - двойная линия, groove - вогнутая, ridge - выпуклая
зеленое - это цвет границ

Код:

ul.tabs li a:hover {
...
}

Это стиль списка при наведении курсора.
настраивается так же, как и выше

Код:

html ul.tabs li.active  {
....
}

Это стиль активной (открытой) вкладки
настраивается так же, как и выше

Код:

html ul.tabs li.active a:hover  {
....
}

Это стиль активной (открытой) вкладки при наведении курсора
настраивается так же, как и выше

.tab_container1 {
    clear: both;
    float: left;
    width: 900px;
    height: 343px;
    background-image : url();   
background-color: #FFFFFF; 
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;   
        border-left: 0px solid #000000;   
        border-right: 0px solid #000000;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

Это стиль контейнера с содержимым
Красное делает границы закругленными.
Жирная цифра влияет на "закругление", чем больше цифра - тем более округлые границы.
Остальное настраивается так же .

.tab_content {
    padding: 5px;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}

Это стиль самого содержимого
красное - отступ от границ в пикселях.
PS: чтобы сделать вкладки по центру в ul.tabs удаляете float: left; и заменяете на

text-align: center;

а так же в ul.tabs li удаляете float: left; и ставите
display: inline-block;
    width: 320px;

  text-align: center;

где красное - ширина

Линки

цвета стайл

Код:

a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm:hover {
color : #000000;
background : #e8000b;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}






a.tvm2, a.tvm2:active, a.tvm2:link, a.tvm2:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm2:hover {
color : #000000;
background : #ffff08;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}






a.tvm3, a.tvm3:active, a.tvm3:link, a.tvm3:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm3:hover {
color : #000000;
background : #ff00ff;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}

там, где будет стоять

Код:

<table><tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>


</tr>





<tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>


</tr>


<tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>


</tr>




</table>

цвета стайл

Код:

A.navi:link, A.navi:active, A.navi:visited {background:#000000;font-family: small fonts;padding:10px;font-size: 7px;text-align:left;line-height: 7px;letter-spacing: 2px;color:#ffffff;text-transform: uppercase;display:block;width:160px;margin:1px;font-style:normal;}

A.navi:hover {background-image:url('http://s45.radikal.ru/i109/1008/c9/99903e342ce1.jpg');font-family: small fonts;padding:10px;font-size: 7px;text-align:right;line-height: 7px;letter-spacing: 2px;color:#f0f0f0;text-transform: uppercase;display:block;width:160px;margin:1px; text-decoration: none; font-style:normal;font-weight:normal;}

туда, где ставим:

Код:

<a href="#" class="navi" target="frame">home page</a>
<a href="#" class="navi" target="frame">links</a>
<a href="#" class="navi" target="frame">contact</a>
<a href="#" class="navi" target="frame">content</a>
<a href="#" class="navi" target="frame">chat-box</a>

цвета стайл

Код:

a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
font-family: tahoma;
font-size: 11px;
background-color:#832480;
color: #dcd3dc; 
font-weight: normal;
text-align:center;
display: block;
margin: 1px;
text-decoration: none;
border-left-style: solid;
border-left-color: #dcd3dc;
border-left-width: 5px;
width:200px;
}

a.tvm:hover {
font-family: tahoma;
font-size: 11px;
color: #832480; 
background-color:#dcd3dc;
display: block;
font-weight: bold;
text-align:center;
cursor:crosshair; 
text-decoration: none;
border-left-style: solid;
border-left-color: #832480;
border-left-width: 5px;
width:200px;
}

туда, куда ставим

Код:

<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">каждый </a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">охотник</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">желает</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">знать</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">где </a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">сидит</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">фазан</a>

цвета стайл

Код:

a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;
 
background-color: grey;
font:normal 7pt century gothic;
color: #ffffff;
line-height: 14pt;
text-transform: uppercase; 
text-align: center;
display:block;
width:120px;
border-bottom: 2px solid  grey;
}
a.menu:hover {
background-color:#666666;
color:  #FFFFFF ;
border-bottom :2px solid  #ffffff;}

туда, куда ставим

Код:

<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
 
</table>

цвета стайл

Код:

a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;

background: grey;
width: 70px;
border-top: 3px solid #800000;
font-family: verdana;
font-size: 12px;
text-decoration: none;
font-style: italic;
color: #800000;
border-bottom: 3px solid grey;
display:block;
text-align:center;
}
a.menu:hover {
background: #c0c0c0;
border-top: 3px solid #c0c0c0;
border-bottom: 3px solid #800000; }

туда, куда ставим

Код:

<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td>
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
 
</table>

цвета стайл

Код:

a.men:link, a.men:visited, a.men:active{
text-decoration: none;
background: #000000;
width: 85px;
padding-top: 5px;
padding-bottom: 5px; 
font-family: Verdana;
font-size: 12px;
color: #FFFFFF;
display: block;
-moz-border-radius: 7px;
border-radius:7px;
text-align:center;
}
a.men:hover {
background: #c0c0c0;
-moz-border-radius: 7px;
border-radius:7px;
cursor: default;
}

туда, куда ставим

Код:

<table bgcolor="#000000"> 
<tr> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
</tr> 
 
</table>

"медленная" прокрутка текста с остановкой при наведении мыши

Код:

<marquee align="justify"  scrolldelay="300" scrollamount="3" onmouseover=this.stop() onmouseout=this.start() width="380" height="100" direction="up"> 
текст
</marquee>

мини-галерея с авто уменьшением изображений

Демо можно посмотреть тут: http://oaotr.0pk.ru/pages/gallery_1
Скриншот для ленивых  :

Демо можно посмотреть тут: http://oaotr.0pk.ru/pages/gallery_1
Скриншот для ленивых  :

В галерею в качестве показателя вставлена вот такая вот картинка: https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg (у вас, конечно, картинки могут быть абсолютно разные)
Вы можете наблюдать авто-подгон размера с маленькими превью и увеличением при наведении.
Код галереи
HTML (вставлять туда, где вы хотите разместить галерею)

Код:

<table  id="mini_gallery">
 <tr>
  <td class="gall_con">
   <div class="name">
      <table class="gt">
       <tr>
       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row1">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>
       </tr>
       <tr>
       <td>
        <div class="gall_row2">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row2">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row2">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row2">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row2">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>

       <td>
        <div class="gall_row2">
        <a href="#"><img src="https://forumupload.ru/uploads/0007/e3/f7/38566-4-f.jpg"></a>
        <span>текст-описание</span>
        </div>
       </td>
       </tr>
      </table>
   </div>
  </td>
 </tr>
</table>

CSS (вставлять в html-верх)

Код:

<style>
#mini_gallery {width: 500px; height: auto; margin: 5px;}

#mini_gallery td.gall_con .name {position: relative; height: 135px;}

table.gt {width: 100%;}
table.gt td {min-width: 60px; min-height: 60px;}

#mini_gallery td.gall_con {width: 270px; padding: 5px; vertical-align: top; background: url() #54504F;}

#mini_gallery td.gall_con .gall_row1, #mini_gallery td.gall_con .gall_row2 {width: 50px; height: 50px; padding: 5px; background: #ffffff url() repeat;}

#mini_gallery td.gall_con .gall_row1 img, #mini_gallery td.gall_con .gall_row2 img {max-width: 50px; max-height: 50px; margin: auto; }

#mini_gallery td.gall_con .gall_row1 span, #mini_gallery td.gall_con .gall_row1 span a, #mini_gallery td.gall_con .gall_row2 span, #mini_gallery td.gall_con .gall_row2 span a {display: none;}

#mini_gallery td.gall_con .gall_row1:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -45px; margin-left: -45px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}

#mini_gallery td.gall_con .gall_row2:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -30px; margin-left: -30px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}

#mini_gallery td.gall_con .gall_row1:hover img, #mini_gallery td.gall_con .gall_row2:hover img {max-width: 130px !important; max-height: 130px !important; margin: auto; border: 1px dashed #000000;}

#mini_gallery td.gall_con .gall_row1:hover span, #mini_gallery td.gall_con .gall_row2:hover span {font-size: 12px; display: block;}
#mini_gallery td.gall_con .gall_row1:hover span a, #mini_gallery td.gall_con .gall_row2:hover span a {font-size: 12px;}
</style>

CSS-настройка
FAQ для новичков
самый частые вопросы - это как поменять фон и как настроить границы. чтобы в каждом куске кода не упоминать, описываю здесь настройки.
настраиваем фон:

элемент {background: #цвет url(ссылка на картинку)}

если заливка не нужна (прозрачный цвет) вместо отмеченного красным пишем transparent
Возможно добавить в код дополнительные функции
(вставлять исключительно после ссылки на картинку (закрывающейся круглой скобки) не забывая ставить точку с запятой как разделитель)
background-attachment: fixed - не прокручивающееся фоновое изображение
no-repeat - фоновое изображение прокручивается используя только один элемент (картинку) без повторов
repeat - фоновое изображение повторяется по горизонтали и вертикали.
repeat-x - фоновое изображение повторяется только по горизонтали
repeat-y - фоновое изображение повторяется только по вертикали
background-position: top center - фоновое изображение располагается по центру (вверху)
background-position: top left - верху слева
background-position: right top - верху справа
background-position: left слева по центр
background-position: right с права по центру
background-position: bottom left - внизу слева
background-position: bottom - внизу
background-position: bottom right - внизу справа
настраиваем границы:
border-color - Цвет рамки
border-width - Толщина рамки
border-style - Стиль оформления рамки всех сторон рамки
     Значения:
     none - указывает на то, что рамки нет.
     dotted - задает пунктирную рамку из точек
     dashed - задает штрих - пунктирную рамку
     solid - задает одинарную сплошную рамку
     double - задает двойную сплошную рамку
     groove - создает трехмерный эффект впадающей рамки
     ridge - создает трехмерный эффект возвышающейся рамки
     inset - создает трехмерный эффект заглубленности фона
     outset - создает трехмерный эффект выпуклости фона
border-top - Все параметры верхней рамки
border-bottom - Все параметры нижней рамки
border-left - Все параметры левой рамки
border-right - Все параметры правой рамки
Примеры:

элемент {border: #FF0000 dashed 2px;}

элемент {border-top: #FF0000 dashed 0px; border-bottom: #FF0000 dashed 0px; border-left: #FF0000 dashed 2px; border-right: #FF0000 dashed 2px; }

разбор CSS галереи
разбираю css-код по кускам в том порядке, в котором он выложен выше

#mini_gallery {width: 500px; height: auto; margin: 5px;}

задает стиль таблички, внутри которой все находится
красное - ширина, синее - отступы от краев

#mini_gallery td.gall_con .name {position: relative; height: 135px;}
задает позиционирование контейнера, содержащего галерею
жирная цифра - "высота галереи"
table.gt {width: 100%;}
table.gt td {min-width: 60px; min-height: 60px;}

параметры таблички-галереи относительно контейнеров, которые ее содержат
красное - ширина (лучше в процентах указывать. будет брать проценты от ширины, указанной в первом куске кода)
синее - минимальная высота и ширина ячеек (которые содержат контейнеры с картинкой и описанием).

#mini_gallery td.gall_con {width: 270px; padding: 5px; vertical-align: top; background: url() #54504F;}

задает параметры для ячейки, в которую запихнута табличка с галереей. таким образом можно настроить "задник" галереи.
красное - ширина, синее - отступы, зеленое - фон

#mini_gallery td.gall_con .gall_row1, #mini_gallery td.gall_con .gall_row2 {width: 50px; height: 50px; padding: 5px; background: #ffffff url() repeat;}

задает параметры контейнеров, содержащих картинку и описание.
красное - ширина, синее - высота, зеленое - отступы друг от друга, розовое - фон

#mini_gallery td.gall_con .gall_row1 img, #mini_gallery td.gall_con .gall_row2 img {max-width: 50px; max-height: 50px; margin: auto; }

это та самая "магия", которая уменьшает картинку до иконки.
управляем циферками, если вам нужно поменять размер иконок.

#mini_gallery td.gall_con .gall_row1 span, #mini_gallery td.gall_con .gall_row1 span a, #mini_gallery td.gall_con .gall_row2 span, #mini_gallery td.gall_con .gall_row2 span a {display: none;}

убирает текст-описание на превью. благодаря этому куску оно видно только при наведении курсора на картинку.

#mini_gallery td.gall_con .gall_row1:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -45px; margin-left: -45px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}
#mini_gallery td.gall_con .gall_row2:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -30px; margin-left: -30px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}

обратите внимание на красное: при создании каркаса мы задавали отдельные классы для контейнеров в первой и второй строках - теперь мы в CSS задаем разные стили для всплывающих окошек в одной и второй строке, а именно, места, где они всплывают (синее). если у вас галерейка в столбик, а не в строчку, то вам очень внимательно надо отнестись к этим отступам!
и еще немного о настройках всплывающих окон:

#mini_gallery td.gall_con .gall_row1:hover {background: #d0d0d0; position: absolute; width: 150px; height: 150px; padding: 7px; text-align: center; top: -45px; margin-left: -45px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; box-shadow: 2px 2px 3px #000000; opacity: 0.8; -moz-opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -khtml-opacity: 0.8;}

красное - фон, синее - ширина, зеленое - высота, розовое - отступы;
салатовое - волшебство CSS3 (нагло украдено с одной из галереек на сайте ruseller.com). Играться с настройками новичкам не советую, но "безвредные части" отметила жирным: border-radius - это закругление, box-shadow - это тень окошка.

#mini_gallery td.gall_con .gall_row1:hover img, #mini_gallery td.gall_con .gall_row2:hover img {max-width: 130px !important; max-height: 130px !important; margin: auto; border: 1px dashed #000000;}

это управляет картинкой, которая отображается в всплывающем окошке.
красное - максимальная ширина, синее - максимальная высота (даже если вы обоину огромную вывесили авто-уменьшение и тут работает  );
зеленое - рамочка для красоты (уберите, если не надо. как настраивать рамки - описано выше)

#mini_gallery td.gall_con .gall_row1:hover span, #mini_gallery td.gall_con .gall_row2:hover span {font-size: 12px; display: block;}
#mini_gallery td.gall_con .gall_row1:hover span a, #mini_gallery td.gall_con .gall_row2:hover span a {font-size: 12px;}

размер шрифта в тесте-описании
ВСЕ!
надеюсь, не слишком мудрено для новичков и вполне оптимально для тех, кто желает изменить галерею с помощью CSS до неузнаваемости.
спасибо rusff

перелистывание

от нестандарта, фондю
верх

Код:

<style>#slideshow {
margin:0 auto;
width:370px;
height: 100px;
position:relative;
line-height: 10px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:300px;
  height: 100px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:300px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:100px;
}
/** 
* Slideshow controls style rules.
*/
.control {
  display:block;
  width: 100px;
  height: 163px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top: 45px;
  left: 20px;
  background:transparent url(http://10pix.ru/img1/242918/5352879.png) no-repeat 0 0;
}
#rightControl {
  top: 45px;
  right: -70px;
  background:transparent url(http://10pix.ru/img1/1215/5352880.png) no-repeat 0 0;
}
/*Style rules for Demo page */
* {
  margin:0;
  padding:0;
}


.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 300;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  // Hide left arrow control on first load
  manageControls(currentPosition);
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>

<div style="width: 300px; height:100px; text-align: justify;  border: none; font-family: arial; font-size: 11px; line-height: 2px; margin: 1px;   position: absolute; margin-left: 50px; top: 40px; ">
<div id="pageContainer">
  <!-- Slideshow HTML -->
   <div id="slideshow">
    <div id="slidesContainer">
     
      
     <div class="slide">
        <p>    Третий контейнер    </p>
      </div>
     <div class="slide">
        <p>     Второй контейнер     </p>
      </div>
<div class="slide">
        <p>    Первый контейнер   </p>
      </div>


    </div>
  </div>
  <!-- Slideshow HTML -->
</div></div>

смена картинок при наведении

Код:

<a href="ссылка"><img src='простая картинка без наведения'
onmouseover="this.src='картинка при наведении'"
onmouseout="this.src='простая картинка без наведения'" border=0>

увеличение при наведении

хтмл-низ

Код:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0);
$('.menuitem').mouseover(function(){
; gridimage = $(this).find('img');
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 100}, 150);
});
}); 
</script>

Размер превью по умолчанию — 100*100 пикселей. Если вы хотите его изменить, вы должны указать свой размер в четвертой строке:
$('.menuitem img').animate({width: 100}, 0);
То же самое относится к оригинальному изображению. Максимальный размер — это 200 пикселей:
gridimage.stop().animate({width: 200}, 150);
хтмл-верх

Код:

<style type="text/css">

img {
	border: none;
}

#menuwrapper{
	left: 20%;
	position: relative;
	height: 210px;
}

#menu{
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.menuitem {
	position: fixed relative;
	bottom: 0px;
	display: inline-block;
}

</style>

height: 210px; — это высота линии. Если ваши изображения (в оригинальном размере) больше 200 пикселей, измените это значение.
3) Осталось только поместить сам плагин на страницу. Для этого, между тегами <body>, в место, где должен отображаться плагин вставьте следующий код:

Код:

<div id="menuwrapper">
<div id="menu">
<a href="http://" class="menuitem"><img src="URL"></a>
<a href="http://" class="menuitem"><img src="URL"></a>
<a href="http://" class="menuitem"><img src="URL"></a>
<a href="http://" class="menuitem"><img src="URL"></a>
</div>
</div>

эффект растворения

хтмл-низ

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Код:

<script type="text/javascript">
    $(document).ready(function() {
        $('.Hoverbuttons').each(function () {
              var $span = $(this).css('opacity', 0.3);
              $(this).hover(function () {
                $span.stop().fadeTo(600, 1);
             }, function () {
                $span.stop().fadeTo(600, 0.3);
              });
        });
    });
</script>

Изображению, которому вы хотите добавить этот эффект, нужно добавить класс Hoverbuttons:

Код:

<img src="URL" class="Hoverbuttons">

боковая таблица table (упрощенный вариант без наворотов)

По сути, это обычный html. Ничего сверхъестественного нет.

<table background="ссылка на фон таблицы" border=0 //размер рамки// width="190px" //ширина таблицы// style="text-align: justify; //положение текста// position: absolute; top: 600px; //смещение таблицы вниз от верха форума// margin-left: -202px; //смещение вправо/влево от тела форума. Варьируйте значения чтобы сдвинуть таблицу вправо или влево.//">
<tr><td>
текст текст текст
</td></tr></table>

Боковая таблица со сдвигом категорий

Принцип действия скрипта:

Ограничения:
высота таблицы = высоте вышей категории, так что для его использования приходилось немного растягивать подфорумы лишним текстом.
подфорумы должны быть доступны всем *гостям в том числе* иначе таблица будет налазить на вторую категорию.
иконки сообщение в этом дизайне лучше размещать справа, как на примере, в противном случае они либо будут висеть на инфе вашей таблицы, либо вообще исчезнут.
код:
в html низ

<style type="text/css">
#pun-category1 .tclcon {margin-left: 195px;} //сдвиг категории влево (обычно = ширине таблицы +3-5 пикселов//
#div_table {position: absolute;  left: -32px; //сдвиг таблицы влево//  width: 237px;  //ширина таблицы//  height: 740px; //высота таблицы// background-image: url("http://uploads.ru/i/e/K/O/eKORG.jpg"); //фон таблицы// background-position: top center; background-repeat: no-repeat; color:#ececec; //цвет текст таблицы//}
</style>

Код:

<style type="text/css">
#pun-category1 .tclcon {margin-left: 195px;}
#div_table {position: absolute;  left: -32px;  width: 237px; height: 740px; background-image: url("http://uploads.ru/i/e/K/O/eKORG.jpg"); background-position: top center; background-repeat: no-repeat; color:#ececec; }
</style>

Код:

<div id="forum_table" style="display: none;">
 <div id="div_table">
<BR><BR>
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</div> 
 </div>

<script type="text/javascript">
$('#pun-category1 table').before($('div#forum_table').html());
</script>

1 - номер сдвигаемой категории.

Код:

<script type="text/javascript">
$('#pun-category1 table').before($('div#forum_table').html());
</script>

ВСЕ ВСТАВЛЯТЬ В HTML НИЗ.

Данная таблица была написана Duka специально для нашего форума, если вы используете таблицу у себя, желательно ставить приписку:

код таблицы http://imagiart.ru

Аватар последнего автора рядом с ссылкой на тему

Установка: html-низ
Код:

Код:

<script type="text/javascript">
if(document.URL.indexOf("viewforum.php")!=-1){
$('div.forum tr').map(function(){
var self = $(this).find('td.tcr a');
var lastor='<img style="float:left;margin:5px 7px 3px 3px;" width="24" height="24"';
var LastTema=$(this).find('td.tcr a').attr('href');
/* cкрипт запрещен администрацией сервиса */
function getLastPoster(data){
$(data).find('div[class$="endpost"]').each(function(){ 
var LastPosterAva=$(this).find('li.pa-avatar img').attr('src');
if (LastPosterAva==undefined){LastPosterAva='http://petushki-city.ru/files/0002/10/47/50167.gif'};
lastor +='alt="Аватар" src="'+LastPosterAva+'">';
self.prepend(lastor);
}); } }); }
</script>

Стилизация:
float: left;
Допустимо так же right
margin:5px 7px 3px 3px;
Расположение
width="24" height="24"
Ширина и высота
LastPosterAva='http://petushki-city.ru/files/0002/10/47/50167.gif'
Аватар по умолчанию для тех, у кого его нет

Автоматический вход для рекламы

Вход картинкой:
Выделенное жирным меняем на свое.
Скрипт ставим в HTML низ.

<style>.Myimge {position:absolute;margin-top:-14px;}</style>
    <script type="text/javascript">
    PiarNik="PR";
    PiarPas="1111";
    var L="<div id=\"PR_loginDiv\" style=\"display:none;\">\
    <form id=\"form_login\" name=\"login\" method=\"post\" action=\"login.php?action=in\" onsubmit=\"return check_form()\">\
    <fieldset>\
    <input type=\"hidden\" name=\"form_sent\" value=\"1\"/>\
    <input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\"/>\
    <input type=\"text\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\"/>\
    <input type=\"submit\" class=\"button\" name=\"login\"/>\
    </fieldset>\
    </form>\
    </div>\
    <span id=spMyimg><img class=\"Myimge\"  title=\"Быстрый вход для 'Пиарщиков'\" onclick=\"PiarIn()\" src=\"http://savepic.ru/2867133.png\" onmouseover=\"this.src='http://savepic.ru/2857917.png' \" onmouseout=\"this.src='http://savepic.ru/2867133.png'\" /></span>";
    if($("#navlogin").html()!=null){
    $("#navlogin").append(L) //navlogin
    $("#PR_loginDiv #fld1").val(PiarNik)
    $("#PR_loginDiv #fld2").val(PiarPas)
    function PiarIn () {$("#PR_loginDiv input[type='submit']").click();}
    }
    </script>

Вход текстом:
Выделенное жирным меняем на свое.
Скрипт ставим в HTML низ.

<script type="text/javascript">
PiarNik="Реклама";
PiarPas="1111";
var L="<div id=\"PR_loginDiv\" style=\"display:none;\">\
<form id=\"form_login\" name=\"login\" method=\"post\" action=\"login.php?action=in\" onsubmit=\"return check_form()\">\
<fieldset>\
<input type=\"hidden\" name=\"form_sent\" value=\"1\"/>\
<input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\"/>\
<input type=\"text\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\"/>\
<input type=\"submit\" class=\"button\" name=\"login\"/>\
</fieldset>\
</form>\
</div>\
<li id=\"navpiar\"><span id=spMyimg><a onclick=\"PiarIn()\">Пиар-Вход</a></span></li>";
if($("#navlogin").html()!=null){
$("#navlogin").after(L) //navlogin
$("#PR_loginDiv #fld1").val(PiarNik)
$("#PR_loginDiv #fld2").val(PiarPas)
function PiarIn () {$("#PR_loginDiv input[type='submit']").click();}
}
</script>

выделить код

Установка в HTML-низ

Код:

<script type="text/javascript">
function select_text(elem) {
	if(window.getSelection) {   
var s=window.getSelection();   
if(s.setBaseAndExtent){   
	s.setBaseAndExtent(elem,0,elem,elem.innerText.length-1);   
}
else {   
	var r=document.createRange();   
	r.selectNodeContents(elem);   
	s.removeAllRanges();   
	s.addRange(r);
}   
	}
	else if(document.getSelection){   
var s=document.getSelection();   
var r=document.createRange();   
r.selectNodeContents(elem);   
s.removeAllRanges();   
s.addRange(r);   
	}
	else if(document.selection){   
var r=document.body.createTextRange();   
r.moveToElementText(elem);   
r.select();
	}   
}
</script>
<script type="text/javascript">
var div = document.getElementById('pun-main').getElementsByTagName('div');
for(x in div){
	if(div[x].className=='code-box'){
div[x].getElementsByTagName('strong')[0].innerHTML = '<a href="#" onclick="select_text(this.parentNode.parentNode.childNodes[1].getElementsByTagName(\'pre\')[0]); return false;">Выделить код</a>';
	}
}
</script>

кнопки вверх/вниз

в html верх

Код:

<!--Кнопки вверх вниз-->
<div style="position:fixed; right
:0.5%; bottom: 45%;">
<a href=#top onClick="scrollTo(0,0); return false;" title="Вверх страницы">
<img src="адрес картинки вверх" alt="Вверх страницы" ></a>
<br/>
<a href=#top onClick="scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы">
<img src="адрес картинки вниз" alt="Вниз страницы" ></a> 
</div>

Генератор таблиц BB

Установка: Строго в HTML в форме ответа

Скрипт поставит в форму ответа ссылку, при нажатии которой открывается сразу под ней меню для создания таблиц из BB-кодов [table*], [tr*], [td*] (без звездочек). Вам предложат ввести кол-во необходимых строк и ячеек, после этого жми "Создать" и вы увидете сгенерированую таблицу. Выделите все теги (для этого есть кнопка Выделить) и скопируйте их, нажмите "Назад" и в тело сообщения поставьте данный код, изменив описание ячеек.

Код:

<script language="JavaScript1.2">
<!--
var ns6=document.getElementById&&!document.all?1:0

var head="display:''"
var folder=''

function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}

//-->
</script>
<SCRIPT language=JavaScript>
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
  function InsSM()
   {
   var table = '[table'+document.all.Bgcolor.value+document.all.Dkcolor.value+document.all.Ltcolor.value+']';

  for (var x=0; x<document.all.rows.value; x++) {
    table += "[tr]";
    for (var y=0; y<document.all.cols.value; y++) {
      table += "[td]Ячейка[/td]";
    }
    table += "[/tr]";
  }
  table += "[/table]\n";
    document.all.theCode.value=(table);
        document.write('<b><font size=2 color=#555555 face=Arial, Helvetica, sans-serif>Скопируйте эти теги в ваше сообщение</font></b><br><textarea name=theCode cols=50 rows=6>'+table+'</textarea><br><input type=button name=Button value=Выделить onClick=document.all.theCode.select();document.all.theCode.focus()><br><br><br>');
        document.write('<p><input type=button name=button value=Назад onClick=history.back()></p><Br><br>Скрипт написан компанией <a href=http://rusff.me target=_blank>RusFF</a>.');


}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</SCRIPT>
<h4 style='cursor:hand' onClick='expandit(this)'>Сделать таблицу</h3>
<TABLE width=300 style='display:none' style=&{head};>
  <TR>
    <TD>Строк: <INPUT maxLength=3 size=3 value=1 name=rows></TD>
    <TD>Ячеек: <INPUT maxLength=4 size=3 value=1 name=cols></TD>
    <td><INPUT type=hidden name=Bgcolor><INPUT type=hidden name=Dkcolor><INPUT type=hidden name=Ltcolor></td>
    <TD colSpan=4><A href="http://rusff.me/" target=_blank><B>RusFF ©</B></A><BR><INPUT type=hidden name=theCode> <INPUT onclick=InsSM() type=button value="Создать" name=Button2></TD>
</TR>
</TABLE>

[spoiler="Горячие клавиши"]Данный скрипт позволяет пользователям провести следующие операции с помощью комбинаций кнопок на клавиатуре:
- добавление тегов:

[b.][/b.]
[i.][/i.]
[u.][/u.]
[s.][/s.]

- быстрая отправка сообщений.
Добавление тегов происходит с помощью нажатий следующих клавиш:

Ctrl + b
Ctrl + i
Ctrl + s
Ctrl + u

Отправка сообщений:

Ctrl + Enter

PS!
В некоторых браузерах комбинации клавиш для добавления тегов могу открывать некоторые параметры.

Код:

<script type="text/javascript">
document.onkeydown=function(e){
if (e) event=e
if ((event.keyCode==73)&&(event.ctrlKey)){
bbcode('[i]', '[/i]');return false;
}
if ((event.keyCode==66)&&(event.ctrlKey)){
bbcode('[b]', '[/b]');return false;
}
if ((event.keyCode==83)&&(event.ctrlKey)){
bbcode('[s]', '[/s]');return false;
}
if ((event.keyCode==85)&&(event.ctrlKey)){
bbcode('[u]', '[/u]');return false;
}
if ((event.keyCode==13)&&(event.ctrlKey)){
document.getElementById('post').submit.click();
}}
</script>

Отдельный код просто для отправки сообщения:

Код:

<script type="text/javascript">
document.onkeydown=function(e){
if (e) event=e
if ((event.keyCode==13)&&(event.ctrlKey)){
document.getElementById('post').submit.click();
}}
</script>

Установка - HTML-в форме ответа

Разделение важных и простых тем

Автор: неизвестен
Источник: forumdts.org

Установка: HTML-низ
Код:

Код:

<script type="text/javascript">
if (document.URL.indexOf("viewforum")!=-1)
{var trs=document.getElementById('pun-main').getElementsByTagName("table")[0].rows
var io=1
for (io=1; io<=(trs.length-1); io++)
{if ((trs[io].className.indexOf("isticky")!=-1)&&(io==1))
{var portant=document.getElementById('pun-main').getElementsByTagName("table")[0].insertRow(1)
var im=portant.insertCell(0)
im.innerHTML="Важные темы"
im.style.color="#0000FF"
im.style.backgroundColor="#FFFFFF"
im.colSpan="4"}
else if ((trs[io].className.indexOf("isticky")!=-1)&&(trs[io+1].className.indexOf('isticky')==-1))
{var normal=document.getElementById('pun-main').getElementsByTagName("table")[0].insertRow(io+1)
var normal1=normal.insertCell(0)
normal1.innerHTML="Темы форума"
normal1.style.color="#0000FF"
normal1.style.backgroundColor="#FFFFFF"
normal1.colSpan="4"
}}}
</script>

Стилизация:

im.style.backgroundColor="#FFFFFF"
normal1.style.backgroundColor="#FFFFFF"

Цвет фона строк
normal1.style.color="#0000FF"
im.style.color="#0000FF"
Цвет шрифта

счетчик символов

в низ

<script type="text/javascript">
if ((document.URL.indexOf("viewtopic.php") != -1) || (document.URL.indexOf("post.php") != -1) || (document.URL.indexOf("edit.php") != -1)) {
var repl = document.getElementById("main-reply");
var submit = document.getElementsByTagName("p")
for (var i=0; i<submit.length; i++){
if (submit[i].className == "formsubmit")
submit[i].innerHTML = "<span id=\"plng\" style=\"border: 1px solid; padding: 2px 3px;\">Написано символов: <b>0</b></span>" + submit[i].innerHTML;
}
repl.onkeyup = repl.onkeydown = repl.onfocus = repl.onblur = function(){
document.getElementById("plng").innerHTML ="Написано символов: <b>" + (repl.value.length) + "</b>";
}}
</script>

уведомление о новом лс со звуком.

Ставить в html низ.

Код:

<script language="JavaScript"> 
if((document.getElementById("navpm").innerHTML.indexOf("(") != -1) && (document.URL.indexOf("messages.php") == -1)) {
document.write("<div id='messanger' class='section' style='position: fixed; right: 40%; top: 35%; z-index: 1000; width: 320px; height: 110px;'><h2 style='background-color: #08440c; color: #000; text-align: center;'>Оповещение</h2><div class='container' style='padding: 15px; text-align: center; background-color: #ebeaf0;'><span>Вам пришло новое личное сообщение</span><br /><br /> <span style='color: green;'>Чтобы прочесть его, нажмите на эту кнопку.</span><br /><br /><br /><a class='mess' onclick=\"window.open(href='/messages.php'); return false\" style='background-color: rgb(125, 158, 112); border-style: none; cursor: pointer; font-size: 20px;' >&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;</a></div><embed height='1' width='1' type='application/x-shockwave-flash' wmode='transparent' quality='high' src='http://promobil.kiev.ua/engine/classes/flashplayer/media_player.swf?MediaLink=http://promobil.kiev.ua/uploads/files/1188937250_icq.mp3&amp;defaultMedia=1&amp;showPlayButton=false&amp;playOnStart=true'></div>");}
$(function(){$('.mess').click(function(){
$('#messanger').toggle();}); });
</script>

Новое уведомление о сообщении

ставить в html низ. Прелесть кода в том, что можно самостоятельно изменять картинку.
Действие скрипта: слева на экране будет появляться картинка с уведомлением. Закрывается при нажатии на крестик.
пример действия:

код:

Код:

<div class="container"><div id=alertMess style="display:none;width: ШИРИНА КАРТИНКИpx; height: [b]ВЫСОТА КАРТИНКИ[/b]px;/* border:brown 1px solid;*/ top:42%;margin-left:-105px;position:fixed;z-index:100;"><img id=CloSandHid src=[b]"КАРТИНКА ЗАКРЫВАЮЩЕГО КРЕСТИКА[/b]" style="position:absolute;z-index:100;"/><img class=MyMessag src=[b]"КАРТИНКА САМОГО СООБЩЕНИЯ"[/b]/></div><script>function MiguN1(){$("#alertMess .MyMessag").fadeTo(1600,0.03,function(){$(this).fadeTo(1500,1,function(){return false});return false});return false}function setcookie(a,b,c){if(c){var d=new Date();d.setTime(d.getTime());d=new Date(d.getTime()+c*1000*60)}if(a&&b)document.cookie=a+'='+b+(c?'; expires='+d.toGMTString():'');else return false}function getcookie(a){var b=new RegExp(a+'=([^;]){1,}');var c=b.exec(document.cookie);if(c){c=c[0].split('=')}else{return false}return c[1]?c[1]:false}function timerZap(){timerID=setTimeout("MiguN1();timerZap();",3200);return}$("#CloSandHid").click(function(){setcookie("CloSandHid",true,15);if(getcookie("CloSandHid")){$("#alertMess").hide()}});if(!getcookie("CloSandHid")){$(document).ready(function(){if($("#navpm").text().indexOf("(")!=-1){timerID=setTimeout("$('#alertMess').fadeIn(2300);timerZap()",2300)}})}
</script></div>
</div

>

Уведомления о новом личном письме на форуме

HTML-низ

выглядет так

Код:

<script type="text/javascript">
var nrisunok="https://forumupload.ru/uploads/0000/0a/f2/68797-1.gif";
if( (document.getElementById("navpm").innerHTML.indexOf("(") != -1))
{ 
document.getElementById("navpm").innerHTML="<img src='"+nrisunok+"'> "+document.getElementById("navpm").innerHTML;
};
</script>

выглядеть так

Код:

<script type="text/javascript">
str = document.getElementById("navpm").innerHTML
loc = new String(document.location)
if( (str.indexOf("(") != -1) &&  loc.indexOf('messages.php')==-1)
{  
  count = parseInt(str.substring(str.indexOf("(")+1,str.indexOf(")")))
  if (count==1) text="  У вас есть 1 новое сообщение"
  else if (count>1 && count<5) text=" У вас есть " +count+" новых сообщения"
  else text="У вас есть " +count+" новых сообщений"
  msg =  "<div id=\"new-mes\" class=\"container\" style=\"position: absolute; z-index=2; left: 40%; text-align: center;\">"
  msg += text
  msg += "<br><a href=\"\" onclick=\"document.location.replace('messages.php'); document.getElementById('new-mes').style.display='none';return false;\">( Посмотреть личные сообщения )</a>"
  msg +="<br><br><a href=\"\" onclick=\"document.getElementById('new-mes').style.display='none'; return false\"><center>( Закрыть окно )</center></a>\r\n"  
  msg += "</div>"
  document.getElementById("pun-status").innerHTML += msg
}
</script>

удобный вход

Код:

<script language="JavaScript">
        function showLDiv()
        {
        if(  document.getElementById("loginDiv").style.display == 'none' )
             document.getElementById("loginDiv").style.display = ''
        else document.getElementById("loginDiv").style.display = 'none'

        return false;
        }
        function check_form()
        {
        if(document.forms["form_login"].req_username.value=='' || document.forms["form_login"].req_username.value=='') {
        alert('Еще рано нажимать на "Войти"');
        return false;
        }
        return true
        }
        url=document.URL
        if(url.indexOf("login.php")==-1  && document.getElementById('navlogin')){
        document.getElementById('navlogin').innerHTML  = "<a href=\"login.php\" onclick=\"return showLDiv()\"><span>Войти</span></a>"
        login = "<centr><div id=loginDiv style=\"display: none; \">"

        login += "<form id=form_login name=login method=post action=\"login.php?action=in\" onsubmit=\"return check_form()\">"
        login += "<fieldset>"
        login += "<legend>Введите свое имя и пароль</legend>"
        login += "<input type=hidden name=form_sent value=1 />"
        login = login + "<input type=hidden name=redirect_url value="+document.URL+" />"
        login += "<br><table width=\"100%\" align=centr>"
        login += "<tr><td align=left><b>Имя :</b></td><td align=left><input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\" /></td></tr>"
        login += "<tr><td align=left><b>Пароль :</b></td><td align=left><input type=\"password\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\" /><span class=formsubmit><input type=submit class=button name=login value=\"Войти\" /></span>"
        login += "</form></td></tr>"
        login += "</table>"
        login += "</fieldset>"
        login += "<p><a href=\"register.php\">  Зарегистрироваться.</a>                                                         <a href=\"login.php?action=forget\">   Забыли пароль?</a></p>"   
    login += "</div></center>"

        document.getElementById('pun-navlinks').innerHTML += login
        }
        </script>

могу похвастаться, что этот код нашла лично я на техподдержке
хотите настроить стиль? пожалуйста:

Код:

<script language="JavaScript">
        function showLDiv()
        {
        if(  document.getElementById("loginDiv").style.display == 'none' )
             document.getElementById("loginDiv").style.display = ''
        else document.getElementById("loginDiv").style.display = 'none'

        return false;
        }
        function check_form()
        {
        if(document.forms["form_login"].req_username.value=='' || document.forms["form_login"].req_username.value=='') {
        alert('Еще рано нажимать на "Войти"');
        return false;
        }
        return true
        }
        url=document.URL
        if(url.indexOf("login.php")==-1  && document.getElementById('navlogin')){
        document.getElementById('navlogin').innerHTML  = "<a href=\"login.php\" onclick=\"return showLDiv()\"><span>Войти</span></a>"
        login = "<centr><div id=loginDiv style=\"display: none; \">"

        login += "<form id=form_login name=login method=post action=\"login.php?action=in\" onsubmit=\"return check_form()\">"
        login += "<fieldset>"
        login += "<legend>Введите свое имя и пароль</legend>"
        login += "<input type=hidden name=form_sent value=1 />"
        login = login + "<input type=hidden name=redirect_url value="+document.URL+" />"
        login += "<br><table width=\"100%\" align=centr>"
        login += "<tr><td align=left><b>Имя :</b></td><td align=left><input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\" /></td></tr>"
        login += "<tr><td align=left><b>Пароль :</b></td><td align=left><input type=\"password\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\" /><span class=formsubmit><input type=submit class=button name=login value=\"Войти\" /></span>"
        login += "</form></td></tr>"
        login += "</table>"
        login += "</fieldset>"
        login += "<p><a href=\"register.php\">  Зарегистрироваться.</a>                                                         <a href=\"login.php?action=forget\">   Забыли пароль?</a></p>"   
    login += "</div></center>"

        document.getElementById('pun-navlinks').innerHTML += login
        }
        </script>
        
<style>
        #loginDiv{
            position:absolute;
            z-index: 2;
            background-color : #8d544d;
            border : solid;
            padding-bottom : 10px;
            padding-left : 0px;
            padding-right : 0px;
            padding-top : 5px;
            width: 290px;
        }
        </style>

бэкграунд-колор: цвет заднего фона контейнера
последняя строчка, width - ширина
остальное не трогаем х)
низ

ветовыделение групп

!-- Цветовыделение групп -->
<script type="text/javascript">
var arr=document.links
var arr1=new Array ("Медузия", "Арей", "Дафна", "Gamer")
var arr2=new Array ("Диметра", "Катерина Лоткова", "Юля Северова", "Таня")
var arr3=new Array ("…")
for (x in arr)
{for (y in arr1)
{if (arr[x].innerHTML==arr1[y])
{
arr[x].innerHTML="<font color='red'>"+arr[x].innerHTML+"</font>"}
}}
for (x in arr)
{for (j in arr2)
{if (arr[x].innerHTML==arr2[j])
{
arr[x].innerHTML="<font color='blue'>"+arr[x].innerHTML+"</font>"}}}
for (x in arr)
{for (l in arr3)
{if (arr[x].innerHTML==arr3[l])
{
arr[x].innerHTML="<font color='green'>"+arr[x].innerHTML+"</font>"}}}
</script>

______________________________________________________
var arr3=new Array ("…") - группы определенного цвета. Эту строку размножаете, столько, сколько надо групп, давая каждой номер:
var arr4=new Array ("…")
var arr5=new Array ("…")
и т.д.
жирным выделены названия цветов, меняете на свое.

смена стилей (переключение дизайнов)

Шаг первый: создаем нужный нам стиль, в данном случае - стили;
Шаг второй: удаляем из этих стилей следующую строчку:

/* A1.1 */
  @import url(style_cs.css);

Забудете убрать - будет бяка!
Шаг третий: сохраняем каждый стиль в отдельности через блокнот в формате .css!
Шаг четвертый: заливаем файл(-ы) сюда http://www.nextmail.ru/ (требуется регистрация)
Шаг пятый: топаем на форум в админку, настройки и ставим в Начало HTML верх следующую красоту:

Код:

<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function clearSet(L){if(L){setcookie("changeStyle",L,30);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=getcookie("changeStyle");clearSet(Lmem);
</script>

Шаг шестой: сразу под вышеуказанным скриптом ставим следующий:

<style>#changeStyle img{border:solid 2px transparent;}
.STYLselect {border-color:red!important;}
</style>
<div id="changeStyle" style="top:0; left: 3px; position:fixed!important;">
<img src="http://www.10pix.ru/img1/3444/5439522.jpg" alt="http://forum.mybb.ru/style/Mybb_Strange_Vision/Mybb_Strange_Vision.css"/>
<br>
<img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="http://forum.mybb.ru/style/Mybb_Space/Mybb_Space.css"/>
<br>
<img src="http://www.10pix.ru/img1/3492/5439523.jpg" alt="http://forum.mybb.ru/style/Mybb_Sloven/Mybb_Sloven.css"/>
<br>
</div>
<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L)});</script>elect");clearSet(L)});</script>

Красным - ссылки на картинки соответствующих кнопок
Бордовым  - ссылки на файлы стиля для этой кнопки
Синим - стиль кнопки после нажатия
P.S. позже добавлю ещё один для скриптов в настройках
P.P.S. Очень внимательно читайте темы, если что-то не работает: http://forum.mybb.ru/viewtopic.php?id=6 … 17#p648135 и http://forum.mybb.ru/viewtopic.php?id=6 … 45#p701301

Выпадающее меню для форума (с) rps

1. Установка.
В HTML верх

Код:

<style>
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background:  url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

В HTML низ

Код:

<!--Спойлер - контейнер-->
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

Вставляем в объявление туда, где должно быть само меню (например, в объявление):
 

Код:

  <center><table style="width: 90%">
    <tr>

    <td><div class="spll">
    <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
    <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
    Тут будет что-то</DIV></DIV>
    </div></td>
    <td><div class="spll">
    <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
    <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
    Тут будет что-то</DIV></DIV>
    </div></td>
    <td><div class="spll">
    <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
    <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
    Тут будет что-то</DIV></DIV>
    </div></td>
    <td><div class="spll">
    <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
    <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
    Тут будет что-то</DIV></DIV>
    </div></td>
    <td><div class="spll">
    <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div>
    <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
    Тут будет что-то</DIV></DIV>
    </div></td>
    <td><div class="spll">
    <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
    <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
    Тут будет что-то</DIV></DIV>
    </div></td>

    </tr>
    </table></center>

2. Заполнение меню.
Чтобы заполнить меню своим содержимым, надо обратиться к третьей части кода.
а). По-умолчанию в коде содержится 6 блоков. По своему усмотрению Вы можете изменить это число, добавив новые или удалив какие-либо. Чтобы осуществить это, достаточно размножить (в случае увеличения числа блоков) или удалить (для уменьшения их числа) такой фрагмент:

Код:

<td><div class="spll">
<DIV><div class=splLink href="javscript://">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то</DIV></DIV>
</div></td>

Внимание! Не меняйте НИКАКИЕ числовые значения в этой части кода! В противном случае меню перестанет работать!

б). Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.
в). Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.
3. Оформление меню.
Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:
а).

Код:

div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}

Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).
б).

Код:

.spll {width: 130px; height: 70px; }

Не рекомендовано для изменения неопытным пользователям!
Замечание: width: 130px; менять одновременно с предыдущим значением ширины (ширина основных блоков).
в).

Код:

.spll div .splCont {height: auto; width: 300px; background:  url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}

Отвечает за дизайн выпадающих блоков.

height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

Внимание! Производить какие-либо изменения во второй части кода ЗАПРЕЩЕНО!

переадресация на другой форум/сайт

в html-верх

Код:

<script>
if (document.location.href.toString().indexOf('адрес_сайта_откуда_переходить') != -1)
{
        document.location.href = 'http://адрес_сайта_куда_переходить.ru';
}
</script>

Любой объект в шапке

В HTML Верх:

Код:

<div style="position: absolute;
top: 178px;
left: 250px;
width:186px;">
Тут код вашего объекта: картинки, плеера, таблицы и т.д.
</div>

top: 178px;

Сдвиг от верха шапки.

left: 250px;

Сдвиг влево по шапке.

width:186px;

Ширина поля.

Плеер для форума (в профиль)

Заходим Администрирование - Поля профиля.
Создаем поле:

Остальное по желанию.
Название:                                           Можно написать любое название.     
Тип поля:                                            Текстовое поле.
Длина:                                                999
Расположение:                                   Под  названием.

Далее заходим в Профиль - Дополнительно и вставляем в поле код плеера:

<object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" height="27" width="180"><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" /><param name="FlashVars" value="way=http://music.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=180&amp;h=27&amp;time_seconds=0&amp;autoplay=0&amp;q=&amp;skin=bs&amp;volume=50&amp;comment=" /></object>

Красным - ссылка на mp3 файл.