Данный гайд создан дабы сократить поголовье малолетних #### на форуме и провести курс молодого бойца по созданию визуального
В общем, на нашем любимом Шики существуют такие замечательные функции форума, как 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Мами Томоэ Natsume YuujinchouТетрадь дружбы Нацумэ Zoku Natsume YuujinchouТетрадь дружбы Нацумэ 2 Natsume Yuujinchou SanТетрадь дружбы Нацумэ 3 Natsume Yuujinchou ShiТетрадь дружбы Нацумэ 4 Natsume Yuujinchou GoТетрадь дружбы Нацумэ 5 Natsume Yuujinchou RokuТетрадь дружбы Нацумэ 6 JoJo no Kimyou na Bouken Part 1: Phantom BloodНевероятное приключение ДжоДжо — Часть 1: Призрачная кровь JoJo no Kimyou na Bouken Part 2: Sentou ChouryuuНевероятное приключение ДжоДжо — Часть 2: Склонность к битвам JoJo no Kimyou na Bouken Part 3: Stardust CrusadersНевероятное приключение ДжоДжо — Часть 3: Рыцари звёздной пыли JoJo no Kimyou na Bouken Part 4: Diamond wa KudakenaiНевероятное приключение ДжоДжо — Часть 4: Несокрушимый алмаз JoJo no Kimyou na Bouken Part 5: Ougon no KazeНевероятное приключение ДжоДжо — Часть 5: Золотой ветер JoJo no Kimyou na Bouken Part 6: Stone OceanНевероятное приключение ДжоДжо — Часть 6: Каменный океан JoJo no Kimyou na Bouken Part 7: Steel Ball RunНевероятное приключение ДжоДжо — Часть 7: Гонка «Стальной шар» Oz VessaliusОз Безариус Gilbert NightrayГилберт Найтрей AliceАлиса Xerxes BreakЗарксис Брейк Sharon RainsworthШерон Рейнсворт Reim LunettesРейм (Лиам) Лунетт Vincent NightrayВинсент Найтрей Rufus BarmaРуфус Барма FLCLФури-кури Yojouhan Shinwa TaikeiСказ о четырёх с половиной татами Kino no Tabi: The Beautiful WorldПутешествие Кино: Прекрасный мир Haibane RenmeiСоюз Серокрылых Baccano!Шумиха! Durarara!!Дюрарара!! Death NoteТетрадь смерти MonsterМонстр Koukaku Kidoutai: Stand Alone ComplexПризрак в доспехах: Синдром одиночки
Стоит учесть следующие:[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, о, в натуре, спасибо. У меня не было этих блоков видно