Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
How to Align Titles for Categories and Forums (and other formatting)
cheat-master30
Join Date: Mar 2007
Posts: 1,715

Favourite Quotes: In the last moments of the finale of the finale when relief leads to neglience that begets rashness... That is when the comeback that faltered comes back and beats you - Fawful

Information Classified
by cheat-master30 cheat-master30 is offline 02 Jun 2008

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:

News And Announcements
Click here to view the latest topics
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:

leftalignedcategorytitles.jpg

After:

centrealignedcategories.jpg

Chart of what refers to what

annotatedvBulletin.jpg

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:

http://www.vbulletin.org/forum/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.
Views: 4024
Reply With Quote
Comments
  #2  
Old 03 Jun 2008, 12:50
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Real name: Joe Velez
helpful article - thank you
__________________
Former vBulletin.org Staff Member

Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web


If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
  #3  
Old 03 Jun 2008, 15:05
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Real name: cheat-master30
Thanks. I also hope the full CSS labelling diagram helps some people.
__________________
Proud vBulletin supporter (cheat-master30 at official forum)
DS Ultimate- A Great Nintendo DS forum-
My Nintendo DS forum covering Mario Kart DS, Super Mario 64 DS and the like. Powered by the amazing vBulletin 3.7 software.
Reply With Quote
  #4  
Old 08 Jun 2008, 21:07
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Real name: cheat-master30
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?
__________________
Proud vBulletin supporter (cheat-master30 at official forum)
DS Ultimate- A Great Nintendo DS forum-
My Nintendo DS forum covering Mario Kart DS, Super Mario 64 DS and the like. Powered by the amazing vBulletin 3.7 software.
Reply With Quote
  #5  
Old 12 Jun 2008, 21:13
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Real name: cheat-master30
Just to be nice, here's another labelled diagram, this time of menus and polls:
Attached Images
File Type: jpg menus.jpg (84.1 KB, 38 views)
__________________
Proud vBulletin supporter (cheat-master30 at official forum)
DS Ultimate- A Great Nintendo DS forum-
My Nintendo DS forum covering Mario Kart DS, Super Mario 64 DS and the like. Powered by the amazing vBulletin 3.7 software.
Reply With Quote
  #6  
Old 05 Jan 2012, 21:29
cstreater cstreater is offline
 
Join Date: May 2010
The charts you posted are extremely helpful. Thanks for doing this.
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
vBulletin Project Tools PT Color Titles by Categories PitchouneN64ngc vBulletin 3.6 Add-ons 4 01 Aug 2007 15:46



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 02:38.

Layout Options | Width: Wide Color: