Краткий гайд о том как создать "коллекцию" у себя в профиле

еноеноено56
27
Категорически Вас приветствую!
Данный гайд создан дабы сократить поголовье малолетних #### на форуме и провести курс молодого бойца по созданию визуального убожества шедевра в своем профиле
В общем, на нашем любимом Шики существуют такие замечательные функции форума, как BB и CSS коды, которые позволяют творить чудеса и прочую нерегламентированную Испанской инквизицией магию
Перейдем сразу к делу
1. Хочу создать аналог коллекции в своем профиле
В данном случае мы будем работать со своим профилем, с областью "Обо мне"
Находиться они под ачивками, если что
Редактировать ее можно двумя способами -
или

И вот мы добрались до искомой области - теперь можно марать свой профиль
Чтобы получить нечто аналогичное коллекции можно использовать следующий код
[characters ids=*сюда прописывать код персонажа* columns=*количество персов в ряду*] - для персов
[animes ids=*сюда прописывать код аниме* columns=*количество аниме в ряду*] - для аниме
[mangas ids=*сюда прописывать код манги* columns=*количество манги в ряду*] - для манги и ранобэ
Еще раз: "characters" - соответствует персонажам, "animes" - аниме, "mangas" - манге и ранобэ
Код объекта можно посмотреть через ссылку на него
Количество в ряду выбирается от 5 до 9 (больше или меньше сайт не поддерживает)
Пример исполнения + сравнение ширины (разные значения параметра "columns" + код примера
[characters ids=37832,38005,38395,40006,38194 columns=5]
[animes ids=4081,5300,10379,11665,32983,34591 columns=6]
[mangas ids=1517,1630,872,3006,3008,3009,1706 columns=7]
[characters ids=13835,16211,13836,14020,14021,21416,17888,23334 columns=8]
[animes ids=227,7785,486,387,2251,6746,1535,19,467 columns=9]
Стоит учесть следующие:
1) Таким образом не получиться смешивать объекты из разных категорий (персы отдельно, аниме отдельно, манга и ранобэ отдельно)
2) При повторении одного и того же номер, он не отображается второй раз
пример
[characters ids=110355,110355 columns=5]
3. Для того, чтобы коллекция продолжалась с новой строки не обязательно прописывать рамку заново, можно просто продолжать писать в уже существующей
4. Приписка "wall" перед "columns" уберет просветы между объектами
p.s. с данной припиской не работает columns=5, поэтому необходимо выбирать значение от 6 до 9
пример
[characters ids=19492,11772,20148,23650,20147,23651,23652 wall columns=7]
Джонни Джостар
Джайро Цеппели
Диего Брандо
Хот Пэнтс
Фанни Валентайн
Люси Стил
Стивен Стил
2. Хочу убрать эту коллекцию под красивый спойлер
Здесь есть два пути решения - простой и свой
Для первого простого варианта необходимо воспользоваться CSS кодом
Для того, чтобы попасть в окно настройки SCP CSS необходимо повторить сложнейшие операции с

В поле приписываем следующие:
.p-profiles .about.block .b-spoiler label {
  border: none;
  display: inline-block !important;
  font-weight: bold; /* толщина шрифта, можно убрать, если не нужно */
  color: #000; /* цвет текста спойлера */
  background: #e8ebef; /* цвет фона спойлера */
  height: 30px; 
  width: 100%;
  font-size: 12pt; /* размер шрифта текста на спойлере */
  padding-top: 3px; 
  text-align: center;
  margin-bottom: 5px;
}

.p-profiles .about.block .b-spoiler .after:before, .about.block .b-spoiler .before:before {
  content: '';
}

.p-profiles .about.block .b-spoiler .before {
  width: 100%; 
  height: 50px;
  display: inline-block !important;
  margin-top: -50px;
}



Второй свой вариант реализуется через изменение обычного сполейра в постер
Делается это крайне банально, в наружную часть спойлера вместо текста прописывается картинка
Выглядит это следующим образом:
[spoiler=[poster=*номер картинки или ссылка на картинку*]][/spoiler]
[spoiler=[poster=810027]][characters ids=20148 columns=5][/spoiler]

Для того, чтобы вставить ссылку на картинку - достаточно прописать следующий код:
[poster]*ссылка*[/poster]
Для того, чтобы вставить номер картинки ее надо сначала нужно загрузить на сайт, для этого можно просто кинуть картинку себе в профиль в ленту и после загрузки она превратиться в

Берем эту цифры и вставляем в уже готовый код и
см. выше
!
п.с. но учтите, картинки жирнее 4 мб Шики не принимает!
п.п.с. при желании можно создавать целые туннели из спойлеров:
3. Хочу поменять обложку человечка, мультика или комикса
Данный вопрос также решается через CSS код
Сначала нужно прописать вот такой вот код:
/* СМЕНА ОБЛОЖЕК */

/* Общие настройки обложек */
.b-catalog_entry .cover .image-cutter,
.b-catalog_entry-tooltip > a,
.entry-tooltip_container > .image-link {
  background-size: cover;
  background-position: top center;
}

/* Изменение контейнера во всплывающей подсказке */
.b-catalog_entry-tooltip > a,
.entry-tooltip_container > .image-link {
  float: left;
  width: 160px;
  height: 249.34px;
}
А затем вбивать для каждого отдельного объекта следующий код:
/* Для персонажей и людей */
[class *= 'b-catalog_entry'] > a[href *= 'characters/503-'] img {
  opacity: 0;
}

/* Для аниме, манги и ранобэ */
.b-catalog_entry > a[href *= 'mangas/3526-'] img,
.entry-tooltip_container > .image-link[href *= 'mangas/3526-'] img {
  opacity: 0;
}

/* Всё вместе – группа селекторов */
[class *= 'b-catalog_entry'] > a[href *= 'characters/503-'] img,
.b-catalog_entry > a[href *= 'mangas/3526-'] img,
.entry-tooltip_container > .image-link[href *= 'mangas/3526-'] img {
  opacity: 0;
}
/* альтернативные обложки */
.b-catalog_entry .cover .image-cutter,
.b-catalog_entry-tooltip > a,
.entry-tooltip_container > .image-link {
  background-size: cover;
  background-position: top center;
}
.b-catalog_entry-tooltip > a,
.entry-tooltip_container > .image-link {
  float: left;
  width: 160px;
  height: 249.34px;
}

/* Саяка Мики */
[class *= 'b-catalog_entry'] > a[href *= 'characters/38395-'] img {
  visibility: hidden;
}
.b-catalog_entry a[href *= 'characters/38395-'] .image-cutter,
.b-catalog_entry-tooltip > a[href *= 'characters/38395-'] {
  background-image: url(https://nyaa.shikimori.one/system/user_images/original/465733/745250.jpg);
}

п.с. как альтернатива можно использовать простейший BB код, с заменой текста в ссылке на персонажа на картинку, как это было с постером
Выглядеть это будет следующим образом:
[character=*номер перса*][poster=*номер картинки или ссылка*][/character]
И аналогично для аниме, манги и ранобэ
пример

[character=40006][poster=713288][/character][character=38395][poster=713289][/character][character=37832][poster=713290][/character][character=38194][poster=713291][/character][character=38005][poster=713292][/character]
п.п.с. важное замечание
И для альтернативной обложки и для постеров вам придется самостоятельно подгонять размер картинки
Если это требует отдельного рассмотрения, обязательно оставьте соответствующий комментарий - я дополню
4. Если нужны комментарии к аниме как в коллекциях
Благодарность за пункт: @SergejVolkov
Здесь технология немного сложнее и она, по сути, содержит в себе 1 и 3 пункт, так как результат сам по себе является списком и требует самостоятельного задания обложек для каждого аниме (ну или персонажа, манги или ранобэ)
Для создания этого чуда дизайнерской мысли снова открывает окно настройки "обо мне" и вписываем следующий код:
/*Здесь выбираем цифрой сколько аниме в одной строке*/
[div=cc-5 m0]

/*первая анимешка*/
[div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=227][div=image-cutter]
[poster]https://kawai.shikimori.org/system/animes/preview/227.jpg[/poster][/div][/anime][div=text]
Всякий разный текст о том как я люблю это аниме!
[/div][/div][/div][/div]

/*вторая анимешка*/
[div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=2001][div=image-cutter]
[poster]https://kawai.shikimori.org/system/animes/preview/2001.jpg[/poster][/div][/anime][div=text]
GURREN-RAGANN, SPIN ON! Ore wo dare da to omotte yagaru!?
[/div][/div][/div][/div]

/*и так далее...*/

[br][/div]
Не забываем, что ID аниме нужно указывать дважды - в ссылке на превью картинку и обращению к ссылке на аниме (ну или персонажа, манги или ранобэ)
пример
[div=cc-5 m0]
[div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=2001][div=image-cutter]
[poster]https://kawai.shikimori.one/system/animes/original/2001.jpg[/poster][/div][/anime][div=text]
GURREN-RAGANN, SPIN ON! Ore wo dare da to omotte yagaru!?
[/div][/div][/div][/div]
[br][/div]
GURREN-RAGANN, SPIN ON! Ore wo dare da to omotte yagaru!?

В общем ничего сложного, главное желание
Все материалы были взяты из справки по BB кодам: /bb_codes
И клуба CSS: /clubs/811-css-club-nastroyka-vneshnego-vida-sayta
Комментарии
Скрыть 7 комментариев
Показать 7 комментариев
Загрузить ещё 7 комментариев
GrungeFun
GrungeFun#
Спасибо)
Абдул-Кадыр
Абдул-Кадыр#
Почему-то в моём профиле нету области "Обо мне". ЧТО ДЕЛАТЬ
1427x757
Kitsune74
Kitsune74#
@Кадыр, Настройки – Профиль, там тоже ничего нет?
Абдул-Кадыр
Абдул-Кадыр#
@Kitsune74, О в настройках есть!
Якутеринбург
Якутеринбург#
ты помог одному дебилу:strange:
Nando mo
Nando mo#
/* Изменение контейнера во всплывающей подсказке */
спойлер
b-catalog_entry-tooltip > a,
.entry-tooltip_container > .image-link {
float: left;
width: 160px;
height: 249.34px;
}
Хоть и добавил эту часть кода, во всплывающих подсказках новый постер просто не отображается
. При этом везде в других местах отображается нормально
. В чём может быть проблема?
Romantic
Romantic#
@ттььпампам, надеюсь многим
еноеноено56
еноеноено56#
@Nando mo, ух, надо в CSS спросить
это 3 пункт, да? я подумаю на досуге
Nori-chi★
Nori-chi★#
ахаха орр
Дочь Андромеды
@еноеноено56, пункт 4 сломался к сожалению. Проблема в размере картинки? @SergejVolkov
еноеноено56
еноеноено56#
@Дочь Андромеды, о, это лучше у Сергея спросить, он же этот пункт мне рассказал
Дочь Андромеды
@Дочь Андромеды, помимо сломанного постера смущает
[div=c-column b-catalog_entry m0 completed] обязательно прописывать "completed"? Нельзя ли оставить всё индивидуально, то есть кто посмотрел, у того галочка, кто бросил, крестик. Без навязывания то есть
Дочь Андромеды
Дочь Андромеды#
На всякий случай позову Сергея в тред ещё раз, если он не заметил @SergejVolkov
SergejVolkov
SergejVolkov#
@Дочь Андромеды, опа, сори, действительно не заметил :(
Проблема наблюдается только при наличии кода выравнивания обложек от @ grin3671 , который встроен в тему shiki-exo.

Решение - отключить эту функциональность, ибо подружить ее и пункт 4 не получается.
@media screen {
    /* Отключить единое регулирование размера обложек */
    .b-catalog_entry .cover .image-cutter::before {
        display: none;
    }

    /* Отключить позиционирование изображения */
    .b-catalog_entry .cover .image-decor .image-cutter > img {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        min-height: none;
    }
}
нужно добавить в настройки внешнего вида сайта после всего, что связано с установкой и настройкой темы.
квидка
квидка#
гайд очень мне помог, большое вам спасибо:)
Акуляр
Акуляр#
Я что-то не так делаю? Помогите!
Pixl
Pixl#
@Акуляр, убери букву в одном из айди
Акуляр
Акуляр#
@Pixl, конечно же я убрал, не работает, всё точно так же
Pixl
Pixl#
@Акуляр, так ты его в код завернул
убери [code] [/codе]
Акуляр
Акуляр#
@Pixl, о, в натуре, спасибо. У меня не было этих блоков видно
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть