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

[in1975]

Сообщение от ErikPshat более проще. Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт,

То что проще легче понять. И vash тоже.

Сообщение от ErikPshat toptions - так и остаётся. tname - теперь на втором месте. tend

Так норм.

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

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

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

---

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

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

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

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

[ErikPshat]

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

PWS Tabs jQuery Plugin

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

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

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

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

Опция	Умолчания	Описание	Доступные настройки	Тип
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	строка
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	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

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

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

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

[/tname]

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

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

[in1975]

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

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

[vash]

Сообщение от ErikPshat ....Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт, не говоря уже о простоюзерах....

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

[in1975]

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

[ErikPshat]

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

[in1975]

Вот сейчас переделываю эту тему, поскольку спойлер слишком длинный.

[ErikPshat]

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

[in1975]

ErikPshat, классно, тему передел. Если что, старая редакция у меня есть.

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

[ErikPshat]

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

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

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

[in1975]

Добавим в заголовок?

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

кстати, бекграунд можно и не ставить на 1 место

[ErikPshat]

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

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

[vash]

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

[in1975]

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

в опции?

[ErikPshat]

Сообщение от in1975 Как иконки добавить во вкладки?

Решено!

---

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

И добавил кнопку для стилей в расширенную панель редактирования.

[ErikPshat]

LIGHT THEMES

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

PSPx THEMES

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

DARK THEMES

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.

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

— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».

(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»...

[in1975]

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

тестовое оформление темы. оцени, позитивные замечания приветствуются. Фон картинку убирать не хочу, говорю сразу то что в дополнительно перенесу в соответствующие разделы (вкладки)

[ErikPshat]

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

[in1975]

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

[ErikPshat]

Сообщение от in1975 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;