Данный гайд создан дабы сократить поголовье малолетних #### на форуме и провести курс молодого бойца по созданию визуального
В общем, на нашем любимом Шики существуют такие замечательные функции форума, как 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 мб Шики не принимает!
п.п.с. при желании можно создавать целые туннели из спойлеров: /comments/4748248
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
@Quattro Bajeena, теперь можно делать приватные коллекции.@Quattro Bajeena@Полезный Мусор, как? Ошиетэ кудасай@Полезный Мусор@Quattro Bajeena, Создаёшь и выбираешь сделать приватной.1273x728
@Quattro Bajeena@Полезный Мусор, а как сделать чтобы видели коллекцию ? Сделал открытой но не смог найти@···@narcissus desuЕсли речь именно что о- коллекциях: /forum/site/357806-novye-ssylki-na-trekery-i-dr-sayty-reyting-shiki-istoriya-prosmotra-druzey-op-ed-taytlov-spisok-kollektsiy-i-drugoe
Если об их аналоге в профилях:
@Leviophan,@LeviophanЯ в кодах совсем не разбираюсь, как сделать первый вариант со списком (мужские персонажи, женские и т.д.)?
В CSS вставляю код, сохраняю.... а дальше? Ничего не изменяется. Что дописывать нужно и где подскажите плиз?
Как сделать первый вариант со списком (мужские персонажи, женские и т.д.)?
В CSS вставляю код, сохраняю.... а дальше? Ничего не изменяется. Что дописывать нужно и где, подскажите плиз?
@Дрочу на Малышеву@shumai, понимаю, тоже некоторые аватары прям огорчают. Пока не совсем понимаю как это менять.@shumai, понимаю, тоже некоторые аватары прям огорчают. Пока не совсем понимаю как это менять.@Leviophan, /comments/8374701@Leviophan@Дрочу на Малышеву, 538x133 вот так выходит если делать как в том гайде что вы скинули.@Дрочу на Малышеву@Leviophan,Первый шаг
Сначала скопировать в "настройки ---> внешний вид сайта"
Второй шаг
Затем скопировать в раздел"о себе".
или
Второй шаг без первого работать не будет.
(Кстати, во время предпросмотра спойлер отображается обычно, а не как надо. Нужно сохранить и уже потом смотреть).
@Leviophan@Дрочу на Малышеву, Кайф! Спасибо, всё получилось!@🇷Ϻ🇩@Эллен,1791x660
@Эллен@🇷Ϻ🇩, спасибо!