Custom Theme

5 minute read

June 9, 2010

Custom Theme

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 select my plan?

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.

I messed up. How can I reset my theme’s stylesheet?

You can roll back to a previous version by clicking “Original Version” under ” Recent Revisions” sidebar in the Customize Theme editor.

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.

We Can Do A Custom Theme For You

If you are not comfortable with coding, we also offer a service to create custom themes. Please contact sales to discuss these options.

product

Share Your Thoughts

Your email address will not be published.

Mark O'Sullivan

Written by Mark O'Sullivan

Have an Article for Vanilla's Blog?

Send us an email to [email protected] with your topic idea and we'll circle back with our publishing guidelines.

subscribe-1
Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.

    Request a Demo

    Schedule a product demo now.

    Contact Us