What is CSS Name?

  • Resolved pagallery

    (@pagallery)


    4 years, 1 month ago

    What is the purpose of the CSS Name box? Can I use it to give the colors I’ve picked a name which I can then reference in CSS.

    For example – say I have a color of #000080 which is my main theme color and which I want to use to give a background to links on hover.

    I could set the css to read

    /* mouse over link */
    a:hover {
    background-color: #000080;
    }

    but if I could name a color,say, maintheme and then set my CSS as

    /* mouse over link */
    a:hover {
    background-color: maintheme;
    }

    then if I ever changed my main theme color I could change it in Central Color Palette but keep the css name the same and I wouldn’t have to go round change the hex code else where.

    Is it possible to do this?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Daniel Men?ies

    (@kungtiger)

    Hi,

    The functionality that you are describing is commonly called CSS Variables.
    Please have a look at Using CSS custom properties (variables) / Basic usage for a brief introduction.

    Now, my plugin can generate those variables for you. Simply tick Add global CSS variables to themes, assign CSS names for your colours and – after saving your palette – you can use theses names as follows:

    (Assuming you assigned a CSS name, let’s say maintheme)

    /* mouse over link */
a:hover {
  background-color: var(--maintheme);
}

    As long as you do not change these CSS names you can change your palette and every place they are used they get automatically updated.

    Hope this helps!

    Thread Starter pagallery

    (@pagallery)

    Thank you for the very prompt response. Just tried it and it works fine.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘What is CSS Name?’ is closed to new replies.