Using Themes

Changing the Colors

This part of the quickstart we’re going to change the colors of your install. Continuing with the monkey theme, we’re going to make our subnav look like a big banana, because monkeys love bananas. When styling your OpenVBX theme you need to declare a custom class for your theme. In this case we’re going to use the class monkey-theme. You can name your class what ever you want as long as it’s followed by -theme.

Styling The Links

.monkey-theme a:link {
    color: #4DA6FF;
}

.monkey-theme a:visited {
	color: #444;
}

.monkey-theme a:hover {
	color: #333;
}

.monkey-theme a:active {
	color: #000;
}

First we’re just going to change the link color to something different than the regular link color. These colors are what the default links will look like.

Styling The Main Navigation

.monkey-theme #vbx-main-nav .vbx-nav-title {
	background-color: #B3AB88;
	color: #333028;
}

.monkey-theme #vbx-main-nav .vbx-nav-item a {
	background-color: #FFD561;
	color: #333028;
	border-bottom: 1px solid #B3AB88;
}

.monkey-theme #vbx-main-nav .selected a, 
#vbx-main-nav .selected a:hover {
	background-color: #FFF3B2;
	color: #B3AB88;
}

Now we’re going to change the side nav. The side nav has many elements, in order to style it we only need to change three of them.

  • #vbx-main-nav .vbx-nav-title - This style defines the nav title. This needs a background color and a font color.
  • #vbx-main-nav .vbx-nav-item a - This style defines the regular links in the main nav. In addition to changing the background color and font color we are changing the border bottom color.
  • #vbx-main-nav .selected a, #vbx-main-nav .selected a:hover - This style changes the background color and font color for the selected item in the main nav.

Styling The Tabs

.monkey-theme .vbx-content-tabs {
	background-color: #7E944B;
}

.monkey-theme .vbx-content-heading {
	color: #CECD96;
}

.monkey-theme .vbx-content-tabs li a:link, 
.vbx-content-tabes li a:visited {
	background-color: #FFF3B2;
	color: #333028;
}

.monkey-theme .vbx-content-tabs li.selected a:link, 
.vbx-content-tabs li.selected a:visited {
	background-color: #fff;
}

Finally we’re going to change the styles for the content tabs. Tabs can be used in many different ways. If you want to see what the tabs look like go to the settings page. When designing a new color scheme for the tabs there are four styles to use.

  • .vbx-content-tabs - This style defines the bar that everything is placed on.
  • .vbx-content-heading - This style is added to the h2. It defines what the tabs header will look like.
  • .vbx-content-tabs li a:link, .vbx-content-tabes li a:visited - This style defines the tabs that are not selected.
  • .vbx-content-tabs li.selected a:link, .vbx-content-tabs li.selected a:visited - This style defines the tab that is selected. In this example we’ll keep the background color the same as the background of the page.

Adding your Logo