Главная / Редактирование сайта / Как мне настроить сайт? / Системные настройки / Стандартные цвета - как создать тему оформления

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

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

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

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

Шаг 1

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

Шаг 2

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

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

Шаг 3. Название

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

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

Шаг 4. Глобальные настройки

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

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

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

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

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

Шаг 5. Primary кнопки

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

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

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

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

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

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

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

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

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

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

Шаг 6. Secondary кнопки

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

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

Шаг 7. Accent кнопки

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

Шаг 8. Формы

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

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

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

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

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

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

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

Шаг 9

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

Шаг 10

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

Изменение и удаление

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

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

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