How to Align Titles for Categories and Forums (and other formatting)
 

Since it has been requested in terms of how to align or format various things on the forum home page of a vBulletin forum, including how to centre the text in the category titles, this article is a hopefully useful solution which is somewhat practical in it's application.

Understanding what CSS titles each element is given in the CSS:

As can be seen on the below diagram, there are a lot of possible things to change on a typical vBulletin home page, and they are:

Main Body of page: Refers to everything outside the main table for a vBulletin forum, and the general page display for just about any document. To edit the properties of this, you would go to the section like this in the code:

body{
}

Or the section called 'Body' in the Style Manager options.

Page: The class called this refers to the main table as a whole, and should normally be changed in terms of colours and such like.

Forum Categories:

The category headers are referred to as .tcat in the CSS, and are of said class. This refers to the section on a forum which says the category name above the list of forums in that category. At vBulletin.org, this would refer to this section:

To centre or format this section, you'd use these kinds of CSS properties:

text-align: Controls alignment of the text in the category titles.

font-style: Italics and such like.

font-weight: Bold and various shades of bold text.

text-decoration: More text styles like underline, overline and blinking text.

As well as things like background properties for things like what image is used in the background or the background colour. Or the color property for the text colour.

Table Headers come under the thead class in the CSS, and can be formatted by applying properties and styles to this class in the code or style manager.

The forum name and description section comes under alt1 in the CSS, as does the forum thread count, forum notice text, forum statistics text, who's online and todays birthdays.

The last post and login area, as well as forum, birthday, users online and statistics icons come under the alt2 class in the text.

To make it a bit more confusing, the navbar in the CSS does not refer to the forum navigation bar which says 'calendar' or 'members list', but the breadcrumbs linking to each section of the forum as you go from home page to forum to topic. This navbar is nested within the alt1 class in the CSS.

The area with links to the contact form, archive, site home page and more as well as the forum leaders page links and some other sections come under tfoot in the CSS.

And the section with headings saying forum, last post, etc comes under thead in the CSS.

How to Apply Certain Formatting to a section:

Now you know what sections are referred to as what, here are some examples of how to edit the display of a section:

Centering Category Titles

Simply add this to the tcat class or Category Strips section in the Style Manager:

text-align: center;

Before:

Attachment 81672

After:

Attachment 81673

Chart of what refers to what

Attachment 81671

Other Related Stuff:

Blog CSS Properties (home page): tcat is for the part saying 'Blogs by...', recent comments, posts, options, blog entries search, blog statistics and blog archive are formatted by the property of thead, posted in, find more and advanced search have class of alt2 and anything else is of class alt1.

Search Page CSS Properties (main page): alt1 (most things), tcat (tag search and search main headings), panelsurround, panel and fieldset.

Calendar CSS Properties: Uses alt1, 2, tcat for main category headings and thead for some others as well as vbmenu_control.

Guide to Profile Styling:

https://vborg.vbsupport.ru/showthread.php?t=152255

Hope this helps some people style the various sections in their vBulletin forums easier.

Thanks to

Jelsoft for making vBulletin, and the staff of vBulletin.org

Firebug for helping with identification of what section comes under what CSS class.

HTMLDog for HTML and CSS references.

helpful article - thank you :up:

Thanks. I also hope the full CSS labelling diagram helps some people.

So, anyone got any improvements to this article or comments? Like an annotated image of the Postbit templates with references to the CSS IDs and classes?

Just to be nice, here's another labelled diagram, this time of menus and polls:

The charts you posted are extremely helpful. Thanks for doing this.