Пользовательские стили оформления

Друзья, если такие слова как HTML-вёрстка, CSS стили оформления не являются для вас пустым звуком, уделите несколько минут вашего времени, возможно вы уже давно ждали подобной новости.

В разделе настроек вы можете воспользоваться новой опцией и загрузить свои стили для установленной Темы оформления, таким образом возможно идеально настроить дизайн под себя.

Само собой разумеется, новость не для всех. Если вы дочитали до этих строк и не поняли сути, то эти настройки точно не для вас, можете закрывать статью и далее заниматься своими делами :).

Чтобы воспользоваться данной опцией, вам необходимо зайти в Настройки, раздел Персонализация и кликнуть на шестерёнки в верхнем правом углу. Раскроется блок загрузки стилей. Можно пользоваться.

После загрузки файла стилей возможно два варианта выбора:

• Добавить ваши стили к стилям Темы. Это удобно в случае мелких доработок визуала
• Заменить стили Темы вашими стилями. Эта опция позволит кардинально сменить оформление. Но она же может и поломать весь дизайн, поэтому используйте с осторожностью.

Для аварийного удаления вашего файла стилей достаточно перейти по ссылке — https://OnlineZakladki.ru/?resetStyles

Примеры использования функционала

Давайте рассмотрим несколько примеров в которых будет более понятна суть данного файла.

CSS-переменные

:root {
/* Размер шрифта всех элементов на сайте. 12px => шрифт меньше. 16px => шрифт больше. */
--body_font_size: 14px;
/* Соотношение сторон закладки. Значение 1 => квадрат. Значение 1.25 => прямоугольник */
--visual_bkmk_aspect_ratio: 1.22;
/* Максимальная ширина закладки. 280px => Ширина меньше. 320px => Ширина больше. */
--visual_bkmk_max_width: 300px;
/* Минимальная ширина закладки. 80px => Ширина меньше. 90px => Ширина больше. */
--visual_bkmk_min_width: 85px;
/* Минимальный отступ от боковых границ экрана до закладок. 20px => отступ меньше. 60px => Отступ больше. */
--horizontal_key_min_width: 40px;
}

Сравните два скрина ниже. Первый со следующими настройками.

:root {
--visual_bkmk_aspect_ratio: 1.22;
--visual_bkmk_max_width: 200px;
}

На втором мы изменили пропорцию закладок и их максимальный размер.

:root {
--visual_bkmk_aspect_ratio: 1.45;
--visual_bkmk_max_width: 250px;
}

Как видим, получили несколько иной внешний вид.

Редактирование стилей

Давайте теперь выровняем фоновые изображения по центру для большей  завершённости.

.bkmk_yes {
background-position: 50%;
}

Вот мы в несколько простых шагов и изменили дизайн закладок персонально под себя. Будем надеяться, что данные возможности прийдутся вам по душе.

Файл стилей  с продемонстрированными изменениями вы можете скачать по ссылке, открыв серию собственных экспериментов с дизайном.

P.S. Если файл не закачивается непосредственно при клике по ссылке, то нажмите на него правой клавишей мыши и выберите пункт — «Сохранить объект как»