CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайтаТопики
Murasaki Renko
Murasaki RenkoвCSS-club – настройка внешнего вида сайта
415
Читайте «Введение в CSS» перед тем, как задавать вопросы!

Решение проблем
Ничего не работает
Проверяйте свой код на ошибки!
Перейдите на CSS Validator, вставьте свой код на сайт. Под полем ввода будут отображаться ошибки.

Вы также можете воспользоваться услугами чат-ботов — зачастую они куда лучше понимают код и могут дать развернутый ответ с рекомендациями по исправлению ошибок.

Самая распространённая ошибка: незакрытые/лишние фигурные скобки, которые вызывают ошибку на следующей строке: если вы видите "красный"/подчеркнутый селектор, то обратите внимание на строку выше – скорее всего, ошибка кроется именно там.

Вторая распространённая ошибка — это текст-комментарий к коду, который неправильно оформлен и ломает идущие следом правила. Правильное оформление комментариев в CSS:
/* Комментарий */
Правильно оформленные комментарии будут окрашены в серый цвет.
Ничего не работает.. на смартфоне
Ищите раздел «Решение проблем» на странице «Введение в CSS».
Пропало поле стилей / Хочу всё удалить
1. Скопируйте один из представленных скриптов:
  • Для временного удаления текущего стиля со страницы:
javascript :(function(){custom_css.remove()})();
Этот метод подойдёт, если вы хотите сохранить код стиля или узнали в комментариях в чем проблема и хотите удалить некоторые правила.

  • Для удаления всего стиля из редактора:
javascript :(function(){custom_css.remove();cm=document.querySelector(".CodeMirror").CodeMirror;cm.setValue("");})();

2. Перейдите на страницу настроек внешнего вида сайта.

3. Вставьте скопированный код в адресную строку, а затем удалите пробел после javascript и перейдите по ссылке:
  • Если у вас ПК, нажмите Enter
  • Если у вас смартфон, нажмите на строчку с иконкой глобуса (а не лупы!).

4. Не забудьте сохранить настройки!
Мыльные картинки в избранном
Перейдите в настройках на вкладку «Профиль». Найдите пункт «Улучшить качество картинок избранного в профиле» и поставьте галочку. Нажмите кнопку «Сохранить» внизу страницы.


Прочее
Как изменить картинки?
Ищите раздел «Замена стандартных изображений» на странице готовых шаблонов.
Комментарии
Скрыть 395 комментариев
Показать 395 комментариев
Загрузить ещё 20 из 395 комментариев
this_is_gabella
this_is_gabella#
Подскажите возможно ли удалить блок истории со страницы профиля? Скрыть через css 
.c-history {
    visibility: hidden;
}
не вариант так как блок все равно загружается (хоть и в скрытом виде) и доступен через инструменты разработчика. Спрашиваю из соображений приватности.
@гомен
гомен
гомен#
@this_is_gabella, 
.p-profiles .profile-head .c-history {
  display: none;
}
(вроде)
grin3671
grin3671#
@Irisel, использовать свойство border-radius.
@Irisel
Irisel
Irisel#
@grin3671, спасибо
hjhjhjhjhj
hjhjhjhjhj#
Здравствуйте, хочу вместо избранного сделать коллекцию, с текстом в графе "Обо мне", с причинами моей любви и тп. Нашёл коллекцию, но по примеру оттуда получается странно, потому что всегда стоит зелёная галочка - отметка просмотрено, даже если у пользователя не просмотрено или даже в списке нету, а так же на телефоне нельзя ни как посмотреть полностью текст, с помощью нажатия, как обычно. Думал просто скопировать код, который даётся при создании коллекции и вставить, но так тоже не работает... Не подскажете, пожалуйста, как быть?
@grin3671
grin3671
grin3671#
hjhjhjhjhjhjhjhjhjhj
Нашёл коллекцию, но по примеру оттуда получается странно, потому что всегда стоит зелёная галочка
Археология какая-то.. Нужно убрать из кода completed:
/*первая анимешка*/
[div=c-column b-catalog_entry m0 completed]
@hjhjhjhjhj
hjhjhjhjhj
hjhjhjhjhj#
@grin3671, Благодарю, всё работает! Только одного не могу понять, как сделать так, чтобы текст закрепить можно было нажатием, как в коллекциях, нашёл класс user-defined, который по идее должен за это отвечать, но ничего не работает..:(
Вот код:
спойлер

[div=cc-5 m1]
[div=rate_module cc-5]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=32182 моб-психо-100][div=image-cutter]
[poster]https://shikimori.one/animes/z32182-mob-psycho-100[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][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 user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=121 стальной-алхимик][div=image-cutter]
[poster]https://shikimori.one/animes/121-fullmetal-alchemist[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=2001 гуррен-лаганн,-пронзающий-небеса][div=image-cutter]
[poster]https://shikimori.one/animes/z2001-tengen-toppa-gurren-lagann[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=1210 добро-пожаловать-в-nhk][div=image-cutter]
[poster]https://shikimori.one/animes/1210-nhk-ni-youkoso[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=7674 бакуман][div=image-cutter]
[poster]https://shikimori.one/animes/7674-bakuman[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=7785 сказ-о-четырёх-с-половиной-татами][div=image-cutter]
[poster]https://shikimori.one/animes/7785-yojouhan-shinwa-taikei[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=223 драконий-жемчуг][div=image-cutter]
[poster]https://shikimori.one/animes/223-dragon-ball[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=3002 кайдзи][div=image-cutter]
[poster]https://shikimori.one/animes/3002-gyakkyou-burai-kaiji-ultimate-survivor[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=44511 человек-бензопила][div=image-cutter]
[poster]https://shikimori.one/animes/44511-chainsaw-man[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[div=c-column][div=c-column b-catalog_entry m0 completed][div=cover][div=image-decor][anime=2402 завтрашний-джо][div=image-cutter]
[poster]https://shikimori.one/animes/2402-ashita-no-joe[/poster][/div][/anime][div=text user-defined]
риалофыигшфрагфраглфрашфырашфырафшщафафыафыавыапА
[/div][/div][/div][/div]
[b]100/100[/b][/div]
[br][/div]
[/div]
@grin3671
grin3671
grin3671#
@hjhjhjhjhj, user-defined добавляет класс active, а в коллекциях используется класс is-focused. Нужно найти стили для text.is-focused, использующиеся в коллекция и скопировать для text.active.
Ладащка
Ладащка#
при наведении на область с историей
390x345
убирается и отображается
375x336

как заменить картинку?

если я ставлю 
.p-profiles .profile-head .c-history.x3>div:nth-child(2) {
  background: none;
, то картинка просто превращается в
362x330
(при наведении курсора он пропадает)
@grin3671
Murasaki Izumi・紫泉
Murasaki Izumi・紫泉#
Доброе утро (ночь, день и др.)!

Помогите починить шрифт в заголовке профиля.

Правило css:
@font-face {
  font-family: 's2g love';
  src: url(https://dl.dropboxusercontent.com/s/i9jdhdhna5s05zo/S2G-love.ttf);
}

.p-profiles .profile-head .c-brief header h1 {
  font-family: 's2g love';
  color: #000;
}

До недавнего времени всё работало, как надо, но что-то вдруг пошло не так. Грешила поначалу на глюки браузера (гугл-хром), но думаю, дело в Дропбоксе. Ссылка на этот же самый шрифтовой файл теперь выглядит по-другому:
https://www.dropbox.com/scl/fi/ogazxr6d8td6h56b92of7/S2G-love.ttf?rlkey=z5zurg9xd5f5rf10us5qpegec&st=2kvnhch3&dl=0,
меняю её на
https://dl.dropboxusercontent.com/scl/fi/ogazxr6d8td6h56b92of7/S2G-love.ttf, она тоже не работает.

Ссылки оформляла по примеру: /comments/3583686.

Что можно с этим сделать?
@grin3671
grin3671
grin3671#
@Murasaki Izumi・紫泉, скорее всего, способ, описанный в комментарии 7-летней давности, больше не рабочий. Этот шрифт есть на других ресурсах, можно попробовать так:
css
@font-face {
    font-family: "S2G love";
    src: url("https://db.onlinewebfonts.com/t/0d71aa1f4673065771a9f448a9410966.eot");
    src: url("https://db.onlinewebfonts.com/t/0d71aa1f4673065771a9f448a9410966.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/0d71aa1f4673065771a9f448a9410966.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/0d71aa1f4673065771a9f448a9410966.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/0d71aa1f4673065771a9f448a9410966.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/0d71aa1f4673065771a9f448a9410966.svg#S2G love")format("svg");
}
Источник: www.onlinewebfonts.com
@Murasaki Izumi・紫泉
Murasaki Izumi・紫泉
Murasaki Izumi・紫泉#
grin3671grin3671
способ, описанный в комментарии 7-летней давности
Та я понимаю. :hot:
grin3671grin3671
можно попробовать так
Неа. Так тоже не работает.

Через fonts.google.com только получилось, нашла там себе кое-чего, сойдёт.

Но спасибо всё равно! :)
kilauea
kilauea#
Добрый день, может кто помочь? Стояла картинка раньше в профиле, стала недоступна, хотела поставить другую, не могу поставить почему-то, хотя вроде копирую url картинки, делаю все как в описании "Как установить фоновое изображение для страницы" и код такой же, но просто картинка не высвечивается при редактировании. Подскажите, может теперь картинки берутся на каком-то другом сайте? Искала решение тут, но не нашла, может не увидела?
@grin3671, @Murasaki Izumi・紫泉
grin3671
grin3671#
@kilauea, если картинка не загружена на Шикимори, то ссылка на неё должна указываться полностью, начиная с протокола https://:
/* Фон сайта (фиксированный, на полный экран) */
body {
  background: url("https://i.imgur.com/6ONgv4P.jpeg") center top / cover fixed;
}
Протокол и домен можно не указывать только для изображений хранящихся на самом сайте.
Murasaki Izumi・紫泉
Murasaki Izumi・紫泉#
@kilauea, доброй ночи! Случайно увидела ваш вопрос, он ещё актуален?
Попробуйте загрузить свою картинку в свой профиль в комментарий и потом поставьте её на фон. Коммент потом можно, в принципе, удалить.
@kilauea
kilauea
kilauea#
@Murasaki Izumi・紫泉, добрый вечер, нет, все уже хорошо! у меня все получилось, но я забыла поблагодарить, просто сейчас картинка слетела снова, редко захожу, поэтому позже переделаю)
@Murasaki Izumi・紫泉
Murasaki Izumi・紫泉
Murasaki Izumi・紫泉#
@kilauea, а, я просто мимо проходила, зашла к вам полюбопытствовать, а там пустота на фоне) Ну хорошо, что всё хорошо. :)
Игби
Игби#
Добрый день. Заметила, что слетели настройки стиля в профиле. Были какие-то изменения на сайте? Как-то можно восстановить это? Ставила давно, уже не помню даже как это делала. Или нужно заново настраивать?
@Akihiro Kun, @prostoName
Akihiro Kun
Akihiro Kun#
@Игби, Аналогичная ситуация :depressed2:
prostoName
prostoName#
@Игби, Тоже настройки слетели, так самое обидное что пикчу на фоне уж 10 раз потеряла :Cry3:
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode