Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

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

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

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

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

Шаг 1

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

293649061_7669_5de770b085966.png

Шаг 2

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

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

293649061_7670_5de7711441f6a.png

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

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

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

293649061_7683_5dea025f76dff.png

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

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

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

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

293649061_7685_5dea047804f5d.png

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

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

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

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

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

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

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

293649061_7675_5de79bfebd6c6.png

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

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

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

293649061_7679_5de79f117e3e6.png

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

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

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

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

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

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

293649061_7676_5de79cc3e4ccf.png

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

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

293649061_7677_5de79cf26ece8.png

Шаг 8. Формы

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

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

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

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

293649061_7678_5de79d2465100.png

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

293649061_7681_5de7a02113657.png

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

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

Шаг 9

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

293649061_7684_5dea02896982d.png

Шаг 10

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

293649061_7686_5dea1e8f86c49.png

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

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

293649061_7687_5dea1ed0a41e0.png

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

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