The Custom CSS upgrade allows you to customize the appearance of your forum using cascading stylesheets (CSS). You can change colors, fonts, backgrounds, banners, and even where elements appear on the page.
Please note that working with CSS can be a complex task, for example: CSS can behave differently in different browsers (and versions). Making your forum appear the way you want is completely up to you, so you should have a good understanding of CSS, or at least be willing to learn, before purchasing this upgrade.
No, the CSS upgrade only lets you add CSS definitions. You can change the appearance of a theme, moving, altering, and even hiding elements of your forum, but you cannot change the HTML or PHP underneath.
We can't show you how to do everything, but we've included some common examples to help you get started.
No. For security reasons, we do not allow non-VIP customers to upload their own themes, html, or php files. However, you can completely replace the CSS of any theme we have available (we are adding new ones all the time).
Absolutely! You can choose to append your CSS to an existing theme, or you can completely replace the CSS for a theme. So, you can make minor changes to things like colors and fonts pretty easily (we have some examples below).
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.
Yes! Go to your forum's dashboard and click "Custom CSS" under the "Appearance" section of your side menu. You can add css definitions and preview them on your forum. Note: only you will be able to see your CSS customizations while in preview mode.
The choice is yours. You can decide when you save your customizations.
You will need to purchase the "File Uploading" upgrade in order to be able to use images hosted on the forum. Alternately, if you already have web space elsewhere, you can just reference your images with an absolute url to the web-space where they are hosted.
Just remove all of your custom definitions from the Custom CSS page on your dashboard, and click Apply.
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.
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:
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:
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/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:
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:
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.