Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Advanced Profile Styling, Templating and Custom Fields
cheat-master30's Avatar
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
Show Printable Version Email this Page Subscription
cheat-master30 cheat-master30 is offline 07-13-2007, 10:00 PM

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.
Reply With Quote
  #2  
Old 07-15-2007, 10:48 PM
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Posts: 1,715
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Well, it finally got posted as an article.
Reply With Quote
  #3  
Old 10-26-2009, 10:17 PM
Zaiaku's Avatar
Zaiaku Zaiaku is offline
 
Join Date: Jul 2007
Location: 3rd Level of Hell
Posts: 502
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I keep forgetting how to do this. Need to go ahead and subscribe to this o atleast bookmark it.
Reply With Quote
  #4  
Old 10-28-2009, 08:34 AM
ProFifaLeagues's Avatar
ProFifaLeagues ProFifaLeagues is offline
 
Join Date: Aug 2009
Location: Uk
Posts: 1,191
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Superb write up m8!!!!
Reply With Quote
Reply


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

Forum Jump


All times are GMT. The time now is 01:53 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.08413 seconds
  • Memory Usage 2,248KB
  • Queries Executed 20 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (4)post_thanks_box
  • (4)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (4)post_thanks_postbit_info
  • (3)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete