Theming, Editing Colours

Post

Posted
Rating:
#2488 (In Topic #497)
Am trying to do some design changes, mainly colour changes and I have just a problem. Am not really understanding the usage of {GET,…} used as colour value in the themes.
What do I need to know about them?

Post

Posted
Rating:
Item has a rating of 5 Item has a rating of 5 Item has a rating of 5 Item has a rating of 5 Item has a rating of 5 (Liked by Chris Graham)
#2489
{GET…} is markup language for grabbing the colors from the theme wizard and where they are used. If you look at GLOBAL.CSS at the top lists all the color variants and where used.
I might be a little off…

Hope this helps.

Master Rat

Post

Posted
Rating:
#2490

Master Rat said



Hope this helps.




I used to think the colours defined at the top were only used for calculating new colour scheme when running the theme wizard, using the theme in focus as a base.
Thanks.

Post

Posted
Rating:
#2539
Right, it's both. The first parameter (the colour) of the THEME_WIZARD_COLOR lines is regenerated when the theme wizard runs, from the third parameter.
Then it works as a variable that is referenced through the CSS, named by the second parameter.

You can if you wish just bypass it and directly enter your own CSS colour codes in place or in addition to what the Theme Wizard is doing, you're not tied into it.

Post

Posted
Rating:
#2540
I've documented it better…

Some CSS files have {$THEME_WIZARD_COLOR,#RRGGBB,name,equation} lines near the top.

When the Theme Wizard runs the first parameter (the colour) of the THEME_WIZARD_COLOR lines is regenerated from the third parameter (the equation).

For example,

Code

{$THEME_WIZARD_COLOR,#426aa9,box_title_background,100% seed}
… may become:

Code

{$THEME_WIZARD_COLOR,#ff0000,box_title_background,100% seed}
(this would happen if the seed colour used in the Theme Wizard was #ff0000)

This is all happening only when the Theme Wizard is run.

There is a special case of these particular equations:

Code

{$THEME_WIZARD_COLOR,#94979d,seed,100% 426aa9}
{$THEME_WIZARD_COLOR,#ffffff,WB,100% FFFFFF}
{$THEME_WIZARD_COLOR,#000000,BW,100% 000000}
The Theme Wizard actually totally replaces these equations based on the seed, and whether light or dark was specified for the theme. It is these equations which sit at the root of the Theme Wizard calculation (because they don't depend on any other equations, they are defined directly by colour). The Theme Wizard is essentially an algebra solver using colour theory (a branch of applied mathematics).

When the CSS file is compiled, it works as a simple variable system. The second parameter serves as the variable name, which can then be referenced in the CSS as {$GET,name}. It's a very straight-forward substitution system.

You can if you wish just bypass the Theme Wizard equations system and directly enter your own CSS colour codes in place or in addition to what the Theme Wizard is doing. You are in no way tied into the mechanism of the Theme Wizard once you begin editing your own theme. That said, it can be useful to help you keep your colour palette consistent.

Post

Posted
Rating:
#2555
How about ; ... ; -webkit-... ; -ms-... ; -moz-...?

Post

Posted
Rating:
#2556
This adds CSS prefixing automatically, or makes other changes to make it work stably across browsers.

https://www.thoughtco.com/css-vendor-prefixes-3466867

Post

Posted
Rating:
#2558

Chris Graham said

This adds CSS prefixing automatically, or makes other changes to make it work stably across browsers.

https://www.thoughtco.com/css-vendor-prefixes-3466867


My bad. I've just read that in the comments in global.css
2 guests and 0 members have recently viewed this.