Стандартные цвета - как создать тему оформления ^#3280

Данный функционал позволит вам перекрашивать и изменять формат некоторых элементов на сайте - текстовые (простой текст), а также кнопки и формы.

Например, у вас на сайте есть несколько простых текстовых страниц, страница со статьями, форма обратной связи и фотогалерея с изображениями товаров. С помощью данной функции вы можете перекрасить используемые на страницах тексты, изменить шрифты, жирность, а также подобрать цвета, используемые в кнопках, текстах и элементах интерфейса в форме, статьях и фотогалерее.

Рассмотрим подробнее, как пользоваться данным инструментом.

Для начала раскройте меню "Настройки" и выберите пункт "Системные настройки".

В блоке "Стандартные цвета" вы можете:

• Либо выбрать один из стандартных цветов и нажать "Сохранить изменения" - тогда все элементы и тексты на сайте окрасятся в стандартную цветовую схему.
• Либо, чтобы задать свои настройки цветов для текстов и элементов, выбрать один из цветов и нажать на кнопку "Создать" справа от списка.

Если вы решите добавить собственную цветовую тему, откроется окно редактирования темы. 

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

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

Вам будет доступен следующий перечень настроек:

• Основной цвет - влияет на цвет некоторых кнопок, элементов форм, опросов, галерей и т.д. (весь перечень элементов вы можете просмотреть в примерах - они расположены в нижней части, под всеми настройками).
• Дополнительный цвет (текст) - влияет на заголовки (к примеру, статей) и тексты, подписи в формах, галереях и т.д.
• Основной цвет кнопок - отдельно вы можете задать основной цвет для типов кнопок Primary и Secondary.
• Скругление - влияет на скругление углов у кнопок.
• Общее - влияет на все четыре угла кнопок.
• Каждый угол отдельно - при нажатии на "+" под общей настройкой скругления откроются дополнительные настройки, с помощью которых можно задать скругление для каждого угла отдельно.

Обратите внимание!

• В любой момент вы можете восстановить первоначальные глобальные настройки - для этого просто нажмите на кнопку "Сбросить" в правом верхнем углу данного блока.
• Ниже вы можете просматривать прочие примеры (как слева от каждого из блоков настроек, так и в самом низу - под настройками).

Основные кнопки, использующиеся, к примеру, в качестве кнопки пагинации текущей страницы.
Стоит учитывать, что в верхней части есть три вкладки - "Основное", "При наведении" и "При нажатии". На каждой из вкладок располагаются настройки для соответствующего состояния кнопки:

• Основное - кнопка в обычном своем виде.
• При наведении - как должна отображаться кнопка при наведении курсора на нее.
• При нажатии - как должна отображаться кнопка в момент нажатия на нее.

Для начала разберем режим "Основное". В нем расположены следующие настройки:

• Закрас кнопки - для начала выберите один из режимов закраса:
  • Без цвета - кнопка не окрашена,
  • Заливка - тут вам будет необходимо выбрать из палитры один цвет для закраса,
  • Градиент - позволяет указать два цвета, а также задать угол градиента (направление перехода от одного цвета к другому).
• Шрифт - выберите шрифт для текста, использующегося для кнопок.
• Цвет текста - задайте цвет текста кнопки.
• Иконка - на некоторых кнопках могут располагаться небольшие иконки (например стрелки пролистывания, как вы можете видеть на примере слева), для них вы тоже можете указать цвет.
• Рамка (галочка) - включает/отключает вывод рамки.
• Рамка (цвет) - вы можете задать для рамки отдельный цвет.
• Толщина рамки - также можно задать толщину рамки.
• Тень (галочка) - включает/отключает вывод тени.
• Цвет тени - выберите для тени цвет.
• Сдвиг по X/Сдвиг по Y - данные "бегунки" позволяют задать расположение тени относительно кнопки по горизонтали и по вертикали.
• Размытие - задает уровень расплывчатости, "нечеткости" тени.
• Распыление - определяет размер тени
• Inset - если отметить данную галочку, тень будет отбрасываться не снаружи, а внутри кнопки.

Схожим набором настроек вы можете воспользоваться на соседней вкладке для состояния кнопки при наведении.

Набор настроек несколько урезан по сравнению с основными, но логика их работы та же самая - вы можете задать:

• Режим окрашивания и цвета кнопки.
• Цвет для текста кнопки и иконки на ней.
• Включить/выключить рамку и задать для нее цвет.
• Включить/выключить тень и задать нее цвет, настройки расположения и пр. параметры.

Набор настроек на вкладке "При нажатии" аналогичен набору на вкладке "При наведении".

Обратите внимание!

• Как и в случае с "Глобальными настройками", вы можете обнулить все изменения в блоке Primary кнопок. Для этого нажмите "Сбросить".
• Примеры таких кнопок вы можете видеть слева от блока.

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

Набор настроек полностью совпадает с набором настроек для Primary кнопок.

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

Тут вы можете отстроить внешний вид форм на сайте. Как и в случае с кнопками, у форм есть три вкладки - "Основное", "При наведении" и "При фокусе". На каждой из вкладок свой набор настроек:

• Основное - форма и ее поля в обычном состоянии.
• При наведении - как должны выглядеть поля формы при наведении курсора на них.
• При фокусе - в первую очередь затрагивает поля ввода, а именно, как они должны выглядеть после того как в них установили курсор.

Для начала рассмотрим настройки с вкладки "Основное":

• Основной цвет - влияет на некоторые элементы полей формы (иконки в полях дат, выпадающих списках и т.д.)
• Фон - влияет на фоновый цвет в полях ввода, выпадающих списках, датах и пр. полей. Тут вам будет необходимо выбрать один из режимов закраса:
  • Без цвета - кнопка не окрашена,
  • Заливка - тут вам будет необходимо выбрать из палитры один цвет для закраса,
  • Градиент - позволяет указать два цвета, а также задать угол градиента (направление перехода от одного цвета к другому).
• Шрифт текста - выберите шрифт, который будет использоваться для текстов в полях (текст внутри полей, варианты в списках).
• Начертание текста - определяет толщину шрифта, тем больше значение, тем жирнее шрифт.
• Текст (цвет) - цвет текстов в полях (внутри полей, варианты списков).
• Обводка (цвет) - выберите цвет обводки вокруг полей.
• Толщина обводки - задайте толщину обводки.
• Скругление - определяет скругление углов в полях формы.
  • Общее - влияет сразу на все 4 угла
  • Каждый угол отдельно - если нажать на "+", вы сможете задать скругление для каждого отдельного угла.
• Тень (галочка) - включает/отключает вывод тени к полям.
• Цвет тени - выберите для тени цвет.
• Сдвиг по X/Сдвиг по Y - данные "бегунки" позволяют задать расположение тени относительно полей по горизонтали и по вертикали.
• Размытие - задает уровень расплывчатости, "нечеткости" тени.
• Распыление - определяет размер тени.
• Inset - если отметить данную галочку, тень будет отбрасываться не снаружи, а внутри полей.

На вкладках "При наведении" и "При фокусе" расположен схожий набор настроек с некоторыми отличиями (часть настроек отсутствует) - все предложенные там настройки работают абсолютно так же, как описано выше.

Обратите внимание!

• Тут вы тоже можете воспользоваться кнопкой "Сбросить", чтобы восстановить первоначальные настройки.
• Слева вы можете наблюдать все изменения в реальном времени на примере тестовой формы.

В конце не забудьте сохранить изменения.

Вернитесь в "Системные настройки", выберите созданную тему и нажмите "Сохранить изменения".

Любую из созданных вручную тем вы можете в любой момент отредактировать или удалить с помощью соответствующих кнопок.

• Еще раз напоминаем, что в любой момент вы можете пролистать все настройки и под ними ознакомиться с примерами применения заданных параметров.
• В некоторых случаях изменения из созданной темы могут не применяться из-за особенностей верстки (например, если какие-либо страницы созданы давно и в них используются старые шаблоны).
• Не рекомендуется использовать данный инструмент совместно с цветовыми схемами - это может привести к некорректной тем оформления.