Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
Reload this Page Style References for vBulletin 4.x
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 5 of 8 « First 34 5 67 Last »
 
Thread Tools
Style References for vBulletin 4.x
TheLastSuperman's Avatar
TheLastSuperman
Senior Member
Join Date: Sep 2008
Posts: 5,844

Hey vb.org members and coders! Not much to say except I have a beautiful wife, three fantastic kids

North Carolina
Show Printable Version Email this Page Subscription
TheLastSuperman TheLastSuperman is offline 01-01-2011, 10:00 PM
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:
  1. Header
  2. Navbar
  3. Forumhome
  4. Footer

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:
  1. Header
  2. Navbar
  3. Forumhome OR Forumdisplay OR Showthread etc etc.
  4. Footer

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:
  1. Header
  2. Headinclude
  3. headinclude_bottom
  4. Navbar
  5. Showthread *this wraps the postbit template and houses controls above and below.
  6. postbit
  7. Footer

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:
Quote:
Easy = Overwrite the file /images/misc/vbulletin4_logo.png with the new logo simply name it the same i.e. vbulletin4_logo.png and upload to your images/misc directory.
Best = Edit the style variable (StyleVar) for it, AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" in the drop-down menu. > *Now look for ImagePaths then under hit edit "titleimage" and provide the new URL to your custom logo.
To change the colors and effects of your toplinks:
Quote:
Edit the style variables per the above and find: Header and you'll see the stylevars below it with "toplinks" in front of the variables you edit to change .
To edit your header template:
Quote:
AdminCP > Styles & Templates > Style Manager > *Select "Edit Templates" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find header and double-click to edit.
To edit most of the CSS and colors related to the header:
Quote:
AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find Header and view each stylevar to see a simple description of what it does - temporarily edit to note changes.
  • Shown in Red(1) is the header area.
  • Shown in Blue(2) is the logo or "title Image".
  • Shown in Orange(3) are the toplinks.





Navbar

The navbar houses your navbar tabs, their sub-links and menus, plus the breadcrumbs i.e. top navigation.

To edit your navbar template:
Quote:
AdminCP > Styles & Templates > Style Manager > *Select "Edit Templates" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find Navigation and Breadcrumbs Templates and double-click to expand that "family" of templates, now find "navbar" and double-click to edit.
To edit most of the CSS and colors related to the header:
Quote:
AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find Navbar and view each stylevar to see a simple description of what it does - temporarily edit to note changes.
  • Shown in Red(1) is the navbar area.
  • Shown in Green(2) is a standard navtab. Some useful articles (guides) related to the navbar on how to add a new navtab, a drop-down navtab, and how to add in sub-menus etc can be found here.
  • Shown in Yellow(3) is a "selected" navtab or "navtab-selected" as you can see in the image.
  • Shown in Blue(4) is the navtab-selected sub-menu/sub-links and any drop-down menus as well.
  • Shown in Grey(5) is the navbar breadcrumbs or "upper navigation" as some call it. *If you wish to have this navigation duplicated and at the bottom of your site please see here.
  • Shown in Orange(6) is the Global search, you can swap out the vBulletin default search for Sphinx or even replace it with a Google Custom search.





Forum Home (Forumhome)

The forumhome template displays your categories, forums, and sub-forums depending on your preferences chosen in AdminCP > Settings > Options.
  • Shown in Red(1) is the forumhome_forumbit family of templates that make up all you see within the red box, you can customize these via editing templates and through stylevars found in the StyleVars under Forums.
  • Shown in Purple(2) is the forumhome_markread_script, this allows members to easily mark all the forums as read if desired i.e. they don't interact in a certain forum so to mark them all as read in order to view new posts in their desired forum etc etc.
  • Shown in Grey(3) is the Whats Going On? area commonly referred to as wgo, this can be customized via the CSS templates and also by editing the FORUMHOME template directly, some modifications can alter and display information differently, show recent visitors, show search "spiders" browsing and much more!
  • Shown in Yellow(4) is the forum sidebar and each "block" has it's own template that is used to display it within the sidebar area on the forumhome page.
    Quote:
    You can enable the sidebar by going to AdminCP > Settings > Options > Forum Sidebar and Block Options. After you enable simply create the blocks you desire and don't forget to reload the block types so new sidebar "blocks" display properly. To access them easily at any time after enabling the forum sidebar go to AdminCP > Forums & Moderators > Forum Blocks Manager. *This is not the same as the "sidebar" or "blocks" you see on the CMS i.e. Home page if you have the suite, those are referred to as a Widget and are enabled and implemented in a slightly different way!






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.
  • Shown in Red(1) is the main part of the threadbit template.
  • Shown in Green(2) is the threadbit_alt_background or "stats".
  • Shown in Orange(3) is the lastpost part of the threadbit template.




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;
Quote:
If you prefer the old-style postbit, using two vertical columns rather than the new horizontal layout, you can switch back to using that template with this switch.

Please note that if you enable this option and wish to customize the template, you should edit the 'postbit_legacy' template rather than the 'postbit'.
So using the postbit template your posts will appear as they do on vbulletin.org with the username and info running horizontal along the top of posts where as using the postbit_legacy template will display your posts within a box to the left of each post as you see here currently on vbulletin.com.
  • Shown in Red(1) are the parts of the postbit template.
  • Shown in Blue(2) are the parts of showthread and as you can see it also shows a reference of how it's above and below the postbit template.






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.
  • Shown in Red(1) are the parts of the footer template.
  • Shown in Royal Blue(2) are the footer links or as seen in template and css, footer_links.
  • Shown in Yellow(3) is the style selector, if you have multiple languages available for your vBulletin forum another drop down will also appear for you to choose the correct language, very similar to the style selector.
  • Shown in Green(4) is the footer time.
  • Shown in Purple(5) is the copyright.



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.
Attached Images
File Type: png Header.png (71.1 KB, 0 views)
File Type: png Navbar.png (203.2 KB, 0 views)
File Type: jpg ForumHome.jpg (99.4 KB, 0 views)
File Type: png ThreadBit.png (185.2 KB, 0 views)
File Type: jpg ShowThreadPostbit.jpg (89.3 KB, 0 views)
File Type: png Footer.png (73.2 KB, 0 views)
Reply With Quote
  #42  
Old 10-18-2011, 03:27 PM
flogs flogs is offline
 
Join Date: Sep 2003
Posts: 2
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi

On this style below I cant get a simple border around the header or navbar using the style vars any help?


http://www.lostoppos.co.uk/testvb/
Attached Images
File Type: jpg untitled-5.jpg (29.5 KB, 0 views)
Reply With Quote
  #43  
Old 10-19-2011, 04:09 AM
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
Senior Member
  
Join Date: Sep 2008
Location: North Carolina
Posts: 5,844
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by flogs View Post
Hi

On this style below I cant get a simple border around the header or navbar using the style vars any help?


http://www.lostoppos.co.uk/testvb/
Sure you can try this...

Edit vbulletin-chrome.css and find:

Code:
.above_body {
	background:{vb:stylevar header_background};
	_background-image: none;
	margin: {vb:stylevar bodyheader_margin};
	padding: {vb:stylevar header_padding};
	-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
	-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}
Replace with :

Code:
.above_body {
	background:{vb:stylevar header_background};
	_background-image: none;
	border-{vb:stylevar right}: 1px solid #151515;
	border-bottom: 1px solid #151515;
	border-{vb:stylevar left}: 1px solid #151515;
	margin: {vb:stylevar bodyheader_margin};
	padding: {vb:stylevar header_padding};
	-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
	-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}
Change the #151515 to suit . *We shouldn't simply use border: value etc; because most imo would not want a top border on that area.
Reply With Quote
  #44  
Old 10-19-2011, 05:53 AM
flogs flogs is offline
 
Join Date: Sep 2003
Posts: 2
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thats perfect.

Thank you for your help.
Reply With Quote
Благодарность от:
TheLastSuperman
  #45  
Old 01-21-2012, 12:11 AM
20paws4awd 20paws4awd is offline
 
Join Date: Jan 2008
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I have managed to change something that u cant seem to recitify.i have revereted all file taht i can find that have been altered (wasnt much) and it still doing this even after clearning cache.

It only does it to threads that have attachments



and it seems to have affected the boxes when i do a "New Posts" search.

Reply With Quote
  #46  
Old 01-21-2012, 06:41 AM
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
Senior Member
  
Join Date: Sep 2008
Location: North Carolina
Posts: 5,844
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by 20paws4awd View Post
I have managed to change something that u cant seem to recitify.i have revereted all file taht i can find that have been altered (wasnt much) and it still doing this even after clearning cache.

It only does it to threads that have attachments

Image*

and it seems to have affected the boxes when i do a "New Posts" search.

Image*
Post a link to your site and I'll have a look...
Reply With Quote
  #47  
Old 02-16-2012, 01:18 PM
Disco_Dave's Avatar
Disco_Dave Disco_Dave is offline
 
Join Date: May 2011
Location: Belfast
Posts: 586
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave
Attached Images
File Type: jpg nirc1.jpg (19.1 KB, 0 views)
Reply With Quote
  #48  
Old 02-16-2012, 08:58 PM
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
Senior Member
  
Join Date: Sep 2008
Location: North Carolina
Posts: 5,844
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by tricksodave View Post
Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave
I'm assuming your speaking about replacing the bottom "dull" image with what's shown at the top i.e. the nicer blue with rounded corners? Of that's the case you will need to modify some templates and css to show it properly but let me know.
Reply With Quote
  #49  
Old 02-16-2012, 09:25 PM
Disco_Dave's Avatar
Disco_Dave Disco_Dave is offline
 
Join Date: May 2011
Location: Belfast
Posts: 586
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi

Thanks for the reply, I would like to add the fish logo plus the rounded corners. I couldn't get the colour to be the same for some reason using the stylevars.

Is it possible to use the original css templates for this? We have no web designer now he's gone AWOL.

Dave
Reply With Quote
  #50  
Old 03-06-2012, 02:45 PM
Disco_Dave's Avatar
Disco_Dave Disco_Dave is offline
 
Join Date: May 2011
Location: Belfast
Posts: 586
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by tricksodave View Post
Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave
Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.

Regards,
Dave
Reply With Quote
  #51  
Old 03-10-2012, 06:59 PM
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
Senior Member
  
Join Date: Sep 2008
Location: North Carolina
Posts: 5,844
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by tricksodave View Post
Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.

Regards,
Dave
Well you can try something simple i.e.

Edit additional.css and try something along the lines of:

Code:
.forumhead {
background: #1a9fda url(images/buttons/home.png) no-repeat;
}
^ Rough Example and that also removes the ability to define a image background for forumhead, meaning that using this method shown above you can't specify a alternate background i.e. a Gradient image as shown in your attachment.


Another method is editing the templates themselves that contain the forumhead <div> tags i.e.

Edit forumhome_forumbit_level1_nopost and find:

Code:
<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
	<div class="forumhead foruminfo L1 collapse">
		<h2>
			<span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
			<span class="forumthreadpost">{vb:rawphrase threads_posts}&nbsp;</span>
			<span class="forumlastpost">{vb:rawphrase last_post}</span>
		<vb:if condition="!$show['collapsable_forums']">
Add the code shown in blue:
Code:
<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
	<div class="forumhead foruminfo L1 collapse">
		<h2>
			<span class="forumimage"><img src="images/buttons/home.png" alt="{vb:raw forum.title}" /></span>
			<span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
			<span class="forumthreadpost">{vb:rawphrase threads_posts}&nbsp;</span>
			<span class="forumlastpost">{vb:rawphrase last_post}</span>
		<vb:if condition="!$show['collapsable_forums']">
Now edit additional.css and add:

Code:
.forumimage {
padding-left:5px;
}

.forumbit_nopost .forumhead .forumtitle a {
margin-left: 5px;
}
^ And that method allows you to still define a gradient image background on forumhead and also inserts your image (*Adjust the forumhead background/colors via the stylevars system respectively and swap out the filename home.png in the code shown and link directly to your small & cropped white fish image and call it a day!) .

Attached Images
File Type: png demoimageprefix.png (31.4 KB, 0 views)
Reply With Quote
Благодарность от:
Disco_Dave
Reply
Page 5 of 8 « First 34 5 67 Last »

« Previous Thread | Next Thread »
Thread Tools

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 02:14 PM.

Contact Us - Archive - Top

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.07170 seconds
  • Memory Usage 2,406KB
  • Queries Executed 26 (?)
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
  • (6)bbcode_code
  • (13)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (24)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (3)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (9)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)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_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
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete