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

XF 1.3 Styling of text headings in Personal Preferences

Discussion in 'Styling and Customization Questions' started by Martok, Apr 7, 2014.

  1. Martok

    Martok Well-Known Member

    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.
  2. Chris D

    Chris D XenForo Developer Staff Member


    @property "textHeading";
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    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.
  4. Martok

    Martok Well-Known Member

    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.
  5. Chris D

    Chris D XenForo Developer Staff Member

    Yes, you're right.


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

    Russ Well-Known Member

    So it's good you use inspector :D, 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:

    .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.
    Amaury likes this.
  7. Martok

    Martok Well-Known Member

    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. :)

Share This Page