[TUTORIAL] Add H1 Tags to Your Forum and Threads

H1, H2 and H3 tags can help search engines determine the content of a webpage.

So this modification is important for your site. It also is good for your members, as it gives them a description of the thread that they are perusing.

As always, you should back up your database before making any changes.


Go to your Admin CP --> Styles & templates --> style manager --> in the style on the right, in the dropdown menu that says All style options, click on Edit Templates. Scroll to FORUMDISPLAY templates, click, then find the template that says FORUM DISPLAY.

Now, FIND:

$navbarBelow it add:

<br />
<center>
<h1 class="myh1">$foruminfo[title_clean]</h1>
<h2 class="myh2">$foruminfo[description]</h2>
</center>
<br />Save

This adds the Forum Name and the Forum Description just below the navbar on your forums.


Now scroll down to your Show Thread Templates. Double click, then find SHOWTHREAD.
In your SHOWTHREAD template find:
$navbarBelow it add:

<br />
<center>
<h1 class="myh1">$thread[title]</h1>
<h2 class="myh2">$foruminfo[title_clean]</h2>
</center>
<br />This places the Thread Title and the Forum Name just below the navbar on your threads.


Now, you can control the size and appearance of the titles and descriptions via your CSS. Here's how:

Go back to the Style Manager. In the same style's drop down menu, click on Main CSS. Scroll down to the botton to Additional CSS Definitions. In the bottom box, add this:

/* ***** H1 Tags ***** */
h1.myh1 {font-family: Arial; font-size: 20px;
color: #000000; font-weight: bold;}

h2.myh2 {font-family: Arial; font-size: 16px;
color: #000000; font-weight: bold;}As you can see, you can change the font, font size, color, and whether its bold or not by simply changing the variables (if you don't want the title and description to be bold, simply replace the word bold in the code above with the word normal).


TIP: If you already have forum descriptions enabled on your forum (they appear in the same area as this, but in a long horizontal, you'll need to disable it by going to vBulletin Options --> Forum Display Options --> Enable Forum Description. Set this to OFF


Enjoy!




*credit Joeychgo @ vBulletin-FAQ*

thnxxxxxx

This was easy to follow but the large text on two lines takes up a lot of space under the navbar.

Why not just modify the style class on the Forum Description that vBulletin uses in their Forum Display options?

For me having it all on one line makes more sense and if it was tagged as H1 it would accomplish the same thing.

You can change the size of the text in the code for the Additional CSS Definitions, as per the instructions above ;)

As I have got something already written in the Additional CSS Definitions box
can I just add this code to the bottom of existing code?

Yes you can. Just move down a couple of spaces.

Yes you can. Just move down a couple of spaces.

Hello Peggy,

At the bottom of the CSS main page there is 2 boxes, in your instructions it says to add it to the bottom box.

Next to the above box it says this;


Advanced Users:
If you would like to add any additional CSS for use in your custom templates, any text entered here will be included at the end of the <style> tag

Do I need to be concerned with this?

The Title of the bottom box is; (Customized in this Style) Is this the right pace to add it?

Thanks
Ryan

No you do not need to be concerned with that. I generall advise people not to add anything to the top box, as this is where default vB additional css is stored.

The bottom box, however, is ours to use. This is the box you should place all additional css in. I'm attaching a screenshot to show you what I have. It's small, sorry, but hopefully you can see it well enough.

Thanks Peggy,

I understand now, thanks for adding the sceenshot