Advanced Profile Styling, Templating and Custom Fields
 

If you have seen the modifications for making profiles better, and the like, or seen my profile styles for one of these modifications, you may be wondering how to create custom styles, what classes alter what with the profile and how to add various things relating to custom fields in profiles and topics to expansion. But wonder no more, as this guide will tell you how to:

• Create a user profile style which works on the Interactive Profiles modification or any other type of modification.
• And post custom fields in profiles.

How to post an image or other form of media via a profile field:

Now, the template you add this in really does not matter, but what you would post is:

<if condition="$post[fieldX]">post[fieldX]</if>

This would make the field only be visible if data is in the field. To make it visible regardless (and cause numerous errors if a video or picture is inserted from the field contents) you would instead post:

$post[field24]

without the if statement.

Now, this is all fine and well if you want to post just plain text in your profile, or any other template, and repeats data that also displays in the profile anyone, which is a bit pointless. To actually post something interesting, you may wish to try one of these:

To post an image:

WARNING: May be dangerous if you don't limit the image to a certain domain because of possibilities of dynamic images and the like.

<if condition="$post[fieldX]"><img src="post[fieldX]" /></if>

You can also use the post[fieldX] or whatever with other fields to specify image size or alternate text.

To format the text:

You would do something like wrapping bold, italic, underline or other type tags around the post[fieldX] part.

This is also how to insert profile field data in the postbit templates or the like, by using the same kind of code.

Styling Profiles

Upper Part of Profile Labelled with classes:

Attachment 66967

Middle section of profile labelled:

Attachment 66969

Lower section of profile labelled:

Attachment 66968

Important Tips for Custom Profile CSS Styles

1. You should ALWAYS specify the font and background colour for both the body tag and page section. Why? Because otherwise the other will default to the usual style and will often horribly clash with the custom style you are trying to implement.
2. The part of the page which has the options to Erase Customisation or Supress Customisation is of class vbmenu_control so if you style that class, it will also effect the text at the top of the profile! This is important to remember, as I have found that you could accidentally make these options totally invisible.
3. You should keep colours at most below 5 different colours/tones. Too much makes the profile practically rainbow coloured.
4. Make sure always that you specify colours and background colours for the page and body sections that are different from each other because the copyright is also within these classes, and must not be made invisible because of the vBulletin license.

List of classes and what they refer to

• alt1- Refers to top panel near breadcrumbs, table behind mood changer option (if that mod has been applied), the part which has your signature, the part which has your profile picture, the background behind the friends list in profile with Interactive Profiles modification, the part where it shows the links for comments 'Show results 11 to 20' upwards, the actual comment text.
• alt2- Refers to the part where it says 'Welcome [your username], the part with your usertitle, username and reputation above the signature area, the table behind the videos in profile (with that modification applied), the part directly behind the member avatars on your visible friends list (Interactive Profiles mod only), the area where it says 'showing results 1-10', the part of the comment block with each commenter's avatar.
• page- Most of the page
• vbmenu_control- most of the navbar at top of profile, buttons to erase or suppress customisation (Interactive Profiles only), the part near comments saying 'page 1 of 4'.
• thead- Part with the 'Change Mood' title (Mood Manager used only), heading sections on menu control dropdowns, blocks saying 'signature', comment number and date section, 'Rate this Menu' text background.
• tcat- Headings saying 'View Profile: [username], 'Forum Info', 'Contact Info', 'Additional Information', 'Group Memberships', 'Favourite Video (if video in profile mod has been added)', '[username's] Profile Picture', 'Show all Friends' and the part showing their name above their profile comment.
• panel- Area behind most profile information.
• panelsurround- The border around all areas with the class 'panel'.
• fielset- Area actually around certain information such as Instant Messaging icons.
• navbar- This is actually referencing the breadcrumb section with links up forum levels.
• tfoot- The area with links to the Admin CP, Mod CP, Contact Us page and Forum Home Page as well as the area with the quick style selecter.
• smallfont- A lot of the text.

I hope this was helpful, and you learnt something from all this.

Well, it finally got posted as an article.

I keep forgetting how to do this. Need to go ahead and subscribe to this o atleast bookmark it.

Superb write up m8!!!!