PWS Tabs jQuery Plugin - Табы со множеством вкладок на форуме

[in1975]

PWS Tabs jQuery Plugin

ИНСТРУКЦИЯ ПО КАСТОМИЗАЦИИ ВО ВКЛАДКАХ

Следует придумать название кастомной темы - theme: 'new_name', а в стиле [style] дописываем
это же название с точкой в начале, после .pws_tabs_container, вот так: .pws_tabs_container.new_name

PWS Tabs - адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3. Тыкаешь по закладочке и спойлер раскрывается. Очень компактно и красиво.
(readme.ru и примеры example.html внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов.
• GitHub - исходники и релизы новых версий на
• PWS Tabs PSPx - примеры использования.
• responsive

Синтаксис - если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу). Кнопки в расширенном режиме редактирования:

1. - TOPTIONS (указываем опции из таблицы)
2. - TNAME (указываем название табов и содержимое вкладки)
3. - TEND (указатель на то, что вкладки закончились)

[TOPTIONS="effect: 'scale', defaultTab: '1', containerWidth: '100%', tabsPosition: 'horizontal', horizontalPosition: 'top', verticalPosition: 'left', theme: 'pws_theme_grey'"]Уникальное_название_Таба_безпробелов[/TOPTIONS]
 
    [TNAME="Первый таб"]Здесь текст, содержимое первой вкладки[/TNAME]
    [TNAME="Второй таб"]Здесь текст, содержимое второй вкладки[/TNAME]
    [TNAME="Третий таб"]Здесь текст, содержимое третьей вкладки[/TNAME]

[TEND][/TEND]

После создания табов необходимо удалить все переносы на новую строку!

Как это выглядит:

Здесь текст, содержимое первой вкладки

Здесь текст, содержимое второй вкладки

Здесь текст, содержимое третьей вкладки

Еще примеры как это выглядит, в том числе и с декором можете посмотреть с сообщениях данной темы.

По таблице берём нужные функции и вписываем через запятую по очереди в TOPTIONS:

Опция	Умолчания	Описание	Параметр опции	Тип
theme:	' '	Уникальное имя_id темы	new_name Стандартные названия тем по умолчанию: pws_theme_violet / pws_theme_green pws_theme_yellow / pws_theme_gold pws_theme_orange / pws_theme_red pws_theme_purple / pws_theme_grey pws_theme_dark_violet / pws_theme_dark_green pws_theme_dark_yellow / pws_theme_dark_gold pws_theme_dark_orange / pws_theme_dark_red pws_theme_dark_purple / pws_theme_dark_grey	строка
effect:	'scale'	Эффект переключения	scale/slideleft/slideright slidetop/slidedown/none	строка
defaultTab:	'1'	Активная вкладка	ID вкладки, начинается с 1 (1,2,3..)	число
containerWidth:	'100%'	Ширина контейнера	Любое значение размера (1,2,3../px,pt,em,%,cm..)	строка
tabsPosition:	'horizontal'	Положение вкладок	horizontal/vertical	строка
horizontalPosition:	'top'	При положении по горизонтали	top/bottom	строка
verticalPosition:	'left'	При положении по вертикали	left/right	строка
responsive:	'false'	!!BETA!! Включить вложения	true/false	строка
rtl:	'false'	По правому краю	true/false	строка

Если вы вкладываете ещё один "Таб" во вкладку, следует вставлять полный код Табов - toptions, tname, tend.
Не забывайте указывать уникальное имя ID нового таба new_name в названии новой темы и в стилях, иначе будет подхватываться настройка внешнего Таба.

Также можно воспользоваться онлайн-генераторами для создания закладок.

• maxzon.ru
• cssbuttongenerator.com
• webremeslennik.ru

Копируем получившийся код и редактируем под закладки:

1) .button заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}
2) .button:hover заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a:hover {и далее берем из кода...}
3) .button:active заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a.pws_tab_active {и далее берем из кода...}

как выглядит результат

Так это выглядит

Довольно прикольно

Фон под текстом тоже можно менять, смотрите выше

Ещё пятёрка лучших онлайн-минифи-деминифи (Online JavaScript/CSS/HTML Compressor):

1. https://htmlcompressor.com/compressor/ - HTML Compressor
2. http://xn--h1aeef4ax.xn--p1ai/web_to...ssor/index.php - компрессор / декомпрессор CSS или JS
3. https://cssresizer.com/ru/ (компрессор / декомпрессор CSS)
4. http://refresh-sf.com/
5. http://csscompressor.com/

<!-- Глобальные параметры на весь контейнер -->

[style].pws_tabs_list{background:transparent}.pws_tabs_container.new_name{background-color:#61BEBC;border-radius:8px 8px 0 0}.pws_tabs_container.new_name ul.pws_tabs_controll{width:100%;text-align:center}.pws_tabs_list.new_name{background:transparent}[/style]

Расшифровка параметров:

.pws_tabs_container.new_name { /* Родительский элемент, отвечает за параметры контейнера, как "Декор" снаружи */
  background-color: #61BEBC;   /* Можно задать цвет общего фона, чтобы контейнер стал монолитным */
  border-radius: 8px 8px 0 0;  /* Закругляет края у самого контейнера, отсчёт с левого верхнего по часовой */
}
.pws_tabs_container.new_name ul.pws_tabs_controll { /* Дочерний элемент, отвечает за блок "Названия вкладок" */
  width: 100%;                 /* Расположение "Названий вкладок" во всю ширину контейнера */
  text-align: center;          /* Выравнивает "Названия вкладок" по центру, полезно, если всего одна вкладка */
}
.pws_tabs_list.new_name {      /* Отвечает за содержимое вкладки */
  background: transparent;     /* Делает бэкграунд содержимого прозрачным */
}

Дочерние элементы принимают свойства от Родительского. Если у родителя указаны параметры, то это распространяется на все дочерние, если у дочерних не указано иное. Все дочерние элементы считаются по иерархии и подчиняются по нарастающей, например:

.pws_tabs_container.new_name
.pws_tabs_container.new_name .pws_tabs_list
.pws_tabs_container.new_name ul.pws_tabs_controll
.pws_tabs_container.new_name ul.pws_tabs_controll li
.pws_tabs_container.new_name ul.pws_tabs_controll li a
.pws_tabs_container.new_name ul.pws_tabs_controll li a:hover
.pws_tabs_container.new_name ul.pws_tabs_controll li a.pws_tab_active

То есть, что написано в предыдущем уровне, то не нужно повторять в последующих, они подхватятся от Родителя. А если нужно что-то изменить, то в Дочернем уровне меняем, как например можно задать цвет сразу на активную и неактивную вкладки, а если у активной другой цвет, то там меняем на свой. иногда бывает, что Родительские настройки не меняются в дочерних, в таких случаях нужно насильно заставить это сделать, приписав к параметру !important;, вот так: background: #61BEBC !important;

<!-- Заголовок активной вкладки -->

[style].pws_tabs_container.new_name ul.pws_tabs_controll li a.pws_tab_active {background:#1C354A;color:#FAE4ED;text-shadow: 1px 1px 2px #730F34;font-size:16px;font-weight:700;padding:5px 20px;margin-right:10px;}[/style]

Расшифровка параметров:

{
   background: #1C354A;                // Цвет бэкграунда активной вкладки
   color: #FAE4ED;                     // Цвет шрифта
   text-shadow: 1px 1px 2px #730F34;   // Тень шрифта
   font-size: 16px;                    // Размер шрифта (если хотите изменить размер, отличный от родителя)
   font-weight: 700;                   // Насыщенность шрифта (400 - normal, 700 - bold)
   padding:5px 20px;                   // Значения полей от границ (5px - сверху-снизу, 20px - слева-справа)
   margin-right: 10px;                 // Отступ справа (расстояние между вкладками) по умолчанию 3px.
}

<!-- Содержимое открытой вкладки -->

[style].pws_tabs_container.new_name .pws_tabs_list {background:#1C354A;color:#fff;text-shadow: 1px 1px 2px #730F34;padding:10px;}[/style]

Расшифровка параметров:

{
   background: #1C354A;                // Цвет бэкграунда содержимого вкладки
   color: #fff;                        // Цвет шрифта
   text-shadow: 1px 1px 2px #730F34;   // Тень шрифта
   font-weight: 700;                   // Насыщенность шрифта (400 - normal (по умолчанию), 700 - bold)
   padding: 10px;                      // Значения полей от границ (10px - со всех сторон) по умолчанию 20px.
}

<!-- Заголовок неактивной вкладки -->

[style].pws_tabs_container.new_name ul.pws_tabs_controll li a {background:#274B69;color:white;font-size:0.9em;font-weight:700;padding:5px 5px;margin-right:20px}[/style]

Расшифровка параметров:

{
   background: #1C354A;                // Цвет бэкграунда активной вкладки
   color: #FAE4ED;                     // Цвет шрифта
   text-shadow: 1px 1px 2px #730F34;   // Тень шрифта
   font-weight: 700;                   // Насыщенность шрифта (400 - normal, 700 - bold)
   padding:5px 20px;                   // Значения полей от границ (5px - сверху-снизу, 20px - слева-справа)
   margin-right: 10px;                 // Отступ справа (расстояние между вкладками) по умолчанию 3px.
}

<!-- Заголовок при наведении --> - эту строчку просто копируем и вставляем стиль к вашему табу, этот текст написан для расширения строки, чтобы она не сужалась при открытии вкладки.
[style].pws_tabs_container.new_name ul.pws_tabs_controll li a:hover{background:#203F57;color:#fff}[/style]

Расшифровка параметров:

{
   background: #203F57;   // Цвет бэкграунда неактивной вкладки при наведении
   color: #fff;           // Цвет шрифта при наведении
}

PWS Tabs jQuery Plugin позволяет прикреплять иконки к названиям вкладок. Эта возможность появилась благодаря подключению другого популярного плагина веб-иконок Font Awesome. Подробнее об его функциях здесь.

Как подключить иконку к названию вкладки?

1. Подбираем иконку на Font Awesome, щёлкаем на иконку, откроется страница с иконкой разных размеров.
2. Под картинками мы видим её оригинальное название, а вот ниже имеется HTML ссылка этой иконки.
3. Копируем эту ссылку <i class="fa fa-font-awesome" aria-hidden="true"></i>
4. Удаляем ненужный хвостик aria-hidden="true" (не обязательно) и заменяем двойные кавычки на одинарные.
5. В результате должно получиться так: <i class='fa fa-font-awesome'></i>
6. Вставляем её перед "Названием вкладки" в TNAME без пробелов.

Это общий код стилей для всего Таба (без вложенных вкладок). В коде забиты практически все возможные параметры.
Стилей всего 4 - Активная, Содержимое, Неактивные, При наведении.
Не забываем изменять название темы .new_name в стилях вкладок.

[style].pws_tabs_container.new_name ul.pws_tabs_controll li a.pws_tab_active{background:#1C354A;color:#FAE4ED;text-shadow: 1px 1px 2px #730F34;font-weight:700;padding:5px 20px;margin-right:3px;}.pws_tabs_container.new_name .pws_tabs_list{background:#1C354A;color:#fff;text-shadow: 1px 1px 2px #730F34;padding:20px;}.pws_tabs_container.new_name ul.pws_tabs_controll li a{background:#2D5779;color:white;padding:5px 20px;margin-right:3px;}.pws_tabs_container.new_name ul.pws_tabs_controll li a:hover{background:#203F57;color:#fff;}[/style]

Так удобнее сразу скопировать весь код стилей и удалять ненужное или править, чем вспоминать и дописывать.
Так же в помощь онлайн-сервисы по подбору сочетаний цветов: paletton.com и sessions.edu

PWS Tabs Plugin поддерживает Font Awesome

[ErikPshat]

Ещё тройка лучших онлайн-минифи-деминифи (Online JavaScript/CSS/HTML Compressor):

1. https://cssresizer.com/ru/ (для вставки кода CSS нажимаем "Сжать текст", но там счётчик ожидания, чтобы сделать ещё раз)
2. http://refresh-sf.com/
3. http://csscompressor.com/

Сообщение от ErikPshat При желании, возможно темы на странице можно подключить как шрифты через стиль: [style]@import url('attachment.php?attachmentid=12840');[/style]

Да, сейчас проверил, отлично работает в теме Font Awesome

[in1975]

ErikPshat, ну да, темы нам не нужны.
Убрал из шапки ссылки на темы.

исходник, мало ли что

Опция	Умолчания	Описание	Параметр опции	Тип
theme:	'pws_theme_cyan'	Темы оформления вкладок	LIGHT THEMES pws_theme_cyan/pws_theme_violet pws_theme_green/pws_theme_yellow pws_theme_gold/pws_theme_orange pws_theme_red/pws_theme_purple pws_theme_grey/pws_theme_black PSPx THEMES pws_theme_pspx_cyan/pws_theme_pspx_violet pws_theme_pspx_green/pws_theme_pspx_yellow pws_theme_pspx_gold/pws_theme_pspx_orange pws_theme_pspx_red/pws_theme_pspx_purple pws_theme_pspx_grey/pws_theme_pspx_black DARK THEMES pws_theme_dark_cyan/pws_theme_dark_violet pws_theme_dark_green/pws_theme_dark_yellow pws_theme_dark_gold/pws_theme_dark_orange pws_theme_dark_red/pws_theme_dark_purple pws_theme_dark_grey/pws_theme_dark_black	строка

[ErikPshat]

Theme "vertical dark grey"

[TOPTIONS="effect:'slideleft',tabsPosition:'vertical',theme:'vertical_dark_grey'"]VerticalGrayTheme[/TOPTIONS]

[TNAME="<i class='fa fa-home fa-lg fa-fw'></i>TOPTIONS"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-bars fa-lg fa-fw'></i>TNAME"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-cubes fa-lg fa-fw'></i>Style minify"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-css3 fa-lg fa-fw'></i>Style CSS"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-codepen fa-lg fa-fw'></i>Источник"]Содержимое[/TNAME]

[style].pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll{background:#364150;width:15%!important}.pws_tabs_container. vertical_dark_grey .pws_tabs_list{padding:5px 15px;width:85%!important;background:transparent}.pws_tabs_container.vertical_dar k_grey ul.pws_tabs_controll li a.pws_tab_active{background:#2B3643}.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a:hover{background:#2B3643}.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a{background:#364150;margin:0;border-top:1px solid #3d4957;color:#b4bcc8;font-weight:300;font:14px 'Open Sans',sans-serif}[/style]

Используйте минификацию для удаления комментариев, переносов и лишних пробелов: https://cssresizer.com/ru/

/**
* ###########################
* vertical dark grey
* ###########################
*/

/* Глобальные параметры на весь контейнер, отвечает за Блок "Названия вкладок */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll {
   background: #364150;
   width: 15% !important;
}
/* Содержимое открытой вкладки */
.pws_tabs_container.vertical_dark_grey .pws_tabs_list {
   padding: 10px 15px;
   width: 85%!important;
   background: transparent;
}
/* Заголовок неактивной вкладки */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a {
   background: #364150;
   margin: 0;
   border-top: 1px solid #3d4957;
   color: #b4bcc8;
   font-weight: 300;
   font: 14px 'Open Sans',sans-serif;
}
/* Заголовок при наведении */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a:hover {
   background:#2B3643;
}
/* Заголовок активной вкладки */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a.pws_tab_active {
   background:#2B3643;
}

www.shareicon.net

[in1975]

примеры стилей для оформления тем (для импорта):

faq.css - тема
webman.css - тема
xmb.css - тема
xmbpd.css - тема
menu.css - тема

[ErikPshat]

Тема "FAQ" by in1975

tabsPosition:'vertical',theme:'faq'

<i class='fa fa-folder-open-o'></i>Название вкладки

[style].pws_tabs_container.faq{margin:0 20px}.pws_tabs_container.faq ul.pws_tabs_controll{width:20%!important}.pws_tabs_container.faq .pws_tabs_list{width:80%!important;background:transparent;padding:5px 20px}.pws_tabs_container.faq ul.pws_tabs_controll li a{color:white;border-top:1px solid #96d1f8;background:-webkit-gradient(linear,left top,left bottom,from(#194c6e),to(#65a9d7));background:-moz-linear-gradient(top,#194c6e,#65a9d7);padding:5px 10px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1)0 1px 0;-moz-box-shadow:rgba(0,0,0,1)0 1px 0;box-shadow:rgba(0,0,0,1)0 1px 0;text-shadow:rgba(0,0,0,.4)0 1px 0;font-size:14px;font-family:Georgia,Serif}.pws_tabs_container.faq ul.pws_tabs_controll li a:hover{color:white;background:#0061A8;border-top-color:#28597a}.pws_tabs_container.faq ul.pws_tabs_controll li a.pws_tab_active{color:yellow;background:#0061B8;border-top-color:#1b435e}[/style]

/**
* ###########################
* FAQ by in1975
* ###########################
*/

/* Отвечает за блок Контейнера снаружи */
.pws_tabs_container.faq {
   margin: 0 20px; /* отступ контейнера от края форума на 20px слева-справа */
}
/* Отвечает за Блок "Названия вкладок */
.pws_tabs_container.faq ul.pws_tabs_controll {
   width: 20% !important;
}
/* Содержимое открытой вкладки */
.pws_tabs_container.faq .pws_tabs_list {
   width: 80%!important;
   background: transparent;
   padding: 5px 20px;
}
/* Заголовок при наведении */
.pws_tabs_container.faq ul.pws_tabs_controll li a:hover {
   color: white;
   background: #0061A8;
   border-top-color: #28597a;
}
/* Заголовок активной вкладки */
.pws_tabs_container.faq ul.pws_tabs_controll li a.pws_tab_active {
   color: yellow;
   background: #0061B8;
   border-top-color: #1b435e;
}
/* Заголовок неактивной вкладки */
.pws_tabs_container.faq ul.pws_tabs_controll li a {
   color: white;
   border-top: 1px solid #96d1f8;
   background: -webkit-gradient(linear, left top, left bottom, from(#194c6e), to(#65a9d7));
   background: -moz-linear-gradient(top, #194c6e, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   font-size: 14px;
   font-family: Georgia, Serif;
}

FAQ по взлому PlayStation 3 by in1975

Содержимое...

Содержимое...

Содержимое...

[ErikPshat]

Можно к иконкам подвешивать всплывающие подсказки. Но подсказка будет показываться только при наведении на иконку.
Например, вставляешь в опцию TNAME иконку, а далее пишешь подсказку через параметр title='Подсказка'. Результат вот типа так:

• <i class='fa fa-folder-open-o' title='Это всплывающая подсказка'></i>Название_Вкладки

А якорь не работает.

              _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
             _/                                                          _/
            _/   _/_/_/_/_/   _/_/_/_/_/   _/_/_/_/_/                   _/
           _/   _/      _/   _/           _/      _/   _/    _/        _/
          _/   _/_/_/_/_/   _/_/_/_/_/   _/_/_/_/_/     _/_/          _/
         _/   _/                   _/   _/             _/_/          _/
        _/   _/           _/_/_/_/_/   _/           _/    _/        _/
       _/                                                          _/
      _/   _/_/_/_/_/   _/_/_/_/_/       _/       __/       __/   _/
     _/       _/       _/              _/_/      _/_/     _/_/   _/
    _/       _/       _/_/_/_/_/     _/  _/     _/ _/   _/ _/   _/
   _/       _/       _/            _/_/_/_/    _/  _/ _/  _/   _/
  _/       _/       _/_/_/_/_/   _/      _/   _/   __/   _/   _/
 _/                                                          _/
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

[ErikPshat]

• Добавил к тегу [ANCHOR=""]Ссылка на якорь[/ANCHOR] класс class="anchor"
• Добавил к тегу [DECOR=""]Текст содержимого[/DECOR] класс class="decor"
• Добавил к тегу [TABLE=""]Текст содержимого[/TABLE] класс class="table-pspx"
• Добавил к тегу [TR=""]Текст содержимого[/TR] класс class="tr-pspx"
• Добавил к тегу [TD=""]Текст содержимого[/TD] класс class="td-pspx"
• Добавил к тегу [SPAN=""]Текст содержимого[/SPAN] класс class="span-pspx"
• Добавил к тегу [COLSPAN=""]Текст содержимого[/COLSPAN] класс class="colspan-pspx"

Это для того, чтобы к ним можно было отдельно стили писать, начиная с точки. Пример:

• [STYLE].anchor{background:#fff}[/STYLE] или [STYLE].decor{background:#fff}[/STYLE]

---

Кстати, наверное будет полезно упомянуть про стандартное использование стилей:

• Если в теге HTML присутствует класс class="bla-bla-bla", то стили к нему пишутся с точки в начале (.bla-bla-bla)
• Если в теге HTML присутствует ID id="yah-hah-hah", то стили к нему пишутся с решётки в начале (#yah-hah-hah)
• Если в теге HTML нету ничего, например: <table>, <div>, <img>, тогда стили к нему нужно задавать просто по имени тега без всяких префиксов, например: table{стили} или div{стили} или img{стили} или a{стили}
• Один общий стиль можно применять сразу к нескольким классам или id, либо тегам, тогда их нужно перечислять через запятую, например: .bla-bla-bla, #yah-hah-hah, table {background: #fff}

Пример использования по ID, например: куда делись последние 6 сообщений на этой странице?

[in1975]

Добавил еще 2 более опциональных CSS онлайн генератора кнопок, поправил синтаксис на замену, тег [style] нам не нужен, мы его добавляем при импорте.

[ErikPshat]

Сообщение от in1975 поправил синтаксис на замену, тег [style] нам не нужен, мы его добавляем при импорте.

Ты в ББ-коде что-то поправил? Зайти посмотреть лень, ибо нужно запускать тормознутый ТОР.

[in1975]

ErikPshat, не, в шапке, там описание неправильное было. Сделал так:

---

Также можно воспользоваться онлайн-генераторами для создания закладок.

• maxzon.ru
• cssbuttongenerator.com
• webremeslennik.ru

Копируем получившийся код и редактируем под закладки:

1) .button заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}
2) .button:hover заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a:hover {и далее берем из кода...}
3) .button:active заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a.pws_tab_active {и далее берем из кода...}

[ErikPshat]

in1975, а, то есть ты имеешь в виду, что без стилей просто использовать в табах.
А причём тут тогда упоминание "тег [style] нам не нужен"?

P.S. Ппц, я уже запарился, как будто кто-то специально мне ошибки в тексте ставит. Я обычно быстро набираю текст и очень редко было, чтобы я буквы путал, случайно не ту букву нажимал. А сейчас каждый раз как-ьудто мне кто-то исправляет текст и практически в каждом собщении подставляет ошибки.

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

[in1975]

ErikPshat, там было

1) .button заменяем на [style].pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}[/style]

и так в каждой строчке.

З.ы. ты по соседним кнопкам попадаешь просто.

[in1975]

Живой пример.

Здесь текст, содержимое первой вкладки

Здесь текст, содержимое второй вкладки

Здесь текст, содержимое третьей вкладки

[style].pws_tabs_container.re ul.pws_tabs_controll{text-align:center}.pws_tabs_list{width:100%!important;background:transparent}.pws_tabs_container{background:transpsrent;margin:1px 1px}.pws_tabs_container.re ul.pws_tabs_controll li a{color:#fff;border-top: 10px transparent; margin-bottom: 3px; background:-webkit-gradient(linear,left top,left bottom,from(#1b3b1a),to(#117c0f));background:-moz-linear-gradient(top,#117c0f,#117c0f);padding:5px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:rgba(0,0,0,1)0 1px 0;-moz-box-shadow:rgba(2,0,2,1)0 1px 0;box-shadow:rgba(0,0,0,1)0 1px 0;text-shadow:rgba(1,0,0,.4)0 1px 0;font-size:16px;font-family:Xbold,Xbox;text-decoration:none}.pws_tabs_container.re ul.pws_tabs_controll li a:hover{background:#117c0f;color:#fff}.pws_tabs_container.re ul.pws_tabs_controll li a.pws_tab_active{background:#1b3b1a;color:#ff0}[/style]

[ErikPshat]

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

Посмотри на шапку, как всё съехало влево.
На предыдузих страницах всё нормально, на 100% ширину.

[in1975]

ErikPshat, процитировал стиль

[ErikPshat]

in1975, ширину нужно делать 100%, а не 90.
И название re должно быть уникальным, а не совпадать с тем что между тегами OPTIONS.

[in1975]

ErikPshat, в новую тему? https://www.pspx.ru/forum/forumdisplay.php?f=424