Can I Change XenForo Header (H1, H2, H3) Colors?

  • Thread starter EmeraldHike
  • Start date
EmeraldHike

EmeraldHike

New Member
Joined
May 10, 2021
Messages
10
Points
1
  • #1
I have been all through the Appearance > Style Properties in my XenForo admin panel and I can't find anywhere to change just header colors. When I write posts in the forum, I use the heading options found in the editor. I believe those headings translate into H3 headings in the HTML code. I've already changed the link and text colors, but I don't want the headings to be the same color. Can I change just those headings to be something different?
 
15Katey

15Katey

New Member
Joined
May 10, 2021
Messages
10
Points
1
  • #2
You can totally customize the heading tags in your forum. I'll tell you how to do it below. First though, right-click on this page and click the View Page Source option. Then, do a search for the title of this thread in the code. This is what you'll find:

<h1 class="p-title-value">Can I Change XenForo Header (H1, H2, H3) Colors?</h1>

As you can see, the title uses an H1 element. With the XenForo system, you can style many elements very easily.

To do so, you'll need to first find out what element you'd like to style. In your post, you mentioned that you like to use the headings option here in the editor. I'll go ahead and write a sample heading so I can search the code to see its element.

How to Change XenForo Heading Colors​


Okay, we can see that it uses the H3 heading. Take a look:

<h3>How to Change XenForo Heading Colors</h3>

To style that particular heading and other headings, browse to the Appearance > Templates areas in your administration panel. Then, either scroll to or do a filter for the extra.less template. Inside that template, add the following code:

/* CHANGE HEADER COLORS */ h1 { color: rgb(120, 120, 120); } h2 { color: rgb(120, 120, 120); } h3 { color: rgb(120, 120, 120); } /* CHANGE HEADER COLORS */

I always add comments around my modifications because I like to modify a lot of things and comments keep all of that orderly. Also, the color I gave you in the example is a gray (120,120,120). You'll need to set your own RGB values for the colors you desire. And obviously, if you've got H4 or higher headings, simply add them to the list. When you're done, save the template and then go to your website and refresh a page that uses headings. You should see them newly colored!
 
Last edited:
Can I Change XenForo Header (H1, H2, H3) Colors? was posted on 05-10-2021 by EmeraldHike in the XenForo forum.
Similar threads

Similar threads

Search

Looking for an all-around awesome forum? Check out IndyFor!
Top