![:smoker2: :smoker2:](/images/smileys/:smoker2:.gif)
Следуйте инструкции и у вас обязательно должно все выйти.
! Внимание !
Читать
>1< Спойлеры-кнопки
Начнем с классики
То что внутри спойлера
Инструкция
Благодаря манипуляциям с кодом мы можем превратить обычный спойлер (мы сейчас говорим о старой версии - spoiler_v1) в подобие кнопки-панели с вложениями внутри.
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остаеться лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляем этот код:
Цвета таких спойлер-кнопок адаптируются под вашу расцветку. Если вы хотите создать спойлер-кнопку с другими оттенками следуйте инструкции ниже.
Эта идея была адаптирована под данный стиль. За основу взят код от ув. /grin3671. За что его щедро засыпайте благодарностями.
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остаеться лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляем этот код:
[div=fullwidth][spoiler_v1=Название спойлера]То что внутри спойлера[/spoiler_v1][/div]
Как это выглядит:То что внутри спойлера
Как создать спойлер-кнопку с своими цветами
Реализовать мы это будем используя дополнительный класс. Например, рядом с
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляете этот код:
Теперь как изменить цвета. Зайдите в: Настройки > Внешний вид сайта.
Добавим новый код в самом низу окна ввода:
fullwidth
напишем дополнительно color1
. Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляете этот код:
[div=fullwidth color1][spoiler_v1=Название спойлера]То что внутри спойлера[/spoiler_v1][/div]
Теперь как изменить цвета. Зайдите в: Настройки > Внешний вид сайта.
Добавим новый код в самом низу окна ввода:
.fullwidth.color1 label {
background: rgb(12 95 113 / 60%); /* Цвет фона спойлер-кнопки */
color: rgb(185 208 222); /* Цвет названия спойлер-кнопки */
}
.fullwidth.color1 label::after {
color: rgb(180 216 224 / 60%); /* Цвет подсказки "Открыть" на спойлер-кнопке */
}
В итоге у нас выйдет что-то такое:То что внутри спойлера
Эта идея была адаптирована под данный стиль. За основу взят код от ув. /grin3671. За что его щедро засыпайте благодарностями.
>1.1< Модуль оценок для сайтовых постеров и не только
Продолжаем
Инструкция
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остаеться лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляем этот код:
1131x279
1134x315
Эта идея была адаптирована под данный стиль. За основу взят код от ув. /grin3671.
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляем этот код:
[div=k-0-1]
[div=Anime-v-0-1]
[b][animes ids=1535, wall columns=0][/b][div=Text-g1]Имя[/div]
[div=Evaluation-v-v0]10/15[/div]
[div=progress-d-0-1]1000[/div]
[/div]
[div=Anime-v-0-1]
[b][animes ids=1535, wall columns=0][/b][div=Text-g1]Death Note[/div]
[div=Evaluation-v-v0]8/10[/div]
[div=progress-d-0-1]900[/div]
[/div]
[div=Anime-v-0-1]
[b][animes ids=6702 cover_notice=year_kind columns=0][/b][div=Text-g1]Fairy Tail[/div]
[div=Evaluation-v-v0]6/10[/div]
[div=progress-d-0-1]800[/div]
[/div]
[div=Anime-v-0-1]
[b][characters ids=417, wall columns=0][/b][div=Text-g1]Lelouch Lamperouge[/div]
[div=Evaluation-v-v0]8/10[/div]
[div=progress-d-0-1]700[/div]
[/div]
[div=Anime-v-0-1]
[b][mangas ids=33327, columns=0][/b][div=Text-g1]Токийский гуль[/div]
[div=Evaluation-v-v0]4/10[/div]
[div=progress-d-0-1]600[/div]
[/div]
[div=Anime-v-0-1]
[b][people ids=1870, wall columns=0][/b][div=Text-g1]Хаяо Миядзаки[/div]
[div=Evaluation-v-v0]10/10[/div]
[div=progress-d-0-1]500[/div]
[/div][/div]
Как это выглядит: ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1567907.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1567910.jpg)
Эта идея была адаптирована под данный стиль. За основу взят код от ув. /grin3671.
>4< Аниме_Манга + персонажи
Оживляем постеры для аниме и манги
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429945.jpg)
[anime=20 наруто][/anime] /*Аниме*/
[manga=12 блич][/manga] /*Манга*/
[character=14080 накиами][/character] /*Персонаж*/
ID-идентификатор > часть ссылки ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429980.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429981.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429982.jpg)
регулировка постера по высоте
.Ssylki-anime-v-1 strong {
padding-bottom: 60%;
}
подогнать текст по высоте .Ssylki-anime-v-1 .Text-dno-ramka {
padding: 59% 1rem 0;
}
Оценка и Прогресс легко убираются ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432912.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432913.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432914.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432916.jpg)
Выдвижные имена
```css
@import url("https://raw.githubusercontent.com/GM-apostal/GM-apostal.github.io/master/Names_off/Ssylki-anime-v-1.css");
```
```
[div=Ssylki-anime-v-1-blok-1]
[div=Ssylki-anime-v-1][b][manga=12][/manga][/b][div=Text-dno-ramka]Имя.ИТД[/div]
[div=Evaluation-v1]Оценка[/div][div=Fon]ваш комментарий ИТД[/div][div=progress]Прогресс[/div]
[/div]
[div=Ssylki-anime-v-1][b][anime=35790][/anime][/b][div=Text-dno-ramka]Имя.ИТД[/div]
[div=Evaluation-v1]8/10[/div][div=Fon]ваш комментарий ИТД[/div][div=progress]200[/div]
[/div]
[div=Ssylki-anime-v-1][b][character=14080][/character][/b][div=Text-dno-ramka]Имя.ИТД[/div]
[div=Evaluation-v1]6/10[/div][div=Fon]ваш комментарий ИТД[/div][div=progress]300[/div]
[/div]
[/div]
.Ssylki-anime-v-1 > strong > a[href*="/animes/38101-5-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1419533.jpg");
}
.Ssylki-anime-v-1 > strong > a[href*="/animes/z35790-"]::before {
background-image: url("//dere.shikimori.one/system/user_images/original/208335/1419534.jpg");
}
.Ssylki-anime-v-1 > strong > a[href*="/animes/38940-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1414513.jpg");
}
Оценка_взята из Сss-Клуба - автор > grin3671.
>5< Аниме_Манга + персонажи
Оживляем стандартные постеры для аниме и манги
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429993.jpg)
аналогичная замена
1902x803
692x255
1231x980
регулировка постера по высоте
подогнать текст по высоте
952x175 >
667x509
929x158 >
772x534
почти привычный постер >
1019x297
1161x246
1020x224
![](https://desu.shikimori.one/system/user_images/original/208335/1436117.jpg)
1628x304
[anime=20 наруто][/anime] /*Аниме*/
[manga=12 блич][/manga] /*Манга*/
[character=14080 накиами][/character] /*Персонаж*/
ID-идентификатор > часть ссылки ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429980.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429981.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429982.jpg)
регулировка постера по высоте
.Ssylki-anime-v-1-standard strong {
padding-bottom: 130%;
}
подогнать текст по высоте
.Ssylki-anime-v-1-standard .Text-dno-ramka-standard {
padding: 129% 1rem 0;
}
Оценка и Прогресс легко убираются ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432912.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432913.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432914.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1432916.jpg)
Выдвижные имена
```css
@import url("https://raw.githubusercontent.com/GM-apostal/GM-apostal.github.io/master/Names_off/Ssylki-anime-v-1-standard.css");
```
```
почти привычный постер >
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1436114.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1436115.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1436116.jpg)
![](https://desu.shikimori.one/system/user_images/original/208335/1436117.jpg)
.Ssylki-anime-v-1-standard .Text-dno-ramka-standard {
border: none;
}
.Ssylki-anime-v-1-standard::before {
display: none;
}
div.Ssylki-anime-v-1-standard:hover .b-link {
opacity: 1;
}
добавив эти команды к основным > ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1436125.jpg)
.Ssylki-anime-v-1-standard .Text-dno-ramka-standard {
background: none !important;
box-shadow: none;
}
.Ssylki-anime-v-1-standard > strong > a::before {
width: calc(100% - 0px);
height: calc(100% - 0px);
}
[div=Ssylki-anime-v-1-standard-blok-1]
[div=Ssylki-anime-v-1-standard][b][anime=38101][/anime][/b][div=Text-dno-ramka-standard]Пять невест[/div]
[div=Evaluation-v1-standard]10/10[/div][div=Fon-standard]Очень предсказуемый конец[/div][div=progress-standard]1[/div]
[/div]
[div=Ssylki-anime-v-1-standard][b][anime=35790][/anime][/b][div=Text-dno-ramka-standard]Восхождение героя щита[/div]
[div=Evaluation-v1-standard]8/10[/div][div=Fon-standard]Начало норм! середина Гомно[/div][div=progress-standard]200[/div]
[/div]
[div=Ssylki-anime-v-1-standard][b][anime=38940][/anime][/b][div=Text-dno-ramka-standard]Мастерство копа[/div]
[div=Evaluation-v1-standard]6/10[/div][div=Fon-standard]Топик[/div][div=progress-standard]300[/div]
[/div][/div]
.Ssylki-anime-v-1-standard > strong > a[href*="/animes/38101-5-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1419533.jpg");
}
.Ssylki-anime-v-1-standard > strong > a[href*="/animes/z35790-"]::before {
background-image: url("//dere.shikimori.one/system/user_images/original/208335/1419534.jpg");
}
.Ssylki-anime-v-1-standard > strong > a[href*="/animes/38940-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1414513.jpg");
}
.Ssylki-anime-v-1-standard > strong > a[href*="/animes/z38000-"]::before {
background-image: url("//kawai.shikimori.one/system/user_images/original/208335/1426876.jpg");
}
Оценка_взята из Сss-Клуба - автор > grin3671.
>6< Аниме_Манга + персонажи
обычный вариант
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1430010.jpg)
аналогичная замена
1902x803
692x255
1231x980
регулировка постера по высоте
[anime=20 наруто][/anime] /*Аниме*/
[manga=12 блич][/manga] /*Манга*/
[character=14080 накиами][/character] /*Персонаж*/
ID-идентификатор > часть ссылки ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429980.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429981.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429982.jpg)
регулировка постера по высоте
.Ssylki-anime strong {
padding-bottom: 60%;
}
[div=Ssylki-0]
[div=Ssylki-anime][b][anime=38101][/anime][/b]
[div=Evaluation]10/10[/div][div=Text-2]Пять невест[/div]
[/div]
[div=Ssylki-anime][b][anime=35790][/anime][/b]
[div=Evaluation]8/10[/div][div=Text-2]Восхождение героя щита[/div]
[/div]
[div=Ssylki-anime][b][anime=38940][/anime][/b]
[div=Evaluation]6/10[/div][div=Text-2]Мастерство копа[/div]
[/div]
[div=Ssylki-anime][b][anime=38000][/anime][/b]
[div=Evaluation]7/10[/div][div=Text-2]Клинок, рассекающий демонов[/div]
[/div]
[div=Ssylki-anime][b][anime=37999][/anime][/b]
[div=Evaluation]4/10[/div][div=Text-2]Госпожа Кагуя: в любви как на войне[/div]
[/div][/div]
.Ssylki-anime > strong > a[href*="/animes/38101-5-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1419533.jpg");
}
.Ssylki-anime > strong > a[href*="/animes/z35790-"]::before {
background-image: url("//dere.shikimori.one/system/user_images/original/208335/1419534.jpg");
}
.Ssylki-anime > strong > a[href*="/animes/38940-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1414513.jpg");
}
.Ssylki-anime > strong > a[href*="/animes/z38000-"]::before {
background-image: url("//w.wallhaven.cc/full/9m/wallhaven-9md8qd.jpg");
}
.Ssylki-anime > strong > a[href*="/animes/37999-"]::before {
background-image: url("//desu.shikimori.one/system/user_images/original/208335/1429593.jpg");
}
Оценка_взята из Сss-Клуба - автор > grin3671.
>7< Постеры виде пчелиных сот
![:) :)](/images/smileys/:).gif)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1430024.jpg)
аналогичная замена
1902x803
692x255
1231x980
Так выглядит готовый вариант
Результат > ![](https://desu.shikimori.one/system/user_images/original/208335/1430054.jpg)
[character=14080][/character] /*Персонаж*/
ID-идентификатор > часть ссылки ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429980.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429981.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1429982.jpg)
Так выглядит готовый вариант
[div=magnet][div=Ssylki-3]
[div=Ssylki-Characters][b][character=118735][/character][/b][div=Text-1]Subaru Natsuki[/div][/div]
[div=Ssylki-Characters][b][character=13468][/character][/b][div=Text-1]Keima Katsuragi[/div][/div]
[div=Ssylki-Characters][b][character=425][/character][/b][div=Text-1]Ginko[/div][/div]
[div=Ssylki-Characters][b][character=124731][/character][/b][div=Text-1]Asta[/div][/div][/div]
[div=Ssylki-3]
[div=Ssylki-Characters][b][character=496][/character][/b][div=Text-1]Shirou Emiya[/div][/div]
[div=Ssylki-Characters][b][character=82523][/character][/b][div=Text-1]Sora[/div][/div]
[div=Ssylki-Characters][b][character=24183][/character][/b][div=Text-1]Toyohisa Shimazu[/div][/div]
[div=Ssylki-Characters][b][character=422][/character][/b][div=Text-1]Guts[/div][/div]
[div=Ssylki-Characters][b][character=601][/character][/b][div=Text-1]Alucard[/div][/div]
[div=Ssylki-Characters][b][character=128909][/character][/b][div=Text-1]Kiyotaka Ayanokouji[/div][/div]
[div=Ssylki-Characters][b][character=459][/character][/b][div=Text-1]Rokurou Okajima[/div][/div][/div]
[div=Ssylki-3]
[div=Ssylki-Characters][b][character=67065][/character][/b][div=Text-1]Hachiman Hikigaya[/div][/div]
[div=Ssylki-Characters][b][character=112891][/character][/b][div=Text-1]Naofumi Iwatani[/div][/div]
[div=Ssylki-Characters][b][character=8835][/character][/b][div=Text-1]Tetsu Hayami[/div][/div]
[div=Ssylki-Characters][b][character=14809][/character][/b][div=Text-1]Lag Seeing[/div][/div]
[div=Ssylki-Characters][b][character=12295][/character][/b][div=Text-1]Ryuuji Takasu[/div][/div]
[div=Ssylki-Characters][b][character=110429][/character][/b][div=Text-1]Tatara Fujita[/div][/div][/div]
[div=Ssylki-3]
[div=Ssylki-Characters][b][character=117909][/character][/b][div=Text-1]Izuku Midoriya[/div][/div]
[div=Ssylki-Characters][b][character=53901][/character][/b][div=Text-1]Madara Uchiha[/div][/div]
[div=Ssylki-Characters][b][character=3180][/character][/b][div=Text-1]Pain[/div][/div]
[div=Ssylki-Characters][b][character=139][/character][/b][div=Text-1]Allen Walker[/div][/div]
[div=Ssylki-Characters][b][character=35252][/character][/b][div=Text-1]Rintarou Okabe[/div][/div]
[div=Ssylki-Characters][b][character=434][/character][/b][div=Text-1]Eikichi Onizuka[/div][/div]
[div=Ssylki-Characters][b][character=673][/character][/b][div=Text-1]Shinpachi Shimura[/div][/div][/div]
[div=Ssylki-3]
[div=Ssylki-Characters][b][character=40882][/character][/b][div=Text-1]Eren Yeager[/div][/div]
[div=Ssylki-Characters][b][character=3149][/character][/b][div=Text-1]Tobi[/div][/div]
[div=Ssylki-Characters][b][character=80][/character][/b][div=Text-1]Light Yagami[/div][/div]
[div=Ssylki-Characters][b][character=909][/character][/b][div=Text-1]Kenpachi Zaraki[/div][/div]
[div=Ssylki-Characters][b][character=13700][/character][/b][div=Text-1]Touma Kamijou[/div][/div]
[div=Ssylki-Characters][b][character=118607][/character][/b][div=Text-1]Leonardo Watch[/div][/div][/div]
[div=Ssylki-3]
[div=Ssylki-Characters][b][character=2257][/character][/b][div=Text-1]Simon[/div][/div]
[div=Ssylki-Characters][b][character=2910][/character][/b][div=Text-1]Obito Uchiha[/div][/div]
[div=Ssylki-Characters][b][character=126340][/character][/b][div=Text-1]Sieg[/div][/div]
[div=Ssylki-Characters][b][character=157935][/character][/b][div=Text-1]Mo-Ri Jin[/div][/div]
[div=Ssylki-Characters][b][character=31][/character][/b][div=Text-1]Hisoka Morow[/div]
[/div][/div][/div]
.Ssylki-Characters > strong > a[href*="/characters/118735-"]::before {
background: url("//moe.shikimori.one/system/images/original/113452.gif?1614961166") 50% / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/13468-"]::before {
background: url("//nyaa.shikimori.one/system/user_images/original/208335/1333585.jpg") 65% 67%/ 120%;
}
.Ssylki-Characters > strong > a[href*="/characters/425-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1333603.jpg") 35% 0 / 120%;
}
.Ssylki-Characters > strong > a[href*="/characters/124731-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1333618.jpg") 50% 30% / 150%;
}
.Ssylki-Characters > strong > a[href*="/characters/496-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/274756/1085318.jpg") 37% 7% / 200%;
}
.Ssylki-Characters > strong > a[href*="/characters/82523-"]::before {
background: url("//dere.shikimori.one/system/user_images/original/274756/1416779.jpg") 70% 10% / 175%;
}
.Ssylki-Characters > strong > a[href*="/characters/24183-"]::before {
background: url("//dere.shikimori.one/system/user_images/original/208335/1333694.jpg") 10% 20% / 125%;
}
.Ssylki-Characters > strong > a[href*="/characters/422-"]::before {
background: url("//moe.shikimori.one/system/user_images/original/208335/617752.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/601-"]::before {
background: url("//moe.shikimori.one/system/user_images/original/208335/1412917.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="characters/128909-"]::before {
background: url("//nyaa.shikimori.one/system/images/original/113450.gif?1614960582") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/459-"]::before {
background: url("//kawai.shikimori.one/system/user_images/original/208335/848196.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="characters/67065-"]::before {
background: url("//nyaa.shikimori.one/system/user_images/original/208335/617755.jpg") center 0 / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/112891-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1129938.jpg") 57% 10% / 550%;
}
.Ssylki-Characters > strong > a[href*="/characters/8835-"]::before {
background: url("//moe.shikimori.one/system/user_images/original/208335/1335002.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/14809-"]::before {
background: url("//kawai.shikimori.one/system/user_images/original/208335/1333636.jpg") 48% 80% / 200%;
}
.Ssylki-Characters > strong > a[href*="/characters/12295-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1334998.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/110429-"]::before {
background: url("//dere.shikimori.one/system/user_images/original/208335/1334999.jpg") 60% 0% / 136%;
}
.Ssylki-Characters > strong > a[href*="/characters/117909-"]::before {
background: url("//kawai.shikimori.one/system/user_images/original/208335/1333896.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/53901-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1333768.jpg") center 10% / 150%;
}
.Ssylki-Characters > strong > a[href*="/characters/3180-"]::before {
background: url("//nyaa.shikimori.one/system/images/original/113530.gif?1615266538") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/139-"]::before {
background: url("//nyaa.shikimori.one/system/user_images/original/208335/1333735.jpg") 65% 10% / 250%;
}
.Ssylki-Characters > strong > a[href*="/characters/35252-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1333713.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/434-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/799763.jpg") 53% 42%/ 500%;
}
.Ssylki-Characters > strong > a[href*="/characters/673-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/823708.jpg") 48% 8% / 200%;
}
.Ssylki-Characters > strong > a[href*="/characters/40882-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/1333783.jpg") center 0 / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/3149-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/675823.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/80-light-"]::before {
background: url("//kawai.shikimori.one/system/images/original/113531.gif?1615267510") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/909-"]::before {
background: url("//desu.shikimori.one/system/user_images/original/208335/706858.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/13700-"]::before {
background: url("//nyaa.shikimori.one/system/user_images/original/208335/1333670.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="characters/118607-"]::before {
background: url("//kawai.shikimori.one/system/user_images/original/208335/675826.jpg") 40% 10% / 150%;
}
.Ssylki-Characters > strong > a[href*="/characters/2257-"]::before {
background: url("//dere.shikimori.one/system/images/original/113424.gif?1614879543") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/2910-"]::before {
background: url("//dere.shikimori.one/system/user_images/original/208335/1129959.jpg") 0% 70% / 110%;
}
.Ssylki-Characters > strong > a[href*="/characters/126340-"]::before {
background: url("//kawai.shikimori.one/system/user_images/original/208335/1333851.jpg") center / cover;
}
.Ssylki-Characters > strong > a[href*="/characters/157935-"]::before {
background: url("//kawai.shikimori.one/system/user_images/original/208335/1159911.jpg") 0 75% / 115%;
}
.Ssylki-Characters > strong > a[href*="/characters/31-hisoka-"]::before {
background: url("//dere.shikimori.one/system/user_images/original/208335/1334924.jpg") 65% 15% / 150%;
}
До 7 > Постеров в ряд!!! Пример > ![](https://desu.shikimori.one/system/user_images/original/208335/1430053.jpg)
![](https://desu.shikimori.one/system/user_images/original/208335/1430054.jpg)
>8< Кнопки
*
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1613222.jpg)
BB-code
[div=button-left-1][b][/b][url=http://ic.wampi.ru/2021/02/28/g01.png]Steam[/url][/div]
[div=button-left-2][b][/b][url=https://mangalib.me/]Mangalib[/url][/div]
[div=button-left-3][b][/b][url=https://tl.rulate.ru/]Rulate[/url][/div]
[div=button-left-4][b][/b][url=https://www.anilibria.tv/pages/catalog.php]Anilibria[/url][/div]
[div=button-right-1][b][/b][url=http://ic.wampi.ru/2021/02/28/g01.png]Steam[/url][/div]
[div=button-right-2][b][/b][url=https://mangalib.me/]Mangalib[/url][/div]
[div=button-right-3][b][/b][url=https://tl.rulate.ru/]Rulate[/url][/div]
[div=button-right-4][b][/b][url=https://www.anilibria.tv/pages/catalog.php]Anilibria[/url][/div]
с лева
@media screen and (min-width: 1200px) {
.button-left-1:hover,
.button-left-2:hover,
.button-left-3:hover,
.button-left-4:hover {
left: -2px;
z-index: 60;
opacity: 0.8;
background: rgba(var(--menu-back), 1);
}
.button-left-1,
.button-left-2,
.button-left-3,
.button-left-4 {
position: fixed;
height: 50px;
border: 2px solid rgba(var(--bright-color), 0.1);
background: rgba(var(--menu-back), 0.9);
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.18);
text-shadow: 0 1px 2px #00000040;
border-radius: 0px 1rem 1rem 0;
overflow: hidden;
z-index: 20;
opacity: 0.8;
transition: 0.5s ease-in-out, background-position 0s, border 0s,
border-radius 0s;
}
.button-left-1 > strong,
.button-left-2 > strong,
.button-left-3 > strong,
.button-left-4 > strong {
position: absolute;
width: 40px;
height: 40px;
top: 0;
right: 5px;
bottom: 0;
margin: auto 0;
border-radius: 100px;
box-shadow: 0px 0px 3px 3px #00000026;
pointer-events: none;
background-color: #cfd0d21a;
background-position: center;
border: 2px solid #1f1e1ee6;
}
.button-left-1 {
top: 5.465rem;
left: -120px;
width: 180px;
}
.button-left-2 {
top: 9.2rem;
left: -100px;
width: 160px;
}
.button-left-3 {
top: 12.92rem;
left: -140px;
width: 200px;
}
.button-left-4 {
top: 16.71rem;
left: -140px;
width: 200px;
}
.button-left-1 > strong {
background-image: url("https://moe.shikimori.one/system/user_images/original/208335/1607102.jpg");
background-size: cover;
}
.button-left-2 > strong {
background-image: url("https://desu.shikimori.one/system/user_images/original/208335/1607108.jpg");
background-size: cover;
}
.button-left-3 > strong {
background-image: url("https://i.ibb.co/7rKGmgX/bt232.png");
background-size: cover;
}
.button-left-4 > strong {
background-image: url("https://dere.shikimori.one/system/user_images/original/208335/1607109.jpg");
background-size: cover;
}
.button-left-1 .b-link,
.button-left-2 .b-link,
.button-left-3 .b-link,
.button-left-4 .b-link {
display: flex;
align-items: center;
height: 100% !important;
font-size: 16px !important;
color: rgba(var(--dark-color), var(--hundred)) !important;
justify-content: center;
}
.button-left-1 .b-link {
padding-right: 3rem;
}
.button-left-2 .b-link {
padding-right: 3rem;
}
.button-left-3 .b-link {
padding-right: 3rem;
}
.button-left-4 .b-link {
padding-right: 3rem;
}
}
@media screen and (max-width: 1200px) {
.button-left-1,
.button-left-2,
.button-left-3,
.button-left-4 {
display: none;
}
}
с права
140x394
@media screen and (min-width: 1200px) {
.button-right-1:hover,
.button-right-2:hover,
.button-right-3:hover,
.button-right-4:hover {
right: -10px;
z-index: 60;
opacity: 0.8;
background: rgba(var(--menu-back), 1);
}
.button-right-1,
.button-right-2,
.button-right-3,
.button-right-4 {
position: fixed;
height: 50px;
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.18);
border: 2px solid rgba(var(--bright-color), 0.1);
background: rgba(var(--menu-back), 0.9);
text-shadow: 0 1px 2px #00000040;
border-radius: 1rem 0 0 1rem;
z-index: 20;
opacity: 0.8;
transition: 0.5s ease-in-out, background-position 0s, border 0s, border-radius 0s;
}
.button-right-1 > strong,
.button-right-2 > strong,
.button-right-3 > strong,
.button-right-4 > strong {
position: absolute;
width: 40px;
height: 40px;
top: 0;
left: 5px;
bottom: 0;
margin: auto 0;
border-radius: 100px;
box-shadow: 0px 0px 3px 3px #00000026;
pointer-events: none;
background-color: #cfd0d21a;
background-position: center;
border: 2px solid #1f1e1ee6;
}
.button-right-1 {
top: 5.465rem;
right: -120px;
width: 180px;
}
.button-right-2 {
top: 9.2rem;
right: -100px;
width: 160px;
}
.button-right-3 {
top: 12.92rem;
right: -140px;
width: 200px;
}
.button-right-4 {
top: 16.71rem;
right: -140px;
width: 200px;
}
.button-right-1 > strong {
background-image: url("https://moe.shikimori.one/system/user_images/original/208335/1607102.jpg");
background-size: cover;
}
.button-right-2 > strong {
background-image: url("https://desu.shikimori.one/system/user_images/original/208335/1607108.jpg");
background-size: cover;
}
.button-right-3 > strong {
background-image: url("https://i.ibb.co/7rKGmgX/bt232.png");
background-size: cover;
}
.button-right-4 > strong {
background-image: url("https://dere.shikimori.one/system/user_images/original/208335/1607109.jpg");
background-size: cover;
}
.button-right-1 .b-link,
.button-right-2 .b-link,
.button-right-3 .b-link,
.button-right-4 .b-link {
display: flex;
align-items: center;
height: 100% !important;
font-size: 16px !important;
color: rgba(var(--dark-color), var(--hundred)) !important;
justify-content: center;
}
.button-right-1 .b-link {
padding-left: 3rem;
}
.button-right-2 .b-link {
padding-left: 3.3rem;
}
.button-right-3 .b-link {
padding-left: 3rem;
}
.button-right-4 .b-link {
padding-left: 3rem;
}
}
@media screen and (max-width: 1200px) {
.button-right-1,
.button-right-2,
.button-right-3,
.button-right-4 {
display: none;
}
}
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1613223.jpg)
border: 1px #456;
border-style: double;
box-shadow: -2px -2px 0px 0px #456;
border-radius: 0.3rem 0 0 0.3rem;
>9< Слайдеры
About addon
Инструкция
Является частью библиотеки q10_cosmo_library в сборщике. Проверьте наличие этого дополнения в настройках внешнего вида сайта.
Имя файла - q10-05_slider_0.css
Дополнение работает на базе стандартных табов. Рассмотрим настройку на примере одного слайдера с тремя секциями.
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Добавляем такой код:
1) В конструкции видно что два этих блока находятся в двух, условных, списках.
Как правило, первым в вашем профиле будет показан слайд, который будет выбран активированным изначально через BBcode.
Наши (те самые что выше, в каждом из списков) первые элементы должны быть активированы поэтому,
Адаптировано для публичного использования /Cosmo+☭.
Имя файла - q10-05_slider_0.css
Дополнение работает на базе стандартных табов. Рассмотрим настройку на примере одного слайдера с тремя секциями.
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Добавляем такой код:
[div=id-01 to-process data-dynamic=tabs]
[div=id-01__slide data-tab]
[poster=1183296]
[/div]
[div=id-01__slide hidden data-tab]
Example
[/div]
[div=id-01__slide hidden data-tab]
Example
[/div]
[div=id-01_control-block][/div]
[div=id-01__buttons-2]
[div=id-01__button active data-tab-switch][/div]
[div=id-01__button data-tab-switch][/div]
[div=id-01__button data-tab-switch][/div]
[/div]
[/div]
Не будем сильно вдаваться то как все работает. Главное знать что два блока [div=id-01__slide data-tab][/div]
и [div=id-01__button data-tab-switch][/div]
связаны между собой.1) В конструкции видно что два этих блока находятся в двух, условных, списках.
Как правило, первым в вашем профиле будет показан слайд, который будет выбран активированным изначально через BBcode.
Наши (те самые что выше, в каждом из списков) первые элементы должны быть активированы поэтому,
[div=id-01__slide data-tab][/div]
- элементы должны иметь доп. классhidden
, а активированный (первый сверху) - не иметь;-
[div=id-01__button data-tab-switch][/div]
- активированный элемент должен иметь доп.классactive
(первый сверху), а остальные не активные - не иметь класса.
2) Свои картинки вы добавляете в блоки[div=id-01__slide data-tab][/div]
, через BBcode[posters=]
В нашем случае (выше) мы вставили картинку в первый контейнер и он у нас будет активным. В соатльные два мы просто оставили фразу "Example".
Что у нас выходит в итоге:
спойлер
Первоначально идея слайдера была высмотрена у ув. /grin3671, поэтому он является и автором. Так что все благодарности отсыпайте ему.Адаптировано для публичного использования /Cosmo+☭.
>10< Мега слайдер
About addon
Инструкция
Является частью библиотеки q10_cosmo_library в сборщике. Проверьте наличие этого дополнения в настройках внешнего вида сайта.
Имя файла - q10-06_mega-slider_0.css
Инструкция к данному дополнению идентична с инструкцией к дополнению ">7< Слайдеры".
Отличием является только различие названия основных классов, которые начинаются с
Пример
Адаптировано для публичного использования /Cosmo+☭.
Является частью библиотеки q10_cosmo_library в сборщике. Проверьте наличие этого дополнения в настройках внешнего вида сайта.
Имя файла - q10-06_mega-slider_0.css
Инструкция к данному дополнению идентична с инструкцией к дополнению ">7< Слайдеры".
Отличием является только различие названия основных классов, которые начинаются с
id-0
Пример
спойлер
Первоначально идея слайдера была высмотрена у ув. /grin3671, поэтому он является и автором. Так что все благодарности отсыпайте ему.Адаптировано для публичного использования /Cosmo+☭.
>11< Табы
Адаптированные табы
Поддерживают вложенность.
Кнопка 1
Кнопка 2
Кнопка 3
Контент 1
Контент 2
Контент 3
Инструкция
1315x168
1326x292
1316x296
1324x208
1330x742
1493x1062
1363x1064
Адаптированные табы с CSS-club под данный стиль
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остается лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставьте как пример код выше.
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2003856.jpg)
[div=use-tabs --ripple --centered --vertical --On] убрав [ --On ] включится стандартный Таб - grin3671.
Остальную информацию смотрите у grin3671.
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2003858.jpg)
[div=use-tabs --ripple --centered --vertical --On]
[div=active to-process data-dynamic=switcher data-switcher=tab1]Кнопка 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 2[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 3[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]Контент 1[/div]
[div=CUSTOM_PANEL]Контент 2[/div]
[div=CUSTOM_PANEL]Контент 3[/div]
[/div]
[/div]
Дополнительные Кнопки внутри Таба >[div=use-tabs --ripple --centered --vertical --On]
[div=active to-process data-dynamic=switcher data-switcher=tab1]Кнопка 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 2[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 3[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Кнопка 4[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab2]Кнопка 5[/div]
[div=to-process data-dynamic=switcher data-switcher=tab2]Кнопка 6[/div]
[div=to-process data-dynamic=switcher data-switcher=tab2]Кнопка 7[/div]
[div=to-process data-dynamic=switcher data-switcher=tab2]Кнопка 8[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]Контент 5[/div]
[div=CUSTOM_PANEL]Контент 6[/div]
[div=CUSTOM_PANEL]Контент 7[/div]
[div=CUSTOM_PANEL]Контент 8[/div]
[/div]
[/div][/div]
[div=CUSTOM_PANEL]Контент 2[/div]
[div=CUSTOM_PANEL]Контент 3[/div]
[div=CUSTOM_PANEL]Контент 4[/div]
[/div]
[/div]
С иконками ![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2006405.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2006406.jpg)
[div=use-tabs --ripple --centered --vertical --On]
[div=active to-process data-dynamic=switcher data-switcher=tab1 data-icon=add_photo_alternate]Кнопка 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1 data-icon=account_balance]Кнопка 2[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1 data-icon=tv]Кнопка 3[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]Контент 1[/div]
[div=CUSTOM_PANEL]Контент 2[/div]
[div=CUSTOM_PANEL]Контент 3[/div]
[/div]
[/div]
Добавив приставку --Fat. включит боле подходящий дизайн к Теме.
[div=use-tabs --ripple --centered --vertical] >
[div=use-tabs --ripple --centered --vertical --Fat] [--On] должен быть убран!!
Изначальный Таб. grin3671. по-прежнему работает >
[div=use-tabs --ripple --centered --vertical]
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2007338.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2007339.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/2007340.jpg)
Адаптированные табы с CSS-club под данный стиль
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остается лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставьте как пример код выше.
>12< Панель быстрого доступа
Фиксированная панель с ссылками в виде картинок в вашем профиле
инструкция
691x441
1199x709
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1330132.jpg)
![](https://desu.shikimori.one/system/user_images/thumbnail/208335/1330133.jpg)
[div=qa-panel]
[url=Ссылка]
[div=qa-link qa01][/div]
[/url]
[url=Ссылка]
[div=qa-link qa02][/div]
[/url]
[url=Ссылка]
[div=qa-link qa03][/div]
[/url]
[url=Ссылка]
[div=qa-link qa04][/div]
[/url]
[url=Ссылка]
[div=qa-link qa05][/div]
[/url]
[/div]
СSS
/*Панель быстрого доступа*/
.qa-panel {
position: fixed;
display: flex;
justify-content: center;
flex-wrap: wrap-reverse;
background: none;
width: 62px;
backdrop-filter: blur(2px);
padding-top: 0;
padding-bottom: 0;
left: 3%;
top: 9.375rem;
opacity: 0.8;
z-index: 50;
border-radius: 3.25rem;
transition: 0s ease, padding 0.3s, background 0.3s, box-shadow 0.3s, opacity 0.3s;
background-color: transparent;
pointer-events: none;
}
.qa-panel:hover {
opacity: 1;
padding-top: 3.875rem;
padding-bottom: 0;
background-color: rgba(var(--light-color), 0.1);
box-shadow: 0 2px 4px 1px #0003;
pointer-events: auto;
transition: 0s ease, padding .3s, background 0.3s, box-shadow 0.3s, opacity 0.3s;
}
.qa-panel:hover:before {
height: 15.9375rem;
opacity: 1;
}
.qa-panel:after {
content: "\f009";
font: normal normal normal 40px/1 FontAwesome;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: auto;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 62px;
height: 62px;
top: -0.1rem;
z-index: 50;
border-radius: 3.25rem;
border: 2px solid rgba(var(--bright-color), 0.1);
transition: 0s all, background 0.5s, color 0.5s;
background: rgba(var(--menu-back), 0.9);
pointer-events: auto;
}
.qa-panel:hover:after {
background-color: rgba(var(--menu-back), 0.9);
animation: none;
transition: 0s all, background 0.3s, color 0.3s;
}
.qa-panel .b-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 0;
opacity: 0;
overflow: hidden;
transition: 0s all, height 1.2s, opacity 1.2s;
}
.qa-panel:hover .b-link {
opacity: 1;
overflow: visible;
transition: 0s all, height 0.3s, opacity 0.3s;
height: 3.625rem;
}
.qa-link {
width: 45px;
height: 45px;
opacity: 0;
border-radius: 3.25rem;
transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
}
.qa-panel:hover .qa-link {
opacity: 1;
background-color: rgba(var(--light-color), 0.5);
}
.qa-link:hover {
animation: none;
transition: 0s all, opacity 0.3s;
}
.qa-link:before {
display: inline-flex;
justify-content: center;
white-space: nowrap;
top: 0;
position: absolute;
height: 1.25rem;
left: 0;
bottom: 0;
margin: auto;
width: auto;
background-color: #17171799;
padding: 0.5rem 0.8125rem;
font-size: 13px;
text-shadow: 0 1px 2px #000;
box-shadow: 0 0 5px rgba(var(--shadows-color), 0.1);
transition: 0.1s ease;
color: rgba(var(--white-color), var(--hundred));
border-radius: 1.1875rem;
transform: scale(0);
transition: 0.3s ease-in-out;
}
.qa-link:hover:before {
left: 4.25rem;
transition: 0.15s ease-in-out;
transform: scale(1);
}
@media screen and (max-width: 1200px) {
.qa-panel {
display: none;
}
}
.qa01 {
background: url("Ссылка на картинку") no-repeat 50% 50% / 100%;
}
.qa02 {
background: url("Ссылка на картинку") no-repeat 50% 50% / 100%;
}
.qa03 {
background: url("Ссылка на картинку") no-repeat 50% 50% / 100%;
}
.qa04 {
background: url("Ссылка на картинку") no-repeat 50% 50% / 100%;
}
.qa05 {
background: url("Ссылка на картинку") no-repeat 50% 50% / 100%;
}
.qa01:before {
content: "Название ссылки";
}
.qa02:before {
content: "Название ссылки";
}
.qa03:before {
content: "Название ссылки";
}
.qa04:before {
content: "Название ссылки";
}
.qa05:before {
content: "Название ссылки";
}
@K͙i͙k͙a͙z͙a͙r͙u͙, я сделаламогу и тебе попробовать помочь
@Cosmo ☭ как создать больше одной кнопки?@Cosmo ☭,@Cosmo ☭@BrBear, Нужно код делать на 2 кнопку + расположение указывать.@BrBear, + 3 Кнопки. что-то хотел но забылBB+CSS ++
@BrBear@Cosmo ☭, немного неправильно сформулировал вопрос. там идут 4 вертикальные кнопки. попробовал сделать больше, неполучилось.@Cosmo ☭@BrBear, Нужно добавить строчку bb-cod[div=button-left-5][b][/b][url=https://www.anilibria.tv/pages/catalog.php]Anilibria[/url][/div]
@BrBear@Cosmo ☭, строчка добавлена, а кнопка не появилась@Cosmo ☭@BrBear, Готовый код на 6 кнопок >bb-cod
css
@BrBear@Cosmo ☭, спасибо.Хотел бы спросить, можно ли подписывать каждый слайд на слайдере?
Подскажите сколько можно сделать слайдов, на 1 слайдере?
@Alexsandr@Шикимен, код + скрин результата. Хз куда проще@lollokek@lollokek, ну чтобы была и картинка крч как в каталоге наводишь курсор на тайтл@Clear Foe@lollokek, bbcode: /bb_codesКружочек прогресса
Имя, название
Фикс для WYSIWYG
Красная полоска
Кружочек
Далее отключаем подсказку у этого аниме.
И наконец ставим постер
Под постером
Изменить фон:
Вначале в bb code блоку
Ssylki-anime-v-1
добавляем любой класс. Вот так:Далее в css указываем этот класс в селекторе и ставим фон:
Добавить градиент как в >6<
Фикс для WYSIWYG
Красная полоска
Кружочек
Размер постера
Далее отключаем подсказку у этого аниме.
И наконец ставим постер
Меняем постер при наведении
Вначале блоку
Ssylki-anime-v-1-standard
добавляем новый класс:Потом в css ставим новый фон
@animeshnik_ALT,@animeshnik_ALT@animeshnik_ALT,Разные градиенты
Текст на постере
Красная линия
Далее отключаем подсказку у этого аниме.
И наконец ставим постер
Смещаем вторую красную полоску
Дополнительный-класс
.Вот так:
Далее менять постеры мы, конечно же, будем в CSS.
Оставляем текст при наведении на постер:
Пишем текст в CSS:
Постер через ваш класс
Размер
Фон
Фон при наведении
Фон у текста при наведении
Отключить поворот
Видимость на телефонах
Далее отключаем подсказку у этого аниме.
И наконец ставим постер
@IR@animeshnik_ALT,Готовый код на 6 кнопок
[div=use-tabs --ripple --centered --On]Все табы[/div]
Указывается 1 раз и содержит внутри себя все табы.[div=to-process data-dynamic=switcher data-switcher=tab1]Название таба[/div]
Это сама кнопка. Когда она активна, к ней ещё добавляется классactive
.[div=CUSTOM_PANELS_CONTAINER]куча табов[/div]
Содержит в себе остальные[div=CUSTOM_PANEL][/div]
. При создании табов внутри таба указывается вновь.[div=CUSTOM_PANEL]контент[/div]
Тут находится весь контент внутри одного таба. Для следующего таба вначале закрываем предыдущий, а потом создаём следующий[div=CUSTOM_PANEL]контент[/div]
и так далее. Самое сложное - это не запутаться в куче[/div]
.При создании вложенных табов добавляем дополнительный блок
[div=custom-panel]
, а также меняем номер уdata-switcher=tab1
наdata-switcher=tab2
и т.д. для того, чтобы вложенный таб был автоматически открыт при переходе. В общем и целом, экспериментируйте и сами всё рано или поздно поймете.Значок справа
Текст
@animeshnik_ALT, благодарен тебе за прошлый раз хотел спросить , можно ли поменять цвет в коде а то я ищу и там 3-4 поцизии с цветом какой из них?