Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Добавлено в закладки: 1

Идея стилизовать кнопки, из основных настроек реколл, пришла, вроде, в 14й версии. Это был прорыв. Он позволил нам из админки, все реколл кнопки стилизовать под цветовую гамму наших сайтов.

Вот он:

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

А что будет, если мы для оттенков блоков их теней и контента, будем брать цвет, который мы задаем в основных настройках сайта колорпикером? Просто ослабим ему яркость % на 80-90.

Этот цвет хранится у нас в основных, глобальных настройках: в rcl_global_options. Выглядит он так

#c17a57 - hex значение.

Примемся за дело:

  1. нам надо перевести hex в rgb
  2. используя rgba, будем задавать прозрачность, чтобы ослабить цвет (аналог древнему opacity)

Ниже дан рабочий код к скриншотам выше :)

В коде видно, что варьируя прозрачностью от 0.08 до 0.2 мы, от светлого, переходим к более темным оттенкам. Его и применяем к нужным нам классам и css свойствам.
upd: 2016-06-21:

А как же быть когда нам нужно получить цвет темней? И с оттенками?

Смотрим код:

Добавляем чуток математики: Переменные $rs, $gs, $bs позволяет получить оттенок ~на 45% темней нашего оригинала. Дроби округляем, до целых:

 

upd: 2016-06-22:

А как же быть когда нам нужно инвертировать цвет?

Чтобы получить противоположный цвет, выполним следующий код:

Его вид:

 

Теперь я считаю эту статью завершенной. Будут вопросы - не стесняйтесь!

p.s. в дополнении Latest comments author  (именно он на большинстве скриншотов), опционально будет включаться (настройка) вывод стилизации цветом, контента блока, под стиль вашего сайта. И все последующие свои дополнения я переведу на эту опцию. Добавим еще больше индивидуальности вашим сайтам!

Как вы относитесь к этой идее?

И вопрос для разработчиков - вы будете включать эту опцию в свои дополнения?

5

Автор публикации

422

Вся лента по разработке здесь: http://across-ocean.otshelnik-fm.ru/?note-link=2406

http://across-ocean.otshelnik-fm.ru/ - список моих работ к плагину WP-Recall

Комментарии: 1084Публикации: 123Регистрация: 27-01-2013Продаж/Покупок: 5849/123