Как настроить профиль шикимори

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

Не забудьте заглянуть на страницу бб-кодов сайта, где можно найти самые базовые шаблоны, а также в F.A.Q. и его примеры, где разобраны самые востребованные css правила.

Как скрыть лишние элементы логотипа?
Статья в FAQ’е «Как скрыть элемент?». На примере иконки: Другие селекторы указаны выше.

Как заменить иконку или название на свои?
Всё просто, указываем для необходимого элемента (список выше) ссылку на свою картинку:Если вам нужны более детальные настройки:

Если вам необходимо поменять иконку в примере выше замените селектор на .l-top_menu-v2 .logo-container .glyph . Дополнительно вам, возможно, потребуется менять отступы для иконки:
Как сделать свою надпись?
Скройте лишние элементы с помощью свойства-значения display: none; , а затем добавьте следующее правило:Рекомендуется использовать именно такой селектор, чтобы не переписывать заданные в других дочерних элементах .logo-container значения ширины и высоты.

Давайте разберём случай, когда вам хочется поместить какого-нибудь персонажа в правый нижний угол и чтобы он перемещался вместе с прокруткой страницы. Код с комментариями ниже:

Результат:

Если есть желание переместить в другое место, допустим, с левого края, то убираем right: 0px и пишем left: 0px, т.е. отступ 0 пикселей от левой границы, довольно простая логика: левый нулевой и нижний нулевой, вот и получаем левый нижний угол. Всего таких свойств четыре: left, right, bottom и top, поняв эту простую логику можно переместить в любое место.

Если же нужно сделать так, чтобы изображение оставалось на своём месте и при прокрутке страницы, то position: fixed меняется на position: absolute и его позиционирование проводится через вышеупомянутые четыре свойства.

Если персонаж смотрит не в ту сторону, то не обязательно бежать менять исходное изображение, средства CSS позволяют отразить по горизонтали через transform: scale(-1, 1) или по вертикали transform: scale(1, -1);, нужно просто добавить это свойство в теле селектора.

Если нужно добавить более одного персонажа, допустим, два, то можно дублировать правило и во втором заменить :after на :before в селекторе. Однако, если вам нужно больше двух персонажей, то придётся менять уже весь селектор, искать еще один элемент в структуре, от которого можно создать :before и :after, стоит сказать, что таких элементов очень много и у некоторых из них они уже созданы, но под свои нужды.

«У меня ничего не работает, что я сделал не так» ? Что ж, тут не так много вариантов:

(1) Убедитесь, что ; (символ «точка с запятой») стоит в конце каждого свойства, это важно
(2) Убедитесь, что везде соблюдены фигурные скобки, каждый селектор открывается и закрывается фигурными скобками, обратите внимание
(3) Иногда шикимори не хочет пропускать ссылку, если вы её пишите с http или https
попробуйте убрать http: \ https:
(4) Изображения нет, ссылки на некоторые сайты Шикимори не пускает, попробуй-те проверенные ссылки, вроде ссылок с vk или с imgur
(5) Любые другие синтаксические ошибки, вроде забытых не закрытых кавычек и прочее, прочее, CSS довольно чувствительный, чтобы от такой лажи всё сломалось
(6) Элемент не может иметь более одного after и более одного before, потому убедитесь, что они не задействованы ранее, возможно, под какие-то другие ваши нужды, если всё-таки задействован, то остаётся только найти другой элемент и от него сделать after и\или before
(7) Маловероятно, но всё таки, если у .b-feedback стоит display: none (как эффект, слева у сайта не видно кнопки сообщить об ошибке), то тут тоже надо искать другой элемент и создавать у него after или before

Стоит сказать сразу, что она будет видна другим только в вашем профиле:
Например:
Конечно, ссылки не рекомендуется брать из вк, потому что они могут быть видны только у вас, всем остальным вк не даст увидеть документ по вашей ссылке. Так же, стоит отменить, что если вы пишите // в начале ссылки, как в примере, то убедитесь, что сайту доступен https протокол (написал в начале ссылки https:// ссылка и посмотрите, что выдаст), иначе вы не увидите то, что хотите.
Если https протокол не доступен, то ссылку нужно начинать с http://.
Если даже с http не отображается гиф, то, вероятно, фильтр шикимори не пропустил вашу ссылку, посчитав её небезопасной, в таком случае ищите другую гиф или перезагрузите её куда-нибудь в другое место.

Преобразует обычные спойлеры в блоке «обо мне» в что-то похожее на пункты вертикального меню, увеличивая область срабатывания, изменяя внешний вид, как это выглядит можно увидеть на скриншоте:



Только для профилей со стандартной автоматической адаптацией, без использования @media запросов.

Предупреждаю, чтобы понять всё тут потребуются хотя бы минимальные понятия CSS и знание какого-нибудь набора свойств.
Прогресс-карточки это, наверное, одна из тех неплохих вещей, что можно делать, когда понимаешь, что делаешь и как делаешь. Подобное не является гибким элементом и требует обновления через код, поскольку на текущий момент у нас нет возможности вставлять динамические значения.

Попробую объяснить, как такое можно сделать: немного, может быть, пищи для ума, — все bb-коды (ссылки через ‘а’, спойлер, жирный текст, цитата и тд.), что мы пишем в блок «обо мне» преобразуются в HTML-теги на выходе, а гибкость CSS, в свою очередь, позволяет точно обращаться к конкретным, для того есть множество разных видов селекторов и псевдоклассы, таким образом за счет блока «обо мне» мы можем «генерировать» множество разных вещей и помещать их туда, куда захотим. То, как я их делаю тут не является единственным способом, их множество разных, какие-то могут потребовать другие элементы и результат можно получить абсолютно любой.

Возьмём бб-код — url, который позволяет нам задавать ссылки и имена для них, в моём случае это будет ссылка на мангу, которую я помещу, допустим, в конце моего блока «обо мне»:

вот чем-то таким становится ссылка в профиле в блоке «обо мне» после её вставки:

сохранив изменения мы можем «издеваться» над ней:

стало (криво, но ничего, основную суть доносит):

код без особых каких-то объяснений и носит скорее ознакомительный характер, предлагается для самостоятельной работы с ним, а его подробное объяснение слишком сильно выйдет в теорию CSS. Собственно, все свойства гуглятся:

Как видно по коду, все отражаемые текстовые данные находятся в content и требуют ручной правки при каждом изменении отражаемых данных. Таким образом, content — то, что нужно менять при желании изменить цифры.
href в селекторе нужно менять в соответствии с ссылкой на мангу.
Всё остальное — визуальные свойства.

Нужны ли вам такие карточки решать вам, но ручное обновление данных это всё, чем мы сейчас располагаем.

Шаблон:
Для каждого аниме в модуле нужно создавать [animes ids=айди_аниме wall columns=9] и следующий за ним [div=rate-module-value]оценка[/div] , создавать их нужно внутри блока [div=rate-module] , конец которого [/div] в самом конце. Как видно, мы используем стандартный блок animes, но не пишем все айди в одном блоке, а создаём новый animes под каждое аниме. Не нужно делать лишние пробелы и переносы строк, если не хотите, чтобы аниме находились на разных строках — пишите всё в одну строку, или, для удобства можно написать с переносами строк, но перед переносом в блок «обо мне» все переносы строк должны быть удалены
Если не знаете, как искать айди аниме, то тут всё есть, изучите, это основной функционал сайта

Пример готового модуля под мои нужды, внимательно обратите внимание на структуру кода, тут добавлено 18 аниме и, соответственно, 18 оценок:

Источник

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

Не забудьте заглянуть на страницу бб-кодов сайта, где можно найти самые базовые шаблоны, а также в F.A.Q. и его примеры, где разобраны самые востребованные css правила.

Как скрыть лишние элементы логотипа?
Статья в FAQ’е «Как скрыть элемент?». На примере иконки: Другие селекторы указаны выше.

Как заменить иконку или название на свои?
Всё просто, указываем для необходимого элемента (список выше) ссылку на свою картинку:Если вам нужны более детальные настройки:

Если вам необходимо поменять иконку в примере выше замените селектор на .l-top_menu-v2 .logo-container .glyph . Дополнительно вам, возможно, потребуется менять отступы для иконки:
Как сделать свою надпись?
Скройте лишние элементы с помощью свойства-значения display: none; , а затем добавьте следующее правило:Рекомендуется использовать именно такой селектор, чтобы не переписывать заданные в других дочерних элементах .logo-container значения ширины и высоты.

Давайте разберём случай, когда вам хочется поместить какого-нибудь персонажа в правый нижний угол и чтобы он перемещался вместе с прокруткой страницы. Код с комментариями ниже:

Результат:

Если есть желание переместить в другое место, допустим, с левого края, то убираем right: 0px и пишем left: 0px, т.е. отступ 0 пикселей от левой границы, довольно простая логика: левый нулевой и нижний нулевой, вот и получаем левый нижний угол. Всего таких свойств четыре: left, right, bottom и top, поняв эту простую логику можно переместить в любое место.

Если же нужно сделать так, чтобы изображение оставалось на своём месте и при прокрутке страницы, то position: fixed меняется на position: absolute и его позиционирование проводится через вышеупомянутые четыре свойства.

Если персонаж смотрит не в ту сторону, то не обязательно бежать менять исходное изображение, средства CSS позволяют отразить по горизонтали через transform: scale(-1, 1) или по вертикали transform: scale(1, -1);, нужно просто добавить это свойство в теле селектора.

Если нужно добавить более одного персонажа, допустим, два, то можно дублировать правило и во втором заменить :after на :before в селекторе. Однако, если вам нужно больше двух персонажей, то придётся менять уже весь селектор, искать еще один элемент в структуре, от которого можно создать :before и :after, стоит сказать, что таких элементов очень много и у некоторых из них они уже созданы, но под свои нужды.

«У меня ничего не работает, что я сделал не так» ? Что ж, тут не так много вариантов:

(1) Убедитесь, что ; (символ «точка с запятой») стоит в конце каждого свойства, это важно
(2) Убедитесь, что везде соблюдены фигурные скобки, каждый селектор открывается и закрывается фигурными скобками, обратите внимание
(3) Иногда шикимори не хочет пропускать ссылку, если вы её пишите с http или https
попробуйте убрать http: \ https:
(4) Изображения нет, ссылки на некоторые сайты Шикимори не пускает, попробуй-те проверенные ссылки, вроде ссылок с vk или с imgur
(5) Любые другие синтаксические ошибки, вроде забытых не закрытых кавычек и прочее, прочее, CSS довольно чувствительный, чтобы от такой лажи всё сломалось
(6) Элемент не может иметь более одного after и более одного before, потому убедитесь, что они не задействованы ранее, возможно, под какие-то другие ваши нужды, если всё-таки задействован, то остаётся только найти другой элемент и от него сделать after и\или before
(7) Маловероятно, но всё таки, если у .b-feedback стоит display: none (как эффект, слева у сайта не видно кнопки сообщить об ошибке), то тут тоже надо искать другой элемент и создавать у него after или before

Стоит сказать сразу, что она будет видна другим только в вашем профиле:
Например:
Конечно, ссылки не рекомендуется брать из вк, потому что они могут быть видны только у вас, всем остальным вк не даст увидеть документ по вашей ссылке. Так же, стоит отменить, что если вы пишите // в начале ссылки, как в примере, то убедитесь, что сайту доступен https протокол (написал в начале ссылки https:// ссылка и посмотрите, что выдаст), иначе вы не увидите то, что хотите.
Если https протокол не доступен, то ссылку нужно начинать с http://.
Если даже с http не отображается гиф, то, вероятно, фильтр шикимори не пропустил вашу ссылку, посчитав её небезопасной, в таком случае ищите другую гиф или перезагрузите её куда-нибудь в другое место.

Преобразует обычные спойлеры в блоке «обо мне» в что-то похожее на пункты вертикального меню, увеличивая область срабатывания, изменяя внешний вид, как это выглядит можно увидеть на скриншоте:



Только для профилей со стандартной автоматической адаптацией, без использования @media запросов.

Предупреждаю, чтобы понять всё тут потребуются хотя бы минимальные понятия CSS и знание какого-нибудь набора свойств.
Прогресс-карточки это, наверное, одна из тех неплохих вещей, что можно делать, когда понимаешь, что делаешь и как делаешь. Подобное не является гибким элементом и требует обновления через код, поскольку на текущий момент у нас нет возможности вставлять динамические значения.

Попробую объяснить, как такое можно сделать: немного, может быть, пищи для ума, — все bb-коды (ссылки через ‘а’, спойлер, жирный текст, цитата и тд.), что мы пишем в блок «обо мне» преобразуются в HTML-теги на выходе, а гибкость CSS, в свою очередь, позволяет точно обращаться к конкретным, для того есть множество разных видов селекторов и псевдоклассы, таким образом за счет блока «обо мне» мы можем «генерировать» множество разных вещей и помещать их туда, куда захотим. То, как я их делаю тут не является единственным способом, их множество разных, какие-то могут потребовать другие элементы и результат можно получить абсолютно любой.

Возьмём бб-код — url, который позволяет нам задавать ссылки и имена для них, в моём случае это будет ссылка на мангу, которую я помещу, допустим, в конце моего блока «обо мне»:

вот чем-то таким становится ссылка в профиле в блоке «обо мне» после её вставки:

сохранив изменения мы можем «издеваться» над ней:

стало (криво, но ничего, основную суть доносит):

код без особых каких-то объяснений и носит скорее ознакомительный характер, предлагается для самостоятельной работы с ним, а его подробное объяснение слишком сильно выйдет в теорию CSS. Собственно, все свойства гуглятся:

Как видно по коду, все отражаемые текстовые данные находятся в content и требуют ручной правки при каждом изменении отражаемых данных. Таким образом, content — то, что нужно менять при желании изменить цифры.
href в селекторе нужно менять в соответствии с ссылкой на мангу.
Всё остальное — визуальные свойства.

Нужны ли вам такие карточки решать вам, но ручное обновление данных это всё, чем мы сейчас располагаем.

Шаблон:
Для каждого аниме в модуле нужно создавать [animes ids=айди_аниме wall columns=9] и следующий за ним [div=rate-module-value]оценка[/div] , создавать их нужно внутри блока [div=rate-module] , конец которого [/div] в самом конце. Как видно, мы используем стандартный блок animes, но не пишем все айди в одном блоке, а создаём новый animes под каждое аниме. Не нужно делать лишние пробелы и переносы строк, если не хотите, чтобы аниме находились на разных строках — пишите всё в одну строку, или, для удобства можно написать с переносами строк, но перед переносом в блок «обо мне» все переносы строк должны быть удалены
Если не знаете, как искать айди аниме, то тут всё есть, изучите, это основной функционал сайта

Пример готового модуля под мои нужды, внимательно обратите внимание на структуру кода, тут добавлено 18 аниме и, соответственно, 18 оценок:

Источник

Читайте также:  Как отремонтировать швейную машинку самостоятельно brother
Оцените статью