Данный гайд создан дабы сократить поголовье малолетних #### на форуме и провести курс молодого бойца по созданию визуального
В общем, на нашем любимом Шики существуют такие замечательные функции форума, как 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 мб Шики не принимает!
п.п.с. при желании можно создавать целые туннели из спойлеров: /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
@Samarina, теперь можно делать приватные коллекции.@Samarina@Полезный Мусор, как? Ошиетэ кудасай@Полезный Мусор@Samarina, Создаёшь и выбираешь сделать приватной.1273x728
@Samarina@Полезный Мусор, а как сделать чтобы видели коллекцию ? Сделал открытой но не смог найти@···@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
@Эллен@🇷Ϻ🇩, спасибо!