 |
|
|
Article Options |
|
Style References for vBulletin 4.x
 TheLastSuperman
Join Date: Sep 2008
Posts: 5,835
Hey vb.org members and coders! Not much to say except I have a beautiful wife, three fantastic kids, and I develop Websites and Forums for a living 40+ hours a week. North Carolina
by
02 Jan 2011
Rating:
 (16 votes
- 4.69 average) vBulletin utilizes files and templates to render it's pages. As an administrator of your site you have access to the "Style Manager" which allows you to customize nearly every aspect of your style including the templates, css, and stylevars! *Please keep in mind not everything related to your style in terms of CSS has a stylevar, you could be required to add in custom css if your going beyond the default style and or functionality of vBulletin. Some useful links:
Now with all great things come some conditions am I right? Basically here's what you need to know in short... vBulletin comes with a default style, it's nice and subtle... why is it not popping or cutting edge? Well that's your perspective, you may think it's not up to par others love it, some want a light style and others a dark style and so forth. The default style can be customized or you can create your own new styles or even import free or paid styles into your site. One thing to bear in mind as with anything you customize sometimes additional maintenance is required, now what does that mean? It means if you heavily customize your sites style there is a chance when you upgrade that templates will not merge correctly... there's is a comparison tool built in but do not, I repeat do not assume things will always go smoothly - on some occasions they do and some they don't for a number of reasons and/or factors etc however the number one reason would be you chose to customize so don't become upset if your required to work on it every now and then ok? Overall what we need to realize is how it works, how we can customize it and then we have control! Displaying the forum page, the templates are in this order from top to bottom:
Now that's a basic short version, as you can see in the images below there's more but where? Well the black numbered items in the list above are usually the constants meaning they are on all pages, the royal blue colored item is the one that interchanges if you will. So another way to read it could be:
Now for those of you that have already delved into the style manager and the new stylevars system in vbulletin 4 you might be more familiar with this more complex breakdown:
Now I did say more complex and as you can see I mentioned the showthread template wraps the postbit template right? Well of course but how? vBulletin can call a template via a variable, so in the showthread template it calls the postbit template with one simple snippet of code... you can also call forth variables that display information and additionally you can also utilize template conditionals to show or hide data and present it in various ways within your sites templates i.e. style. Now let's do a quick run-through of some of the templates we listed above, please see my notes above each image with color coded references. Header The header houses your logo, upper (toplinks) links for a member i.e. Notifications, Settings, and more. To change your logo, you have two options:
 Navbar The navbar houses your navbar tabs, their sub-links and menus, plus the breadcrumbs i.e. top navigation. To edit your navbar template:
 Forum Home (Forumhome) The forumhome template displays your categories, forums, and sub-forums depending on your preferences chosen in AdminCP > Settings > Options.
 Threadbit (Showing list of threads etc) The threadbit template houses the list of all threads within a forum, if there are sub-forums they will be shown in a forumhome "forum" style above the list of threads.
 Showthread/Postbit (Showing list of posts etc) The showthread template houses the postbit template so basically the postbit or posbit_legacy templates are called from the middle of the showthread template then a thread is viewed with all posts shown. The showthread has controls above and below the postbit within it's own respective template. There are two distinctive templates to choose from in regards to how your posts display. To access the setting for this and change go to: AdminCP > Settings > Options > Style & Language Settings Now look for: Use Legacy (Vertical) Postbit Template and please note the description;
 Footer The template template houses your style and language drop-down's or some call them selectors and your footer links. In addition it also houses the code for the scripts related to each of those functions.
 Now that you have viewed a few of the templates and corresponding images and labels it should be easier to ask for assistance on the forums. If your ever unsure of the name for something, anything related to the styling of vBulletin refer to this guide and post new questions below, if they are indeed style related and we can offer some tips I'll add them to the guide  .*I do plan on expanding this into specific breakdowns for each forum template and how to customize each however in multiple threads as I feel one long post will become confusing over time. The following members like this post: DevOne5555, AttalaEA, fxwoody, Juggernaut, eTiKeT™ and 18 others.
Last edited by TheLastSuperman; 20 Mar 2014 at 00:43.. Reason: Added images in as attachments. 1.4.2010 - Added Calories Mod http://www.vbulletin.org/forum/showthread.php?t=246232 |
|
Views: 48534
|
| Comments |
|
#2
03 Jan 2011, 17:46
|
||||
|
||||
|
Great article Mike!
__________________
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! No members have liked this post.
|
|
#3
03 Jan 2011, 17:54
|
||||
|
||||
|
nice writeup!
__________________
No members have liked this post.
|
|
#4
03 Jan 2011, 18:03
|
||||
|
||||
Originally Posted by Princeton
TY and due in part to your great tips before it was published 
.
Originally Posted by Brandon Sheley
We all try! Did you see DJ's new article here: http://www.vbulletin.org/forum/showthread.php?t=256394
We're making waves come on in for a swim  .
__________________
Daddy Does Dios and Figs! *I no longer provide vBulletin Services (No PM's, please). Search - Use the search feature to find similar issues/answers. Information - Include screenshots, copy/pasted error codes, url etc. Fixed - Please return to your thread/post and let us know how it was fixed! Thanks - For participating! Click the "Like" ♥ on a post if someone helped you! No members have liked this post.
|
|
#5
06 Jan 2011, 01:54
|
|||
|
|||
|
This is a very very informative article! I am sure it will help a lot of people out!
No members have liked this post.
|
|
#6
06 Jan 2011, 05:26
|
||||
|
||||
|
Originally Posted by KevinL
Hey KevinL, I know you
I hope it is, remember you can suggest some info and I'll add it in plus very soon I'll have links to articles that will go in-depth for each template .
__________________
Daddy Does Dios and Figs! *I no longer provide vBulletin Services (No PM's, please). Search - Use the search feature to find similar issues/answers. Information - Include screenshots, copy/pasted error codes, url etc. Fixed - Please return to your thread/post and let us know how it was fixed! Thanks - For participating! Click the "Like" ♥ on a post if someone helped you! No members have liked this post.
|
|
#7
06 Jan 2011, 09:17
|
||||
|
||||
|
Great article this will help everyone ..............
--------------- Added 06 Jan 2011 at 13:28 --------------- can anyone tell me how to change the background of the forum .... ?? No members have liked this post.
Last edited by fluidswork; 06 Jan 2011 at 13:28. Reason: Auto-Merged DoublePost
|
|
#8
07 Jan 2011, 00:23
|
||||
|
||||
|
Originally Posted by fluidswork
AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" from the drop-down to the right of your style.
Now look for Common and under that category header you'll see a list of commons stylevars many parts of your site use, scroll down that list and look for "doc_background" and click it, now change the background color OR add in an image as well! OR You can also overwrite this entirely by pasting your own body css definitions in the additional.css template if you wish, example:
So in essence you have two ways, the way vBulletin "expects" you to change/update it using stylevars OR by being sneaky with CSS and fyi that was simply example css there are a few different ways you can make it achieve what you want in terms of css .
__________________
Daddy Does Dios and Figs! *I no longer provide vBulletin Services (No PM's, please). Search - Use the search feature to find similar issues/answers. Information - Include screenshots, copy/pasted error codes, url etc. Fixed - Please return to your thread/post and let us know how it was fixed! Thanks - For participating! Click the "Like" ♥ on a post if someone helped you! No members have liked this post.
|
||||
|
#9
08 Jan 2011, 07:19
|
||||
|
||||
|
Thanks for help ................
No members have liked this post.
|
|
#10
10 Jan 2011, 11:46
|
|||
|
|||
|
Very Nice Article
 Thanks TheLastSuperman No members have liked this post.
|
|
#11
12 Jan 2011, 19:36
|
||||
|
||||
|
Originally Posted by fluidswork
Originally Posted by Gn_Snake
No problem you two and if you have any questions don't be afraid to post
.
__________________
Daddy Does Dios and Figs! *I no longer provide vBulletin Services (No PM's, please). Search - Use the search feature to find similar issues/answers. Information - Include screenshots, copy/pasted error codes, url etc. Fixed - Please return to your thread/post and let us know how it was fixed! Thanks - For participating! Click the "Like" ♥ on a post if someone helped you! No members have liked this post.
|
|
#12
18 Feb 2011, 12:21
|
||||
|
||||
|
Hello TheLastSuperman,
How are you ? I have some question about the header part here are they .... - first is there any way to increase header height ? - how can i bring the logo to middle ..... - how to bring some space above the header as i want to place an advertisement there .... and last but not the lest can you tell me just the stylevars that are used in this image below to make it look something like that .... as if you can tell me then i will get the complete knowledge about how to edit the header part .....  I hope i didn't disturbed you as if you can help me out lil bit .... Thanks No members have liked this post.
|
|
#13
21 Feb 2011, 19:59
|
|||
|
|||
|
This is a fantastic article and will help me immensely.
No members have liked this post.
|
|
#14
22 Feb 2011, 01:35
|
||||
|
||||
|
Originally Posted by fluidswork
Header height - Edit vbulletin-chrome.css and find:
Change min-height:35px; to the value you want OR add in a height:50px; but imo I would use min-height .Header to the middle - You can find that info here: http://www.vbulletin.com/forum/showt...enter-the-Logo Space above the header - You can add in a new DIV or simply increase the height I would think should not be too hard once you start tinkering .--------------- Added 22 Feb 2011 at 01:37 ---------------
Originally Posted by bearcub
Thanks and glad it's useful
 .
__________________
Daddy Does Dios and Figs! *I no longer provide vBulletin Services (No PM's, please). Search - Use the search feature to find similar issues/answers. Information - Include screenshots, copy/pasted error codes, url etc. Fixed - Please return to your thread/post and let us know how it was fixed! Thanks - For participating! Click the "Like" ♥ on a post if someone helped you! No members have liked this post.
Last edited by TheLastSuperman; 22 Feb 2011 at 01:37. Reason: Auto-Merged DoublePost
|
||||
|
#15
22 Feb 2011, 03:19
|
||||
|
||||
|
Thanks TheLastSuperman..... it helped me a lot in understanding how to resize the header ....
No members have liked this post.
|
|
Similar Article
|
||||
| Article | Author | Type | Replies | Last Post |
| 1923Turk DefRed Style (based on vB Default Style) | staff80 | vBulletin 3.6 Styles | 7 | 21 Jan 2008 03:04 |
«
Previous Article
|
Next Article
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Article Options | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 06:26.
Powered by vBulletin® Version 3.8.14
Copyright © 2023, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright © 2023, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Design by Princeton
Copyright ©2001 - , vbulletin.org. All rights reserved.
vBulletin® is a registered trademark. 