Комментарий от animeshnik

Комментарий #9807353
animeshnik_ALT

в топике Как создать космически-эпичное "Обо мне" и не только...19 июля 2023

Попробовал все шаблоны. Оставлю здесь коды для тех, кто хочет поменять что-то под себя. Возможно кому-то понадобится.

часть 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_ALT19 июля 2023#

@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 постера в одном

скрин

281x168

В 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_ALT19 июля 2023#

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

Твой комментарий

Комментарий #9807353 animeshnik_ALT

Комментарий #9807353
animeshnik_ALT