XF 1.3 Styling of text headings in Personal Preferences

[Martok]

I've been through the Style Properties in the ACP several times and I can't for the life of me find where the text headings in Personal Preferences is coming from.



It's "Messages in Threads" that I want to change the colour of.

I've currently solved this by adding this to EXTRA.css:

.xenForm h3.sectionHeader {
color: @primaryMedium;
}

which has changed it from the default of @primaryLighter.

However if it can be done 'properly' using one of the settings in Style Properties then I'd prefer to do it that way.

 

[Chris D]

It's:

@property "textHeading";

 

[Amaury]

It's:

@property "textHeading";

So that's what that property controls. I've been wondering about this myself for the opposite reason. There are still some style properties that I don't know what they control.

 

[Martok]

It's:

@property "textHeading";

I found the @textHeading property. However, when you inspect the CSS on that page, that property has been overridden by this:

.larger.textHeading, .xenForm .sectionHeader {
color: #a5cae4;
font-size: 11pt;
margin-bottom: 6px;
}

I couldn't see anywhere in Style Properties where I could change this.

 

[Chris D]

Yes, you're right.



Those properties don't come from Style Properties. So overriding it with CSS is the way forward on this one.

 

[Russ]

I found the @textHeading property. However, when you inspect the CSS on that page, that property has been overridden by this:

.larger.textHeading, .xenForm .sectionHeader {
color: #a5cae4;
font-size: 11pt;
margin-bottom: 6px;
}

I couldn't see anywhere in Style Properties where I could change this.

So it's good you use inspector , next simply search the templates; sometimes you'll need to shorten it:

Searching for this won't find anything
.larger.textHeading, .xenForm .sectionHeader

Try searching for just .xenForm .sectionHeader

Two results pop up, open form.css, search for the entire snippet: .larger.textHeading, .xenForm .sectionHeader, no results, go to the other found template xenforo_sections.css: search for the entire snippet and it's found:

.larger.textHeading,
.xenForm .sectionHeader
{
   color: @primaryLighter;
   font-size: 11pt;
   margin-bottom: 6px;
}

Since there's not a @property "textHeading"; or another property name surrounding the CSS there it means it's not controlled by the style properties(aside from the color).

For example... if you search for

.primaryContent in the same template, you'll notice it's surrounded by the property tag, which you can use the XenForo admin search to find the related style property.

Sorry if you were aware but this is an easy way to determine if something is controlled via the style properties.

 

[Martok]

Yes, you're right.

View attachment 71214

Those properties don't come from Style Properties. So overriding it with CSS is the way forward on this one.

Thanks, I'm glad I wasn't just overlooking it somewhere. I'm surprised that there isn't a property to control this.

As I have said, I've already altered it through EXTRA.css so it's now sorted.

@Russ thanks for this, very useful and I didn't know about this. It'll help me in the future.