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

XF 1.5 CSS Elements

Mindzipper

Active member
#1
This is probably answered somewhere but I can't find it.

I'm not a Xen pro, but when i look at a style, I don't see typical CSS elements. I have no idea what '@primaryLight @primaryLighter' and things like that are. I'm trying to figure out which of those names are font colors.

Is there a chart somewhere that tells me what each of these are?
 

Russ

Well-known member
#2
Style properties and templates reference the Color Palette. Check Appearance -> Color Palette to see those colors in action.
 

Mindzipper

Active member
#3
No I know that, but what i'm saying is, below the color swatch it says things like @primaryLighter etc. That doesn't help. none say which are the font colors. or is this pallette only for the elements, not fonts?

i'm trying to change the font colors
 

Russ

Well-known member
#4
No I know that, but what i'm saying is, below the color swatch it says things like @primaryLighter etc. That doesn't help. none say which are the font colors. or is this pallette only for the elements, not fonts?

i'm trying to change the font colors
Font colors can be changed via the color palette ->

contentText
dimmedTextColor
mutedTextColor
faintTextColor

It doesn't control all font colors as there are various places that call random properties. For example Building Blocks -> Section Footer calls primaryLighterStill for the background and primaryLightish for the font color but unfortunately those colors are used for other areas as well. You can also use this video for reference to change specific things: https://xenforo.com/community/threads/how-to-change-almost-anything-quickly-and-easily.33239/
 

Mindzipper

Active member
#6
Ugh. yeah i know how to do this through the inspector. i was trying to avoid editing css directly. i thought it was done visually in the pallete,

My problem is one of the mod makers used @primaryLight and @PrimaryLighter for Text for some bizarre reason and on a light colored theme it's almost invisible.

So i can use the color pallete to figure out which value I want and replace it in the css.

Thanks, I thought that was the wrong way to do it. Gotcha. much easier.
 

Russ

Well-known member
#7
Ugh. yeah i know how to do this through the inspector. i was trying to avoid editing css directly. i thought it was done visually in the pallete,

My problem is one of the mod makers used @primaryLight and @PrimaryLighter for Text for some bizarre reason and on a light colored theme it's almost invisible.

So i can use the color pallete to figure out which value I want and replace it in the css.

Thanks, I thought that was the wrong way to do it. Gotcha. much easier.
Luckily with XF2 there is a better naming convention of the color properties so hopefully developers will pick from the appropriate colors.

With your problem you can either:
  • Edit the style properties
  • Edit the css template the add-on comes with
  • Or use extra.css to overwrite it:
    Code:
    .sidebar .customAddon { color: @contentText;}
    as an example.