Question: Can I change XenForo heading (H1, H2, H3) colors? If so, how? 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?
Answer:
You can totally customize the heading tags in your forum. I’ll tell you how to do it below. First though, I’ll right-click on a demo page and click the View Page Source option. Then, I’ll do a search for the title of the thread in the code. This is what I’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!
Leave a Reply