Данный гайд создан дабы сократить поголовье малолетних #### на форуме и провести курс молодого бойца по созданию визуального
В общем, на нашем любимом Шики существуют такие замечательные функции форума, как BB и CSS коды, которые позволяют творить чудеса и прочую нерегламентированную Испанской инквизицией магию
Перейдем сразу к делу
1. Хочу создать аналог коллекции в своем профиле
В данном случае мы будем работать со своим профилем, с областью "Обо мне"
Находиться они под ачивками, если что
Редактировать ее можно двумя способами - или И вот мы добрались до искомой области - теперь можно марать свой профиль
Чтобы получить нечто аналогичное коллекции можно использовать следующий код
[characters ids=*сюда прописывать код персонажа* columns=*количество персов в ряду*] - для персов
[animes ids=*сюда прописывать код аниме* columns=*количество аниме в ряду*] - для аниме
[mangas ids=*сюда прописывать код манги* columns=*количество манги в ряду*] - для манги и ранобэ
Еще раз: "characters" - соответствует персонажам, "animes" - аниме, "mangas" - манге и ранобэКод объекта можно посмотреть через ссылку на него
Количество в ряду выбирается от 5 до 9 (больше или меньше сайт не поддерживает)Пример исполнения + сравнение ширины (разные значения параметра "columns" + код примераMadoka KanameМадока Канамэ Homura AkemiХомура Акэми Sayaka MikiСаяка Мики Kyouko SakuraКёко Сакура Mami TomoeМами Томоэ Oz VessaliusОз Безариус Gilbert NightrayГилберт Найтрей AliceАлиса Xerxes BreakЗарксис Брейк Sharon RainsworthШерон Рейнсворт Reim LunettesРейм (Лиам) Лунетт Vincent NightrayВинсент Найтрей Rufus BarmaРуфус Барма
Стоит учесть следующие:[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) При повторении одного и того же номер, он не отображается второй раз
пример
3. Для того, чтобы коллекция продолжалась с новой строки не обязательно прописывать рамку заново, можно просто продолжать писать в уже существующей[characters ids=110355,110355 columns=5]
пример
4. Приписка "wall" перед "columns" уберет просветы между объектами[characters ids=19492,11772,20148,23650,20147,23651,23652 columns=5]
p.s. с данной припиской не работает columns=5, поэтому необходимо выбирать значение от 6 до 9
2. Хочу убрать эту коллекцию под красивый спойлер
Здесь есть два пути решения - простой и свой
Для первого простого варианта необходимо воспользоваться 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]
Для того, чтобы вставить ссылку на картинку - достаточно прописать следующий код:
[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]
И аналогично для аниме, манги и ранобэ
пример
п.п.с. важное замечаниеИ для альтернативной обложки и для постеров вам придется самостоятельно подгонять размер картинки
Если это требует отдельного рассмотрения, обязательно оставьте соответствующий комментарий - я дополню
4. Если нужны комментарии к аниме как в коллекциях
Благодарность за пункт:
Здесь технология немного сложнее и она, по сути, содержит в себе 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]
Все материалы были взяты из справки по BB кодам: /bb_codes
И клуба CSS: /clubs/811-css-club-nastroyka-vneshnego-vida-sayta
1427x757
@Kitsune74@Кадыр, Настройки – Профиль, там тоже ничего нет?@Абдул-Кадыр@Kitsune74, О в настройках есть!@Romantic.entry-tooltip_container > .image-link {
float: left;
width: 160px;
height: 249.34px;
}
@еноеноено56@ттььпампам, надеюсь многим@Nando mo, ух, надо в CSS спроситьэто 3 пункт, да? я подумаю на досуге
@Дочь Андромеды@еноеноено56, пункт 4 сломался к сожалению. Проблема в размере картинки?@SergejVolkov@еноеноено56,@Дочь Андромеды@Дочь Андромеды, о, это лучше у Сергея спросить, он же этот пункт мне рассказал@Дочь Андромеды, помимо сломанного постера смущает[div=c-column b-catalog_entry m0 completed]
обязательно прописывать "completed"? Нельзя ли оставить всё индивидуально, то есть кто посмотрел, у того галочка, кто бросил, крестик. Без навязывания то есть@SergejVolkov@SergejVolkov@Дочь Андромеды, опа, сори, действительно не заметилПроблема наблюдается только при наличии кода выравнивания обложек от @ grin3671 , который встроен в тему shiki-exo.
Решение - отключить эту функциональность, ибо подружить ее и пункт 4 не получается.
@Дочь Андромеды@Pixl@Акуляр, убери букву в одном из айди@Акуляр@Pixl, конечно же я убрал, не работает, всё точно так же@Pixl@Акуляр, так ты его в код завернулубери
[code]
[/codе]
@Акуляр@Pixl, о, в натуре, спасибо. У меня не было этих блоков видно