Support » Plugin: Central Color Palette » Create CSS color variables from within this plugin

  • Resolved ulfb

    (@ulfb)


    Great plugin, thank you very much for your work!

    Wouldn’t it be great if the color names maintained in Central Color Palette could be used as CSS variables?

    E.g. if in Central Color Palette, “my-black” was the name of my own color version of “black”, I could then use this as if I had defined it in CSS as e.g.
    :root { --my-black: #030201; }
    and then use it like throughout WordPress e.g. like this
    DIV { color: var(--my-black); }

    Did I overlook something and it’s already working like this? Or what else is the use of the color names, besides appearing in some of the color pickers?

    And if I may… another great wish would be for Multisite Installations to be able to use your plugin network-wide, e.g. like the “Code Snippets” plugin is enabling this. I gladly see that Central Color Palette works in Multisite, and it would be terrific to make color palettes available system-wide. The way Code Snippets implemented this is fabulously straightforward and simple.

    Thank you so much for your consideration!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Daniel Menȝies

    (@kungtiger)

    Hi ulfb,

    have a look at version 1.13.12 and let me know if it works for you. I’ve added a checkbox to the palette editor which adds all active colors as CSS variables to the front-end of WordPress based on their names.

    As to multisite support: I don’t have enough experience with a multisite installation of WordPress and would have to give an implementation a more thorough look. That’ll take time that I currently do not have. Maybe I’ll add support at a later point.

    Plugin Author Daniel Menȝies

    (@kungtiger)

    Version 1.14 is out which includes global CSS variables.

    Hi Daniel,

    Thanks for adding this important features. Can you please giving a guide to use this feature? I’m very new to CSS variables. A link is also fine.

    Thanks again for your useful plugin.

    • This reply was modified 9 months, 1 week ago by .
    Plugin Author Daniel Menȝies

    (@kungtiger)

    First create your palette and tick “Add global CSS variables”.
    That’ll adds a <style> tag containing for example something like this:

    :root {
      --indigo: rgba(68, 105, 200, 0.11);
    }

    On their own they won’t do anything. They become useful if you are using a theme that offers custom CSS or you’re writing your own theme.
    How to use these variables please have a look at Using CSS custom properties [developer.mozilla.org]

    Hope that’ll help.

    taxumi

    (@taxumi)

    Hi Daniel,

    Thanks for your useful guidance!
    All the best.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Create CSS color variables from within this plugin’ is closed to new replies.