Custom Theme
What is the Custom Theme feature?
The Custom Theme feature allows you to customize the appearance of your forum using HTML and cascading stylesheets (CSS). You can change colors, fonts, backgrounds, banners, and even where elements appear on the page.
Does the Custom Theme feature let me edit HTML?
Yes, you can edit all of the HTML around your forum content, allowing you to do things like add a custom banner, footer, sidebar, or even add analytics tracking scripts, etc.
I just want to make a simple change. Can you show me how?
We can’t show you how to do everything, but we’ve included some common examples to help you get started.
Does the Custom Theme feature let me upload my own theme?
No. For security reasons, we do not allow customers to upload their own themes, or php files.
Can I use the Custom Theme feature to make minor visual changes to an existing theme?
Absolutely! You can choose edit the HTML & CSS of any theme we have available.
Can I use the Custom Theme feature to make major changes to my forum’s layout?
It really depends on your skill-level with CSS. Shifting elements around on the screen, changing heights, widths, borders, fonts, colors, backgrounds, etc is all possible with CSS.
Can I try the Custom Theme feature before I purchase it?
Yes! Go to your forum’s dashboard and click “Custom Theme” under the “Appearance” section of your side menu. You can add HTML & CSS definitions, and preview them on your forum. Note: only you will be able to see your customizations while in preview mode.
How do I upload images for use with my CSS?
You will need to upgrade to a paid plan to be able to upload images.
I messed up. How can I reset my theme’s stylesheet?
Just remove all of your custom definitions from the Custom CSS page on your dashboard, make sure the first radio is selected in the apply box, and click Apply.
Where can I get help with CSS?
We do not offer CSS support or training directly, but there are a TON of great resources on the web to get you started into learning more about HTML and CSS. There is a learning curve, but CSS is a very valuable and reusable skill.
Examples
1. Changing the menu color.
We are going to take a our existing menu bar and change it’s colors to darker shades of blue.
/* Change the background color of the menu */
#Head {
background: #3B5998;
}
/* Make the title plain white with no drop shadow */
#Head h1 a span {
color: #fff;
font-size:24px;
text-shadow: none;
}
/* Change the menu colors when they appear and are hovered over */
#Menu ul,
#Menu li.Active {
background: #3B5998;
}
#Menu a,
#Menu li.Active a {
color: #fff;
}
#Menu a:hover {
background: #5c75aa;
}
#Menu a:hover,
#Menu li.NonTab a:hover {
color: #fff !important;
}
/* Colors on numbers next to menu items */
#Menu a span,
#Menu li.Active a span,
#Menu li.Highlight a:hover span {
background: #889dc3;
color: #fff;
}
/* Change the "Go" Button on the search form to have matching colors */
#Head form input.Button {
background: #6D84B4;
color: #fff;
}
Here is the result:
2. Move the sidebar from the right to the left side.
This is actually a really easy one since these two elements are completely self-contained.
/* Move the sidebar from the right to the left side */
#Content {
float: right;
}
#Panel {
float: left;
}
Here is the result:
3. Adding a custom banner image.
Of course you want to brand your forum with your own logo. We’re going to use our vanilla logo to show you how it can be done.
/* Set the background of the title anchor as our Vanilla logo. Make sure to set the
display to block, and the height and width equal to the dimensions of the logo. This
will make it so that none of the logo is cut off. */
body #Head h1 a {
background: url('http://vanillaforums.com/applications/vfcom/design/images/vanilla_light.png') center center no-repeat;
display: block;
height: 84px;
width: 199px;
}
/* Hide the text in the title anchor so it doesn't appear on top of our logo. */
body #Head h1 a span {
display: none;
}
/* Change the padding & margins on various elements so everything lines up with the
logo nicely. */
body #Head h1 {
padding: 6px 0;
}
ul#Menu {
padding: 70px 0 0;
}
#Head {
height: auto;
}
#Head form {
margin: 65px 0 0;
}
Here is the result:
4. Adding a custom banner image (above the main menu).
If you don’t want your banner image to push the main menu over to the right, you can position it above the menu instead. Here’s how you could accomplish it.
/* Unfloat the title so the menu drops below our logo, and our logo doesn't push
the menu to the right. */
body #Head h1 {
float: none;
padding: 6px 0 0;
}
/* Set the background of the title anchor as our Vanilla logo. Make sure to set the
display to block, and the height and width equal to the dimensions of the logo. This
will make it so that none of the logo is cut off. */
body #Head h1 a {
background: url('http://vanillaforums.com/applications/vfcom/design/vanilla_light.png') center center no-repeat;
display: block;
height: 84px;
width: 199px;
}
/* Hide the text in the title anchor so it doesn't appear on top of our logo. */
body #Head h1 a span {
display: none;
}
/* Change the padding & margins on various elements so everything lines up with the
logo nicely. */
ul#Menu {
padding: 6px 0 0;
}
#Head {
height: auto;
}
#Head form {
margin: 0;
}
Here is the result:
Tips & Tricks
1. Learn: The best advice we can give you is to teach yourself the ropes. A great place to start is with tutorials online, and there are plenty of them.
2. Firebug: Firebug is an addon for the Firefox web browser. You can use it to identify elements on the screen, and what classes and definitions apply to them. It is by far the best way to figure out what you need to do (or override) to get your forum looking the way you want.
