• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

how to use the right color with color palette?

#1
I am trying to make a new style for my xenforo site. Mainly I want to change the color of the site. I want to use the blue as main color and gold. I went to Style Properties: Color Palette, and see there are many options such as @pageBackground, @faintTextColor...,

so my question is:
how could I know which content uses the corresponding color property? @pageBackground is easy to know, it is for the color of pageBackground, but for others such as @primaryDarker and @primaryDark, how could I know where is using @primaryDarker? where is using @primaryDark? their colors are too similar. I almost can not tell the difference from the frontend?
 

Tracy Perry

Well-known member
#2
I am trying to make a new style for my xenforo site. Mainly I want to change the color of the site. I want to use the blue as main color and gold. I went to Style Properties: Color Palette, and see there are many options such as @pageBackground, @faintTextColor...,

so my question is:
how could I know which content uses the corresponding color property? @pageBackground is easy to know, it is for the color of pageBackground, but for others such as @primaryDarker and @primaryDark, how could I know where is using @primaryDarker? where is using @primaryDark? their colors are too similar. I almost can not tell the difference from the frontend?
Simplest way is to change them (one at a time) to a garish color that is not shown anywhere else and then browse and see what all it effects.
 
#3
Thanks Tracy, I have tried your suggestions. But I still did not find the area that below color take effect, although I find them in the templates, but in front end I can not find the corresponding places.
@tooltipBackground /inline_mod.css
@inlineMod /inline_mod.css
@secondaryMedium /help_smilies.css
 

Tracy Perry

Well-known member
#4
Thanks Tracy, I have tried your suggestions. But I still did not find the area that below color take effect, although I find them in the templates, but in front end I can not find the corresponding places.
@tooltipBackground /inline_mod.css
@inlineMod /inline_mod.css
@secondaryMedium /help_smilies.css
Are you familiar with using Chrome Developer or the FireFox equivalent. Normally you can find those by that.
There are several sections for the inline mod (if it's where I am thinking about)
#InlineModOverlay .selectionControl (believe this was the green)
#InlineModOverlay .actionControl (believe this was the red)
#InlineModOverlay .SelectionCount (white text)
#InlineModOverlay label (yellow text)

control the backgrounds and some of the text of the inline mod (in EXTRA.css).
example.png
 
Last edited:

Tracy Perry

Well-known member
#6
Thanks Tracy, got it.
Good deal.
There are some additional ones that you can find (I was busy helping another site owner sort through a problem and had to do that quickly)... and have to go back to working on re-installing Windows XP on a cardio machine that I have to take to a local doctors office this morning so can't check them now.