How To Change Your vB4 Forum Style in 10 Easy Steps ? [الأرشيف]

bahattab

07-09-2010, 09:10 PM

10 easy changes you can make using StyleVars to redesign the look of your forum. This article is contributed by Fei Leung at Internet Brands.

Introduction

After installing vBulletin, you might want to make some changes to the style in order to customize the forum to match your website. You can do that through the Administration Control Panel (ACP) and the Style Variable Editor. The Style Variable Editor allows you to modify and change everything about your vBulletin, from the font color, to the pixels width separating various elements, to the background images for your header.
It might look a little intimidating at first, with all the terms and forms, but it’s really quite simple to use. To demonstrate, let me show you how I totally changed the look of my vBulletin in ten easy steps.

Pro Tip: Create a New Style
Rather then modify the default style, create a new style in the Style Manager. This way, you can keep users on the old style while you work on the new style.

Step 1: Changing the Logo

The first thing I wanted to do was get rid of the vBulletin logo. I uploaded the graphic I wanted to use into the images folder on my server:

[/URL]

Once that was done, I logged in to the ACP and navigated to the Style Manager. I clicked on the dropdown list beside the style I wanted to edit and selected the option "StyleVars". The ACP automatically took me to the Style Variation Editor. If yours doesn’t, you might want to click on the "Go" button.
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45197)

From the variable list to the left, I selected the StyleVars "titleimage" under the header "Image Paths". It’s a little over half-way down the scrolling list. In the form that appeared to the right, I entered the path for my logo and clicked the save button. This is what the result looked like:

As you can see, my logo replaced the vBulletin logo and the header automatically resized to fit around it, but the background didn’t match the one in my logo, which takes us to step 2.

Pro Tip: Create an Image Folder for your Style
Create a new folder in the image directory of your forum to house the graphics for your new style. This makes the files easier to locate just in case you need to re-upload files to get your design to look just right!

Step 2: Changing the Header Background

Now that I had my logo in place, I wanted to change the background of the header to match. I followed the same steps that I used to change the vBulletin logo, but instead of selecting the "titleimage" StyleVars, I chose the "header_background" one beneath the "Header" header of the scrolling list.
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45199)

As you noticed, the background for my logo has a color gradation from a darker blue to a lighter blue. In order to match it, I needed to upload an image file with the same height and pattern as the one in the logo. (See image to the left.) From there, it was a simple matter of entering in the location of the image in "Background Image" textbox and clicking the save button.

The result looked much better then before:

Pro Tip: Matching the Header Background Color
Even when you have a gradient as a background, it’s a good idea to set a background color to fill in all those spaces that your gradient doesn’t cover. To do this, use the eyedropper in a graphics-editing program to select the color you desire. There should be box that gives you the html code for that color. Enter it in to the “Background Color” textbox and it should give your header a cleaner look.

But I didn’t want to stop there. So, I moved on to step 3: Changing the Tab Button Background.

Step 3: Changing the Background of the Tab Bar

Although the original color scheme for the tab bar matched my header, I wanted it to pop a little more. I took a good look at it and realized that, like the background for my header, vBulletin used a repeating gradient image as well!
After uploading the gradient I wanted to use, I went back to the Style Variation Editor and selected the "navbar_tab_background" variable.

(http://www.vbulletin.com/forum/attachment.php?attachmentid=45204)

With the location of the gradient entered and saved, my navbar now looked like this:

You can stop here if you’re satisfied with how the page looks. The following steps will outline the other small tweaks you can use to further modify the look of your forum.

Pro Tip: Matching the Selected Tab to the Tab Bar
If you want the selected tab’s background to match the rest of the navbar, you’ll want to go and enter the same address for the “navbar_tab_selected_background”. You can find both of these beneath the “NavBar” header of the scrolling list.

Step 4: Changing the Background
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45205)

For me, the next step was to change the background. I wanted a darker color to emphasize the color scheme. I did this by selecting the "doc_background" from the list beneath the "Common" header. I used the trick in Step 2 to get just the right color before hitting save.

This small change made a huge difference in the whole look of the page. But, there was one small problem. The border between the navigation bar and the body of the forum was a different color. It no longer matched the background. This lead me straight to step 5.

Step 5: Changing the Forum Headers

The default color for the forum headers didn’t look bad with the color scheme of my logo, but I wanted something to match the sea theme of the forum. I selected the "forumhead_background" option from the Style Variable Editor and entered in the location for background image. You should be able to find it beneath the "Forums" header.
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45208)

One click later, I had this:

The dimensions for the image should be sized to fill the space.

Step 6: Changing the Forum Header Text Colors
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45210)

As you can see, the default font color for the forum header is too light for the background. I changed that by selecting the "forumhead_color" and "forumbits_aForum" variable beneath the "Forum" header.

After a bit of fiddling around with the color selector, I came up with this:
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45212)

Step 7: Changing the Footer

Now that I had an image for the forum header background, I wanted the footers at the bottom of the forums to match. I used the StyleVar "footer_background" located beneath the "Footer" header to switch to the image above. (The dimensions for the image should be sized to fill the space. I used a 930x45 image.)

And this is how it looks:
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45216)

Not surprisingly, the links are a little hard to see on the light background, but that was easily remedied by changing the color of the links.

Step 8: Changing the Forum Footer Link Color

In order to change the links, I needed to select the "footer_link_color" style variable from the list to the left.

After a bit of fiddling around with the color selector, I came up with this:
(http://www.vbulletin.com/forum/attachment.php?attachmentid=45218)

Step 9: Changing the Forum Background

The next bit that was bothering me was the color of the box containing the forum itself. The white washed out the beiges in the background of the forum header. So, I went in to the "body_background" variable to select a new color. I ended up choosing a softer blue that brought out the browns and whites that still contrasted with the background itself:

Step 10: Adding a Background to the Form Button Bar

(http://www.vbulletin.com/forum/attachment.php?attachmentid=45288)

I was almost done with the changes to my vBulletin. I clicked on the "Post New Thread" button on the main forum and then noticed that each form had its own footer. I checked to see whether or not I could add a background image to the form footer and found I could using the "blockfoot_background" StyleVar. (The dimensions are 750x40 pixels.)

I uploaded the image and entered the location in the "Background Image" textbox, like I did with the other graphics and clicked save. The buttons were now floating on an image of waves:

[URL="http://www.vbulletin.com/forum/attachment.php?attachmentid=45292"] (http://www.vbulletin.com/forum/attachment.php?attachmentid=45291)

And that was the last of the changes I made to my forum.

Conclusion

There’s a lot more little tweaks you can make using the StyleVars in the Style Variable Manager. The possibilities are only limited by the imagination. For a guide on what each StyleVars effects, look up the StyleVars Visual Dictionary on the site. I hope that this tutorial about how I customized my vBulletin has helped you a little in making your forum a community.

Pro Tip: Downloading and Distributing Your Style
If you want to make your style available to other users, you can download the style from your ACP.

Click on the “Download/Upload Style” link in the left navigation menu. In the download form, select the style you created from the style dropdown list. Then select the “Get customizations made in this style and all parent styles” radio button. Finally, click the download button and save the .xml file to your computer.

Remember to bundle the images for your style with the .xml before distributing it to others. An example of this would be the Wave 1.0.zip available for download on our forums.

www.vbulletin.com (http://www.vbulletin.com/forum/content.php?240-10-Easy-Steps-to-Styling-Your-Forum/view/3)