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

[in1975]

PWS Tabs jQuery Plugin

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

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

.pws_tabs_container.instructios{padding:10px}.pws_tabs_container.instructios ul.pws_tabs_controll li a.pws_tab_active{background:#1C354A;color:#fff;text-shadow:1px 1px 2px #730F34;padding:8px;margin-right:3px}.pws_tabs_container.instructios .pws_tabs_list{background:#1C354A;color:#fff;text-shadow:1px 1px 2px #730F34;padding:20px}.pws_tabs_container.instructios ul.pws_tabs_controll li a{background:#2D5779;color:white;padding:8px;margin-right:3px}.pws_tabs_container.instructios ul.pws_tabs_controll li a:hover{transition:All 0.8s ease;background:#203F57;color:#fff}.pws_tabs_container.include ul.pws_tabs_controll li a.pws_tab_active{background:#a6164c;color:#FAE4ED;text-shadow:1px 1px 2px #730F34;padding:5px;margin-right:3px}.pws_tabs_container.include .pws_tabs_list{background:#a6164c;color:#FAE4ED;text-shadow:1px 1px 2px #730F34;padding:20px}.pws_tabs_container.include ul.pws_tabs_controll li a{background:#c72c66;color:white;font-size:.9em;padding:5px 8px;margin-right:3px}.pws_tabs_container.include ul.pws_tabs_controll li a:hover{background:#B51A54;color:#fff}instructiosPWS Tabs - адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3. Тыкаешь по закладочке и спойлер раскрывается. Очень компактно и красиво.
(readme.ru и примеры example.html внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12814))

Inserted

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov).
GitHub (https://github.com/alexchizhovcom/pwstabs) - исходники и релизы новых версий на :github:
PWS Tabs PSPx (http://www.pspx.ru/forum/pwstabs/examples/examples.html) - примеры использования.
responsive (http://www.pspx.ru/forum/pwstabs/examples/responsive.html)


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

http://www.pspx.ru/forum/cleardoc/editor/toptions.gif - TOPTIONS (указываем опции из таблицы)
http://www.pspx.ru/forum/cleardoc/editor/tid.gif - TNAME (указываем название табов и содержимое вкладки)
http://www.pspx.ru/forum/cleardoc/editor/tname.gif - 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 (https://maxzon.ru/button_gen/index.html)
cssbuttongenerator.com (http://www.cssbuttongenerator.com/)
webremeslennik.ru (http://webremeslennik.ru/files/ButtonMaker/#)

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

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 {и далее берем из кода...}

секретТак это выглядитДовольно прикольно :)Фон под текстом тоже можно менять, смотрите выше.pws_tabs_container.mytes ul.pws_tabs_controll li a{border-top:1px solid #96d1f8;background:#65a9d7;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;color:white;font-size:14px;font-family:Georgia,Serif;text-decoration:none;vertical-align:middle}.pws_tabs_container.mytes .pws_tabs_list{background:#E7E7E7}.pws_tabs_container.mytes ul.pws_tabs_controll li a.pws_tab_active{background:#1b435e;border-top-color:#1b435e}.pws_tabs_container.mytes ul.pws_tabs_controll li a:hover{background:#28597a;color:#ccc;border-top-color:#28597a}

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

https://htmlcompressor.com/compressor/ - HTML Compressor
http://xn--h1aeef4ax.xn--p1ai/web_tools/code_compressor/index.php - компрессор / декомпрессор CSS или JS
https://cssresizer.com/ru/ (компрессор / декомпрессор CSS)
http://refresh-sf.com/
http://csscompressor.com/


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

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

Расшифровка параметров:
.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;


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

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

Расшифровка параметров: {
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.
}


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

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

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


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

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

Расшифровка параметров: {
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.
}


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

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

PWS Tabs jQuery Plugin позволяет прикреплять иконки к названиям вкладок. Эта возможность появилась благодаря подключению другого популярного плагина веб-иконок Font Awesome. Подробнее об его функциях здесь (http://www.pspx.ru/forum/showthread.php?t=106830).

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

Подбираем иконку на Font Awesome (http://fontawesome.io/icons/), щёлкаем на иконку, откроется страница с иконкой разных размеров.
Под картинками мы видим её оригинальное название, а вот ниже имеется HTML ссылка этой иконки.
Копируем эту ссылку <i class="fa fa-font-awesome" aria-hidden="true"></i>
Удаляем ненужный хвостик aria-hidden="true" (не обязательно) и заменяем двойные кавычки на одинарные.
В результате должно получиться так: <i class='fa fa-font-awesome'></i>
Вставляем её перед "Названием вкладки" в 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;}

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

PWS Tabs Plugin поддерживает Font Awesome (http://www.pspx.ru/forum/showthread.php?t=106830)

[Yoti]

Там, по идее, табы-вкладки.

[in1975]

Yoti, И так на многих сайтах, например тут (http://www.psx-place.com/resources/xmb-package-downloader-xmbpd.460/). Для всякого софта табы-вкладки очень удобно и красиво.
Хотелось бы и тут.

[ErikPshat]

Вот типа такого скрипта https://goo.gl/zTwP2L

[in1975]

Вот типа такого скрипта https://goo.gl/zTwP2L

Ну да. Для софта такие закладки - самое оно. Куча информации в минимальном размере.

[ErikPshat]

Вот посмотрел ещё другие дизайны, остановился ещё на нескольких:

PWS Tabs jQuery Plugin (http://www.htmldrive.net/items/demo/1771/-PWS-Tabs-jQuery-Plugin) - мне он больше всех понравился, но дизайн беловат. В моей цитате выше тоже неплохой.
Making Accordions with the Tabs(jquery) (http://www.htmldrive.net/items/demo/45/Making-Accordions-with-the-Tabsjquery) - в рейтинге самый первый, но это Аккордеон, типа спойлеров.
28 ТАБОВ И ВКЛАДОК ДЛЯ САЙТА НА JQUERY (http://freeweber.ru/for_web_developers/must_have/25-29-tabov-i-vkladok-dlya-sayta-na-jquery.html) - устаревшая тема, но всё же там можно посмотреть на демо.

А это рейтинг табов: http://www.htmldrive.net/categorys/show/10/Tabs?sort=popular

[vash]

Ну вы пля прям художники с навыками программистов.

[ErikPshat]

TabPWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияПо умолчаниюОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalГоризонтальное или вертикальное расположениеhorizontal/verticalстрокаhorizontalPositiontopСверху/Снизу при горизонтальном расположенииtop/bottomстрокаverticalPositionleftСлева/Справа при вертикальном расположенииleft/rightстрокаtheme''Тема оформления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строкаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseлогическиrtlfalseВыравнивание по правому краюtrue/falseлогическиПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).
TabsvertPWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)
Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).


Не пойму, что не так?

[in1975]

ты про адаптивный?

[ErikPshat]

in1975, у меня так же было. Но когда я заполнил немного текстом первую вкладку Адаптивну, тогда эти выползающие надписи пропали.

1Ну главное завелось и работает! :good:
Теперь нужно только с функциями и оформлением разобраться. Что-то мне не нравится этот белый фон.

А потом придётся ещё попариться, нарисовать кнопки для панели редактирования, залить их, вставить коды в шаблоны и написать к кнопкам инструкцию по использованию :)Смотри первый пункт. А кавычки одинарные нужны!

[in1975]

name1опять дело в уникальном имени?Смотри первый пункт. А кавычки одинарные нужны!

[in1975]

ErikPshat, а если сослаться на несуществующую вкладку, то текста по умолчанию не будет.

[in1975]

TabPWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).
TabsvertPWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).


На содержимое не смотри, как тебе общий фон? Вроде норм работает и декор и вкладки.

[ErikPshat]

А вообще в декоре тоже смотрится отлично, получается как одни моноблок.
Только декор думаю лучше скрывать, т.е. отступы от таба убирать. Ну это на вкус и цвет дизайнера.

Насчёт margin действительно в некоторых разделах форум игнорирует любые твои настройки.
Сделал ещё пару тем первых cyan и violet. Залить побаловаться?

[in1975]

Залить побаловаться?
не стесняйся, потом все лишнее удалим :)

[ErikPshat]

pws_theme_cyan - в таблице этот цвет не был указан и в шаблоне его не было, добавлено.
@import url(attachment.php?attachmentid=12861)
CyanTheme1PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).
CyanTheme2PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).


VioletTheme1PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).
VioletTheme2PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).



pws_theme_dark_cyan - в таблице этот цвет не был указан, добавлено.

CyanTheme3PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).
CyanTheme4PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).


VioletTheme3PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).
VioletTheme4PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).

[in1975]

циан норм, а вот виолет мне кажется немного глаза режет. Может потемнее?

[ErikPshat]

in1975, то есть, цвет фона сделать цветом вкладок, а вкладки сделать цветом фона.

Добавил выше для сравнения стандартный Light Cyan и Light Violet. Они на белом фоне.
А декор мне понравился, он ещё не даёт разъезжаться адаптивной вкладке.

[in1975]

in1975, то есть, цвет фона сделать цветом вкладок, а вкладки сделать цветом фона.
да, попробуй

Светлые темы с белым нормально выглядят.

[ErikPshat]

in1975, ну просто у нас вначале было всё логично. Один тег мы вставляем несколько раз между другим тегом, как и должно быть.
А теперь у нас получается нелогично, хотя более проще. Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт, не говоря уже о простоюзерах :) Ты сам хоть пробовал конструкцию и понял, как она работает и удобно ли?

Ну ладно, тогда теперь переименовываем теги так:

toptions - так и остаётся.
tname - теперь на втором месте.
tend или theend или tclose - будет последней пустышкой. Думаю первое.

Потом придётся все наши табы подправлять, иначе развалются. В tid удалять все ID.
А я ещё не спал и сделал все DARK темы и ещё добавил тему BLACK :) залью попозже...

[in1975]

более проще. Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт,
То что проще легче понять. И vash тоже.
toptions - так и остаётся.
tname - теперь на втором месте.
tend
Так норм.

@import url(attachment.php?attachmentid=12858);Тема-черная
Здесь текст, содержимое первой вкладки
Здесь текст, содержимое второй вкладки
Здесь текст, содержимое третьей вкладки


очень-черная

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


Ну а чего повторяться? :) Поэтому просто удалил :).

Кстати, сделай пожалуйста тему с бекграундом под цвет форума. Хотя бы 1

[ErikPshat]

Кстати, сделай пожалуйста тему с бекграундом под цвет форума. Хотя бы 1
@import url(attachment.php?attachmentid=12862);
PSPxTheme1PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip (http://www.pspx.ru/forum/attachment.php?attachmentid=12784))

PWS Tabs jQuery Plugin (http://alexchizhov.com/pwstabs/) - плагин табов на оффсайте от автора Александр Чижов (https://vk.com/aleksandrchizhov) из Екатеринбурга.
Исходники и релизы новых версий на :github: GitHub (https://github.com/alexchizhovcom/pwstabs)

PWS Tabs Plugin поддерживает Font Awesome...По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

ОпцияУмолчанияОписаниеДоступные настройкиТипeffectscaleЭффект переключенияscale/slideleft/slideright
slidetop/slidedown/noneстрокаdefaultTab1Активная вкладкаID вкладки, начинается с 1 (1,2,3..)числоcontainerWidth100%Ширина контейнераЛюбое значение размера (1,2,3../px,pt,em,%,cm..)строкаtabsPositionhorizontalРасположение вкладокhorizontal/verticalстрокаhorizontalPositiontopПри расположении по горизонталиtop/bottomстрокаverticalPositionleftПри расположении по вертикалиleft/rightстрокаtheme''Темы оформления вкладокpws_theme_cyan/pws_theme_dark_cyan
pws_theme_violet/pws_theme_dark_violet
pws_theme_green/pws_theme_dark_green
pws_theme_yellow/pws_theme_dark_yellow
pws_theme_gold/pws_theme_dark_gold
pws_theme_orange/pws_theme_dark_orange
pws_theme_red/pws_theme_dark_red
pws_theme_purple/pws_theme_dark_purple
pws_theme_grey/pws_theme_dark_greyстрокаresponsivefalse!!БЕТА!! Адаптивные вкладкиtrue/falseстрокаrtlfalseПо правому краюtrue/falseстрокаПредварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).



[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]



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

Font Awesome v4.7 (http://fontawesome.io/) - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
Тут можно выбирать Названия иконок (http://fontawesome.io/icons/) и тут Примеры их использования (http://fontawesome.io/examples/).
Исходники и релизы новых версий на :github: GitHub (https://github.com/FortAwesome/Font-Awesome)
Здесь можно посмотреть всё то же самое на русском (http://fontawesome.ru/all-icons/).

[in1975]

ErikPshat, классно, но как-то ты странно сделал. В некоторых темах pspx есть тени к шрифту, в некоторых нет. Оставь уж без теней шрифт. Если будет у кого-то желание, он может сделать тени через декор. И странно это смотрится, название закладки без теней, текст внутри с ним.

{background-color:#E7E7E7;color:#000;text-shadow: 0 1px 0 #000}

[vash]

....Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт, не говоря уже о простоюзерах....
Честно, я конечно за украшательства на форуме. Но есть одно "но" - у нас форум не профессиональный форум программистов, никто так заморачиваться при оформлении своих постов или тем не захочет. Вот пришёл я после работы, пишу сообщения, используя привычные ВВ-коды. :img:
Я это к чему: какое практическое применение данной темы кроме того, что это интересно узкому кругу людей, профессионально занимающихся оформлением сайтов?
Я вас не ругаю, мне действительно хочеться понять это.

[in1975]

vash, Краткое оформление большого объема сообщения.
А по поводу заморачивания. Можно не заморачиваться и на обычные ббкоды. Тут вопрос лени, а не применимости :)

[ErikPshat]

vash, в принципе темы создают практически только модераторы, поэтому вполне пригодится это в оформлении шапки. И причём у нас функционал по бб-кодам в панели редактирования и оформления тем значительно превышает многие другие форумы Powered by vBulletin®. На некоторых форумах даже спойлера нет )))

[in1975]

Вот сейчас переделываю эту тему (http://www.pspx.ru/forum/showthread.php?t=106439), поскольку спойлер слишком длинный.

[ErikPshat]

Урааа, помощь пришла, администратор сервера viper откликнулся и залил файлы на сервер к нам на форум.
За что ему ОГРОМНАЯ благодарность.
Я уже подключил напрямую скрипты и библиотеку jQuery и удалил из шапки лишние теперь вложения.
Но пока CSS у нас ещё в разработке, а в том архиве была стандартная CSS стилей, то пока она остаётся подключённой из вложения.

[in1975]

ErikPshat, классно, тему передел. (http://www.pspx.ru/forum/showthread.php?t=106439) Если что, старая редакция у меня есть.

Надо подумать вот о чем, если удалять /br то названия игр будут друг рядом с другом. Что делать? :)

[ErikPshat]

А у нас кстати есть ББ-код секретный стилей CSS (сделано для таблиц Excel). Синтаксис ББ-кода вот такой (без опций):

.pws_tabs_container ul.pws_tabs_controll li a {border:3px solid #ff0000;color:blue;font-size:18px;font-weight:700;}

А я про него совсем забыл :) Так что эти стили к табам можно так же применять, нужно только их знать, вернее можно через инспектирование кода отлавливать.

[in1975]

секретДобавим в заголовок?Довольно прикольно :)кстати, бекграунд можно и не ставить на 1 место

.pws_tabs_container.mytes ul.pws_tabs_controll li a {border-top: 1px solid #96d1f8; background: #65a9d7; 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; color: white; font-size: 14px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle}.pws_tabs_container.mytes .pws_tabs_list {background:#E7E7E7}.pws_tabs_container.mytes ul.pws_tabs_controll li a.pws_tab_active{background: #1b435e;border-top-color: #1b435e}.pws_tabs_container.mytes ul.pws_tabs_controll li a:hover{background: #28597a; color: #ccc; border-top-color: #28597a}

[ErikPshat]

in1975, O_o, круто! :good: Ну напиши инструкцию. Фотиком фотал?
Зачем тогда картинки кнопок нужны, кода можно написать кнопку текстом :D

А я тем временем немного уже подправил тему, 5 сек, лешко и быстро: http://www.pspx.ru/forum/showthread.php?t=106439
Не думал, что так всё просто получится, просто по порядку брал стили отсюда из шапки и быстренько навалял.
Ну ты её потом можешь по своему вкусу поправить. Только шире на 1 пиксел букву или отступ от буквы - в экран не влезает алфавит, имей в виду.

[vash]

ErikPshat,
in1975,
вы нашли друг друга. Вы товарищи по интересам. )

[in1975]

menuКак иконки добавить во вкладки?в опции?

[ErikPshat]

Как иконки добавить во вкладки?
Решено!


Вот здесь мне дизайн понравился: https://www.shareicon.net/tag/css
Там слева тоже есть вкладки, но они раскрываются и закрываются.

И добавил кнопку для стилей http://www.pspx.ru/forum/cleardoc/editor/css.gif в расширенную панель редактирования.

[ErikPshat]

@import url(attachment.php?attachmentid=12869)CyanThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
VioletThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
GreenThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
YellowThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
GoldThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
OrangeThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
RedThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
PurpleThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
GrayThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
BlackThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_CyanThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_VioletThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_GreenThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_YellowThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_GoldThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_OrangeThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_RedThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_PurpleThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_GrayThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
pspx_BlackThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_CyanThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_VioletThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_GreenThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_YellowThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_GoldThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_OrangeThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_RedThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_PurpleThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_GrayThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...
dark_BlackThemeОднажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

[in1975]

ErikPshat, кстати, про закругление углов надо добавить в шапку. Названия тем не забудь добавить.

тестовое оформление темы (http://www.pspx.ru/forum/showthread.php?t=106746). оцени, позитивные замечания приветствуются. Фон картинку убирать не хочу, говорю сразу :) то что в дополнительно перенесу в соответствующие разделы (вкладки)

[ErikPshat]

in1975, отличная задумка, как баян смотрится :good:. Только жаль контейнер перекрывает основную картинку бэкграунда. Думаю это можно пофиксить параметром background: transpsrent; (прозрачность).

[in1975]

ErikPshat, то что искал!!! Блин, как же я мучался без этого!!!
:thank_you: :yahoo:

[ErikPshat]

ErikPshat, то что искал!!! Блин, как же я мучался без этого!!!
Обалденно получилось! Ещё можно левый ряд вкладок сделать как здесь: https://www.shareicon.net/tag/css

Блин, я тебе написал большую портянку, как и что сделать и ещё много чего, чтобы потом не забыть добавитьь в шапку. А потом взял случайно и не удержал CTRL, нажал ссылку и страница ушла на другой адрес. При возврате назад ничего не сохранилось :(

Вот есть ещё недокументированные параметры: .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_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;

[ErikPshat]

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

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


При желании, возможно темы на странице можно подключить как шрифты через стиль: @import url('attachment.php?attachmentid=12840');
Да, сейчас проверил, отлично работает в теме Font Awesome (http://www.pspx.ru/forum/showthread.php?t=106830)

[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"
@import url(attachment.php?attachmentid=12872)VerticalGrayThemeVerticalGrayTheme
Содержимое
Содержимое
Содержимое
Содержимое
Содержимое
.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}
Используйте минификацию для удаления комментариев, переносов и лишних пробелов: 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 (https://www.shareicon.net/)

[in1975]

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

12879 - тема (http://www.pspx.ru/forum/showthread.php?t=106746)
12880 - тема (http://www.pspx.ru/forum/showthread.php?t=104372)
12882 - тема (http://www.pspx.ru/forum/showthread.php?t=106818)
12883 - тема (http://www.pspx.ru/forum/showthread.php?t=106816)
12881 - тема (http://www.pspx.ru/forum/showthread.php?t=106439)

[ErikPshat]

Тема "FAQ" by in1975
@import url(attachment.php?attachmentid=12884);

faqtabsPosition:'vertical',theme:'faq'
<i class='fa fa-folder-open-o'></i>Название вкладки
.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}

/**
* ###########################
* 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 (http://www.pspx.ru/forum/showpost.php?p=1113469)
Содержимое...
Содержимое...
Содержимое...

[ErikPshat]

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

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

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

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

[ErikPshat]

Добавил к тегу Ссылка на якорь класс class="anchor"
Добавил к тегу Текст содержимого класс class="decor"
Добавил к тегу Текст содержимого класс class="table-pspx"
Добавил к тегу Текст содержимого класс class="tr-pspx"
Добавил к тегу Текст содержимого класс class="td-pspx"
Добавил к тегу Текст содержимого класс class="span-pspx"
Добавил к тегу Текст содержимого класс class="colspan-pspx"

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

.anchor{background:#fff} или .decor{background:#fff}



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

Если в теге 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 сообщений на этой странице (http://www.pspx.ru/forum/showthread.php?t=106860&page=4)?

[in1975]

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

[ErikPshat]

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

[in1975]

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

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

maxzon.ru (https://maxzon.ru/button_gen/index.html)
cssbuttongenerator.com (http://www.cssbuttongenerator.com/)
webremeslennik.ru (http://webremeslennik.ru/files/ButtonMaker/#)

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

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 заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}
и так в каждой строчке.

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

[in1975]

.pws_tabs_container.re ul.pws_tabs_controll{text-align:center}.pws_tabs_list{width:100%!important;background:transparent}.pws_tab s_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}

Живой пример. (http://www.pspx.ru/forum/showthread.php?t=107878)

re

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



.pws_tabs_container.re ul.pws_tabs_controll{text-align:center}.pws_tabs_list{width:100%!important;background:transparent}.pws_tab s_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}

[ErikPshat]

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

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

[in1975]

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

[ErikPshat]

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

[in1975]

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