E-club - поддержка стиля Edesign для shikimori

КлубыE-club - поддержка стиля Edesign для shikimoriТопики
Cosmo ☭
Cosmo ☭вE-club - поддержка стиля Edesign для shikimori
81
Несмотря на название :smoker2:, топик может стать очень даже серьезным и полезным инструментом для тех, кто хочет оживить свой профиль. Тут будут выкладываться готовые решение и инструкции с примерами о том, как правильно применить их к своему профилю. Преимущественно все будет касаться именно блока "Обо мне".
Следуйте инструкции и у вас обязательно должно все выйти.

! Внимание !
Читать

Будьте разумны! Не надо заливать такие ОГРОМНЫЕ Картинки :shock:
568x570

>1< Спойлеры-кнопки
Начнем с классики
То что внутри спойлера
Инструкция
Благодаря манипуляциям с кодом мы можем превратить обычный спойлер (мы сейчас говорим о старой версии - spoiler_v1) в подобие кнопки-панели с вложениями внутри.
Весь необходимый 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. За что его щедро засыпайте благодарностями.
Автор: /grin3671 Адаптатор: /EngiNier


>1.1< Модуль оценок для сайтовых постеров и не только
Продолжаем
Инструкция
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остаеться лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставляем этот код:
[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]
Как это выглядит:
1131x279 1134x315

Эта идея была адаптирована под данный стиль. За основу взят код от ув. /grin3671.
Автор: /grin3671 Адаптатор: /Cosmo+☭


>4< Аниме_Манга + персонажи
Оживляем постеры для аниме и манги
1920x1080
[anime=20 наруто][/anime]  /*Аниме*/
[manga=12 блич][/manga]   /*Манга*/
[character=14080 накиами][/character]   /*Персонаж*/
ID-идентификатор > часть ссылки 1902x803 692x255 1231x980
регулировка постера по высоте 
 .Ssylki-anime-v-1 strong {
    padding-bottom: 60%;
}
подогнать текст по высоте
 .Ssylki-anime-v-1 .Text-dno-ramka {
  padding: 59% 1rem 0;
}
Оценка и Прогресс легко убираются
952x175 >667x509
929x158 >772x534

Выдвижные имена
```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< Аниме_Манга + персонажи
Оживляем стандартные постеры для аниме и манги
1920x996
аналогичная замена
[anime=20 наруто][/anime]  /*Аниме*/
[manga=12 блич][/manga]   /*Манга*/
[character=14080 накиами][/character]   /*Персонаж*/
ID-идентификатор > часть ссылки 1902x803 692x255 1231x980

регулировка постера по высоте 
 .Ssylki-anime-v-1-standard strong {
    padding-bottom: 130%;
}

подогнать текст по высоте
 .Ssylki-anime-v-1-standard .Text-dno-ramka-standard { 
  padding: 129% 1rem 0;
}
Оценка и Прогресс легко убираются
952x175 >667x509
929x158 >772x534

Выдвижные имена
```css
@import url("https://raw.githubusercontent.com/GM-apostal/GM-apostal.github.io/master/Names_off/Ssylki-anime-v-1-standard.css");
```

почти привычный постер > 1019x297
1161x246
1020x224

.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;
}
добавив эти команды к основным > 1628x304
.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< Аниме_Манга + персонажи
обычный вариант
1920x966
аналогичная замена
[anime=20 наруто][/anime]  /*Аниме*/
[manga=12 блич][/manga]   /*Манга*/
[character=14080 накиами][/character]   /*Персонаж*/
ID-идентификатор > часть ссылки 1902x803 692x255 1231x980
регулировка постера по высоте 
 .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< Постеры виде пчелиных сот
:)
1920x1080
аналогичная замена
[character=14080][/character]   /*Персонаж*/
ID-идентификатор > часть ссылки 1902x803 692x255 1231x980
Так выглядит готовый вариант
[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 > Постеров в ряд!!! Пример > Результат >


>8< Кнопки
*

1920x1080
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;
  }
}
с права
@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;
   }
}
140x394
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

Дополнение работает на базе стандартных табов. Рассмотрим настройку на примере одного слайдера с тремя секциями.
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Добавляем такой код:
[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+☭.
Автор: /grin3671 Адаптатор: /Cosmo+☭






>10< Мега слайдер
About addon



Инструкция

Является частью библиотеки q10_cosmo_library в сборщике. Проверьте наличие этого дополнения в настройках внешнего вида сайта.
Имя файла - q10-06_mega-slider_0.css

Инструкция к данному дополнению идентична с инструкцией к дополнению ">7< Слайдеры".
Отличием является только различие названия основных классов, которые начинаются с id-0
Пример
спойлер



Первоначально идея слайдера была высмотрена у ув. /grin3671, поэтому он является и автором. Так что все благодарности отсыпайте ему.
Адаптировано для публичного использования /Cosmo+☭.
Автор: /grin3671 Адаптатор: /Cosmo+☭

>11< Табы
Адаптированные табы
Поддерживают вложенность.
Кнопка 1
Кнопка 2
Кнопка 3
Контент 1
Контент 2
Контент 3
Инструкция
1315x168
[div=use-tabs  --ripple --centered --vertical --On] убрав [ --On ] включится стандартный Таб - grin3671. 
Остальную информацию смотрите у grin3671.
1326x292
[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]
С иконками
1316x296
1324x208
[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]
1330x742 1493x1062 1363x1064

Адаптированные табы с CSS-club под данный стиль
Весь необходимый css-код уже встроен в базовую версию стиля, поэтому вам остается лишь добавить правильный BBcode в свое "Обо мне".
Зайдите в режим редактирования: Настройки > Профиль > О себе .
Вставьте как пример код выше.
Автор: /grin3671 Адаптатор: /Cosmo+☭



>12< Панель быстрого доступа
Фиксированная панель с ссылками в виде картинок в вашем профиле

Нажмите чтобы показать панель
Смотрим в верхнем левом направлении.


инструкция

691x4411199x709

[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: "Название ссылки";
}

Автор: /Cosmo+☭
Комментарии
Скрыть 61 комментарий
Показать 61 комментарий
Загрузить ещё 20 из 61 комментариев
olcru
olcru#
@K͙i͙k͙a͙z͙a͙r͙u͙, я сделала
могу и тебе попробовать помочь:hot:
BrBear
BrBear#
@Cosmo ☭ как создать больше одной кнопки?363x442
@Cosmo ☭, @Cosmo ☭
Cosmo ☭
Cosmo ☭#
@BrBear, Нужно код делать на 2 кнопку + расположение указывать.
Cosmo ☭
Cosmo ☭#
@BrBear, + 3 Кнопки. что-то хотел но забыл :) 340x211
BB+CSS ++
@BrBear
BrBear
BrBear#
@Cosmo ☭, немного неправильно сформулировал вопрос. там идут 4 вертикальные кнопки. попробовал сделать больше, неполучилось.
спойлер
@media screen and (min-width: 1200px) {
  .button-left-1:hover,
  .button-left-2:hover,
  .button-left-3:hover,
  .button-left-4:hover,
  .button-left-5: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,
  .button-left-5 {
    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,
  .button-left-5 > 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-repeat: no-repeat;
    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-5 {
    top: 20,5rem;
    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://resdr.rmr.rocks/static/logo_m-b8a219c7248a3e51575b489c4c063a2f.png");
    background-size: cover;
  }
  .button-left-3 > strong {
    background-image: url("https://yt3.ggpht.com/ytc/AKedOLTvW3LcVhRD4IRIcW5a1K4yywEt026s1QiBGF9f=s800-c-k-c0x00ffffff-no-rj");
    background-size: cover;
  }
  .button-left-4 > strong {
    background-image: url("https://yt3.ggpht.com/a/AATXAJz21WjyadkNOzzPE7B7JGeMPFelq1IqhkN9Yw=s900-c-k-c0xffffffff-no-rj-mo");
    background-size: cover;
  }
   .button-left-5 > strong {
    background-image: url("https://play-lh.googleusercontent.com/zVwzSU7ozKU0x78V7zYWDw2XFjgGsBBJA_qIJQXAFnS1R3VemFbpdaV9Bm3zOTTHvXw");
    background-size: cover;
  }
  .button-left-1 .b-link,
  .button-left-2 .b-link,
  .button-left-3 .b-link,
  .button-left-4 .b-link,
  .button-left-5 .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;
  }
   .button-left-5 .b-link {
    padding-right: 3rem;
  }
}
@media screen and (max-width: 1200px) {
  .button-left-1,
  .button-left-2,
  .button-left-3,
  .button-left-4,
  .button-left-5 {
    display: none;
  }
}
@Cosmo ☭
Cosmo ☭
Cosmo ☭#
@BrBear, Нужно добавить строчку bb-cod
[div=button-left-5][b][/b][url=https://www.anilibria.tv/pages/catalog.php]Anilibria[/url][/div]
820x147
154x1439
@BrBear
BrBear
BrBear#
@Cosmo ☭, строчка добавлена, а кнопка не появилась539x11665x600
@Cosmo ☭
Cosmo ☭
Cosmo ☭#
@BrBear, Готовый код на 6 кнопок >
219x679
bb-cod
[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-left-5][b][/b][url=https://www.anilibria.tv/pages/catalog.php]5[/url][/div]
[div=button-left-6][b][/b][url=https://www.anilibria.tv/pages/catalog.php]6[/url][/div]
css
@media screen and (min-width: 1200px) {
  .button-left-1:hover,
  .button-left-2:hover,
  .button-left-3:hover,
  .button-left-4:hover,
  .button-left-5:hover,
  .button-left-6: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,
  .button-left-5,
  .button-left-6 {
    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,
  .button-left-5 > strong,
  .button-left-6 > 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-repeat: no-repeat;
    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-5 {
    top: 20.5rem;
    left: -140px;
    width: 200px;
  }
  .button-left-6 {
    top: 24.3rem;
    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-5 > strong {
    background-image: url("https://");
    background-size: cover;
  }
  .button-left-6 > strong {
    background-image: url("https://");
    background-size: cover;
  }
  .button-left-1 .b-link,
  .button-left-2 .b-link,
  .button-left-3 .b-link,
  .button-left-4 .b-link,
  .button-left-5 .b-link,
  .button-left-6 .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;
  }
  .button-left-5 .b-link {
    padding-right: 3rem;
  }
  .button-left-6 .b-link {
    padding-right: 3rem;
  }
}
@media screen and (max-width: 1200px) { /*Копки Off*/
  .button-left-1,
  .button-left-2,
  .button-left-3,
  .button-left-4,
  .button-left-5,
  .button-left-6 {
    display: none;
  }
}
@BrBear
BrBear
BrBear#
@Cosmo ☭, спасибо.
Lion_Soul
Lion_Soul#
Скажите если хочу 5 слайдеров в линию, 5 раз вставлять строчки кода?
Хотел бы спросить, можно ли подписывать каждый слайд на слайдере?
Подскажите сколько можно сделать слайдов, на 1 слайдере?
Нaгибaтop
Нaгибaтop#
Самый непонятный гайд что я вообще когда либо видел, тут вообще ₽#&#₽₽ не понятно 🗿
@Alexsandr
Alexsandr
Alexsandr#
@Нaгибaтop, код + скрин результата. Хз куда проще:cold2:
garbuh
garbuh#
ну гайд реально несовсем понятен, где изменяемые части то у кода? я вот хочу например сделать сетку из ссылок в виде картинок, какой из представленых кодов мне брать и что там править?
lollokek
lollokek#
вот насчет этой темы обо мне как вставить аниме или мангу
@lollokek
lollokek
lollokek#
@lollokek, ну чтобы была и картинка крч как в каталоге наводишь курсор на тайтл
@Clear Foe
Clear Foe
Clear Foe#
@lollokek, bbcode: /bb_codes
animeshnik_ALT
animeshnik_ALT#
Попробовал все шаблоны. Оставлю здесь коды для тех, кто хочет поменять что-то под себя. Возможно кому-то понадобится.
часть 1
>1.1<
Изменить оценку
.Anime-v-0-1 .Evaluation-v-v0 {
  background: black; /*Фон*/
  border-color: #463529; /*Закладка*/
  color: white; /*Цвет текста*/
  top: 0.9rem; /*Расположение по вертикали*/
}
Кружочек прогресса
.Anime-v-0-1 .progress-d-0-1 {
  background: black; /*Фон*/
  color: white; /*Цвет текста*/
  border: solid 2px #373737; /*Обводка*/
  transform: none; /*Убираем наклон*/
  border-radius: 4px; /*Округление*/
  width: 50px; /*Ширина*/
  height: 32px; /*Высота*/
  left: 4.5rem; /*Расположение по горизонтали*/
  bottom: 9.5rem; /*Расположение по вертикали*/
}
Имя, название
.Anime-v-0-1 .Text-g1 {
  background: rgba(var(--block-color), 0.15);
  color: #cce0d1;
}
>4<
Фикс для выдвижных имен
.Ssylki-anime-v-1 {
  margin-bottom: 3rem; /*Фикс для выдвижный имен*/
}
Фикс для WYSIWYG
[div=Ssylki-anime-v-1][b][anime=1 ковбой-бибоп][/b][/anime][div=Text-dno-ramka]ТЕКСТ[/div][div=Evaluation-v1]НАЗВАНИЕ[/div][div=Fon]ТЕКСТ2[/div][div=progress]10/10[/div]
[/div]
Красная полоска
.Ssylki-anime-v-1 .Evaluation-v1 {
  background: #15246e; /*Цвет фона*/
  border-color: #15246e;
  color: #ffffff; /*Цвет текста*/
  top: 0.9rem; /*Расположение по вертикали*/
  left: -0.5rem; /*Расположение по горизонтали*/
}
Кружочек
.Ssylki-anime-v-1 .progress {
  transform: none; /*Убираем наклон*/
  color: #fd9e10; /*Цвет*/
  border-radius: 4px; /*Округление*/
  border: solid 2px #373737; /*Граница*/
  background: #171616; /*Фон*/
  width: 44px; /*Ширина*/
  height: 32px; /*Высота*/
  right: 0.5rem; /*Расположение по горизонтали*/
  bottom: 0.3rem; /*Расположение по вертикали*/
}

добавить того, кого нет на шикимори
Выбираем аниме, которого не будет у нас в "обо мне". Пусть это будет аниме с ID 1.
[div=Ssylki-anime-v-1 Дополнительный-класс][b][anime=1 ковбой-бибоп][/b][/anime][div=Text-dno-ramka]ТЕКСТ[/div][div=Evaluation-v1]НАЗВАНИЕ[/div][div=Fon]ТЕКСТ2[/div][div=progress]10/10[/div]
[/div]
Далее отключаем подсказку у этого аниме.
/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-anime-v-1 {
  cursor: pointer;
}
И наконец ставим постер
.Ssylki-anime-v-1.Дополнительный-класс > strong > a::before {
  background: url(постер) no-repeat center / cover;
}
при наведении
Внутри постера
.Ssylki-anime-v-1 .Fon::after {
  filter: none; /*Убираем размытие*/
}
.Ssylki-anime-v-1 .Fon {
  align-items: end; /*Текст снизу*/
  color: #f58ebb; /*Цвет текста*/
}
Под постером
.Ssylki-anime-v-1 .Text-dno-ramka {
  background: rgba(var(--block-color), 0.15);
  color: #cce0d1;
}
Изменить фон:
Вначале в bb code блоку Ssylki-anime-v-1 добавляем любой класс. Вот так:
[div=Ssylki-anime-v-1 spider-man][/div]
Далее в css указываем этот класс в селекторе и ставим фон:
.Ssylki-anime-v-1.spider-man .Fon::after {
  background-image: url(https://media.tenor.com/aveNKb5dvy4AAAAd/spider-man-spider-man-no-way-home.gif);
}
Добавить градиент как в >6<
.Ssylki-anime-v-1 strong:before {
    content: "";
    background: linear-gradient(1145deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    background-size: 600%;
    z-index: -1;
    filter: blur(2.8px);
    animation: glowing 20s linear infinite;
    transition: opacity 0.25s ease-in-out;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
}
.Ssylki-anime-v-1:hover strong:before {
    opacity: 1;
}
Убрать подсказку
Но вместе с этим вы отключите возможность переходить по постеру на страницу тайтла.
.Ssylki-anime-v-1 a {
    pointer-events: none;
}
>5<
Фикс для выдвижных имен
.Ssylki-anime-v-1-standard {
    margin-bottom: 3rem; /*Фикс для выдвижный имен*/
}
Фикс для WYSIWYG
[div=Ssylki-anime-v-1-standard lumin][b][character=194503 люмин][/b][/character][div=Text-dno-ramka-standard]Главный герой[/div][div=Evaluation-v1-standard]Люмин[/div][div=Fon-standard]ж.р.[/div][div=progress-standard]★★★★[/div]
[/div]
Красная полоска
.Ssylki-anime-v-1-standard .Evaluation-v1-standard {
    top: 0.9rem;
    left: -0.5rem;
    background: #6e1515;
    border-color: #6e1515;
    color: #d9c9e0;
}
Кружочек
.Ssylki-anime-v-1-standard .progress-standard {
    transform: none; /*Поворот*/
    color: gold;
    border-radius: 4px;
    width: 68px;
    height: 32px;
}
Размер постера
@media screen and (min-width: 680px) {
  .Ssylki-anime-v-1-standard {
      width: calc(100% / 5 - 1 * 1%) !important; /*При ширине экрана от 680px будет 5 постеров в строке*/
  }
}

добавить того, кого нет на шикимори
Выбираем аниме, которого не будет у нас в "обо мне". Пусть это будет аниме с ID 1.
[div=Ssylki-anime-v-1-standard Дополнительный-класс][b][anime=1 ковбой-бибоп][/b][/anime][div=Text-dno-ramka-standard]Сестра Фавония[/div][div=Evaluation-v1-standard]Розария[/div][div=Fon-standard]Выбрал Диону вместо неё[/div][div=progress-standard]★★★★[/div]
Далее отключаем подсказку у этого аниме.
/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-anime-v-1-standard {
  cursor: pointer;
}
И наконец ставим постер
.Ssylki-anime-v-1-standard.Дополнительный-класс .Fon-standard::after {
  background-image: url(постер);
}
При наведении
.Ssylki-anime-v-1-standard .Fon-standard::after {
  filter: none; /*Убираем размытие*/
}
.Ssylki-anime-v-1-standard .Fon-standard {
  align-items: end; /*Текст снизу*/
  color: #f58ebb; /*Цвет*/
}
Под постером
.Ssylki-anime-v-1-standard .Text-dno-ramka-standard {
    background: rgba(var(--block-color), 0.15);
    color: #cce0d1;
}
Меняем постер при наведении
Вначале блоку Ssylki-anime-v-1-standard добавляем новый класс:
[div=Ssylki-anime-v-1-standard lumin][b][character=194503 люмин][/b][/character][div=Text-dno-ramka-standard]Главный герой[/div][div=Evaluation-v1-standard]Люмин[/div][div=Fon-standard]ж.р.[/div][div=progress-standard]★★★★[/div]
[/div]
Потом в css ставим новый фон
.Ssylki-anime-v-1-standard.lumin .Fon-standard::after {
  background-image: url(https://media.tenor.com/VEVbaVSKhsgAAAAd/lvl1-genshin-impact.gif);
}
@animeshnik_ALT, @animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@animeshnik_ALT,
часть 2
>6<
Фикс для WYSIWYG
[div=Ssylki-anime Дополнительный-класс][b][anime=ID][/b][/anime][div=Evaluation]Текст на красном фоне[/div][div=Text-2]Текст на постере[/div][/div]
Разные градиенты
.Ssylki-anime strong::before {
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  background-size: 600%;
}
.Ssylki-anime strong::before {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
  background-size: 600%;
}
/*Золотой*/
.Ssylki-anime strong::before {
  background: radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #FDB931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  background-size: 600%;
}
/*Синий*/
.Ssylki-anime strong::before {
  background: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
  background-size: 600%;
}
Текст на постере
.Ssylki-anime .Text-2 {
  color: #dda2a2;
}
Красная линия
.Ssylki-anime .Evaluation
    top: 0.9rem;
    left: 0;
    background: #6e1515;
    border-color: #6e1515;
    color: #d9c9e0;
}

добавить того, кого нет на шикимори
Выбираем аниме, которого не будет у нас в "обо мне". Пусть это будет аниме с ID 1.
[div=Ssylki-anime Дополнительный-класс][b][anime=1][/b][/anime][div=Evaluation]text[/div][div=Text-2]TEXT2[/div]
[/div]
Далее отключаем подсказку у этого аниме.
/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-anime {
  cursor: pointer;
}
И наконец ставим постер
.Ssylki-anime.Дополнительный-класс > strong > a::before {
  background-image: url(постер);
}
2 постера в одном
скрин
В bb code добавляем ещё 1 тайтл:
[div=Ssylki-anime krest-rokunin][b][manga=125076 крест-рокунин][/b][/manga][b][manga=13 ван-пис][/b][/manga][div=Evaluation][/div][div=Evaluation][/div][div=Text-2][/div][/div]
Смещаем вторую красную полоску
/* Двойной постер красная полоска */
.Ssylki-anime .Evaluation:nth-child(4) {
    left: 49%;
}
хочу менять постер при наведении
Тогда обязательно добавляем Дополнительный-класс.
Вот так:
[div=Ssylki-anime Дополнительный-класс][b][anime=ID][/b][/anime][div=Evaluation]Текст на красном фоне[/div][div=Text-2]Текст на постере[/div][/div]
Далее менять постеры мы, конечно же, будем в CSS.
Оставляем текст при наведении на постер:
.Ssylki-anime:hover > .Text-2, .Ssylki-anime:hover .Evaluation {
  opacity: 1 !important;
}
Пишем текст в CSS:
.Ssylki-anime.ваш-класс:hover .Evaluation, .Ssylki-anime.ваш-класс:hover > .Text-2 {
  font-size: 0;
}
.Ssylki-anime.ваш-класс:hover .Evaluation:after {
  font-size: 14px;
  content: "Текст на красном фоне при наведении";
}
.Ssylki-anime.ваш-класс:hover > .Text-2:after {
  font-size: 15px;
  content: "Текст на постере при наведении";
}
Постер через ваш класс
.Ssylki-anime.ваш-класс > strong > a::before {
  background-image: url("https://avatars.mds.yandex.net/i?id=78925d9a8fcb39475dc5ac5a95f97c67_l-4034571-images-thumbs&n=13"); /* Картинка */
}
.Ssylki-anime.ваш-класс:hover > strong > a::before {
  background-image: url("https://i.pinimg.com/564x/18/31/07/18310767f33a8733abedd1498c194f7d.jpg"); /* Картинка при наведении */
}
как убрать всплывающую подсказку
Но вместе с этим вы отключите возможность переходить по постеру на страницу тайтла.
.Ssylki-anime a.b-link.bubbled-processed {
  pointer-events: none;
}
/* Курсор меняется при наведении */
.Ssylki-anime {
  cursor: pointer;
}
>7<
Фикс для WYSIWUG
[div=Ssylki-Characters][b][anime=20 наруто][/b][/anime][div=Text-1]1 весна2021[/div][/div]
Размер
.Ssylki-Characters {
  width: calc(100% / 5); /*где 5 - кол-во в строке*/
}
Фон
.Ssylki-Characters {
  background-image: url("https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13");
}
Фон при наведении
div.Ssylki-Characters:hover {
    background-image: url(https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13);
}
Фон у текста при наведении
.Ssylki-Characters .Text-1:after {
  height: calc(100% - 2%); /* Изображение немного выходило за рамки */
  width: calc(100% - 2%);
  content: url("https://avatars.mds.yandex.net/i?id=791db14914464d93798aa3154e5c8d7dff93a726-8272366-images-thumbs&n=13");
  filter: blur(4px); /* Размытие */
}
Отключить поворот
div.Ssylki-Characters {
  transform: none;
  transition: none;
}
Видимость на телефонах
@media screen and (max-width: 767px) {
  .magnet {
    display: unset;
  }
  /*Размер*/
  .Ssylki-Characters {
    width: calc(100% / 3);
  }
  .Ssylki-Characters .b-link {
    pointer-events: none; /*Кликабельность*/
  }
}
@media screen and (max-width: 1023px) {
  .Ssylki-Characters .Text-1 {
    visibility: unset;
  }
}

добавить того, кого нет на шикимори
Выбираем аниме, которого не будет у нас в "обо мне". Пусть это будет аниме с ID 1.
[div=Ssylki-Characters Дополнительный-класс][b][anime=1 ковбой-бибоп][/b][/anime][div=Text-1]300 Скоро[/div][/div]
Далее отключаем подсказку у этого аниме.
/*Отключение подсказки у Ковбоя Бибоп*/
#profiles_show .about.block a[href*="animes/1-"] {
  pointer-events: none;
}
.Ssylki-Characters {
  cursor: pointer;
}
И наконец ставим постер
.Ssylki-Characters.Дополнительный-класс a::before {
  background: url(постер) 50% / cover;
}
@IR
animeshnik_ALT
animeshnik_ALT#
@animeshnik_ALT,
Часть 3
>8<
Фикс для WYSIWUG
[div=button-left-1][url=ссылка]Name[/url][b][/b][/div]
Готовый код на 6 кнопок
>9<
Размер
@media screen and (min-width: 900px) {
  .id-01 {
    width: calc(100% / 5 - 1 * 1%); /*где 5 - кол-во в строке*/
  }
}
>10<
.id-0 img.b-poster, .id-0 .b-image.b-poster img {
  width: unset; /*Картинка влезает по высоте*/
}
.id-0_control-block::after {
  display: none; /*удаляю череп*/
}
.id-0__button.active {
    background: rgba(var(--bright-color), 0.8); /*Цвет активного кружочка*/
}
>11<
[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 и т.д. для того, чтобы вложенный таб был автоматически открыт при переходе. В общем и целом, экспериментируйте и сами всё рано или поздно поймете.
как изменять табы
/* border у обычного таба */
.use-tabs.--On > [data-dynamic], .custom-panel > [data-dynamic] {
    border: 1px solid rgba(var(--light-color), 1);
}
/* border у активного таба */
.use-tabs > [data-dynamic].active, .custom-panel > [data-dynamic].active {
  border-color: #6c6c6c;
  box-shadow: 0 0 10px 1px #323232;
}
/* border у обычного таба, на который навели мышкой */
.use-tabs > [data-dynamic]:hover, .custom-panel > [data-dynamic]:hover {
    background: hsla(var(--c-tab) var(--l-background) / 0%);
    border-color: #606060;
    box-shadow: 0 0 5px 1px #123;
}
/* border у активного таба, на который навели мышкой */
.use-tabs > [data-dynamic].active:hover, .custom-panel > [data-dynamic].active:hover {
    border-color: rgba(var(--light-color), 1);
}
/* Нективный вложенный таб */
.custom-panel > [data-dynamic]:not(.active) {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(var(--light-color), 1);
    border-radius: 0px;
    background: transparent;
}
/* Нективный вложенный таб, наведенный */
.custom-panel > [data-dynamic]:not(.active):hover {
    background: rgba(var(--block-color), 0.7);
}
Код на 5 табов + 4 вложенных + 2 вертикальных:
[div=use-tabs  --ripple --centered --On]
[div=to-process active 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=to-process data-dynamic=switcher data-switcher=tab1]Название 5[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
[div=use-tabs  --ripple --centered --vertical --Fat]
[div=to-process active data-dynamic=switcher data-switcher=tab4]Вертикальный таб 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab4]Вертикальный таб 2[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри первого вертикального таба.
[/div]
[div=CUSTOM_PANEL]
Контент внутри второго вертикального таба.
[/div]
[/div][/div][/div]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab2]Вложенный таб 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab2]Вложенный таб 2[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри первого вложенного таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри второго вложенного таба
[/div]
[/div]
[/div]
[/div]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab3]Вложенный таб 3[/div]
[div=to-process data-dynamic=switcher data-switcher=tab3]Вложенный таб 4[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри третьего вложенного таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри четвертого вложенного таба
[/div]
[/div]
[/div]
[/div]
[div=CUSTOM_PANEL]
Контент внутри 4 таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри 5 таба
[/div]
[/div]
[/div]
>12<
Изменить значок
.qa-panel:after {
  content: "♥";
}
.qa-panel {
  color: red; /*Цвет*/
}
Значок справа
.qa-panel {
  left: unset;
  right: 3%;
  top: 9.375rem;
}
.qa-link:before {
    left: unset;
    right: 0;
}
.qa-link:hover:before {
    left: unset;
    right: 4.25rem;
}
Текст
.qa-link:before {
  color: white;
}
IR
IR#
@animeshnik_ALT, благодарен тебе за прошлый раз хотел спросить , можно ли поменять цвет в коде а то я ищу и там 3-4 поцизии с цветом какой из них?
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode