If you wish, you can modify the colors of the Cloudbase 2 Template to better match your new header. Go to Extensions, Template Manager, select the Cloudbase 2 Template and click on EDIT to bring up the Template – EDIT screen.

Adjusting the Template Preset Style:

The Preset Section controls the font colors: Click on Template Preset 7, then click on APPLY, then PREVIEW:

Pattern 7

Once you have the preset you like, click on the Settings Tab to open it:

The default background pattern for Style 7 is Pattern 9. But there are 10 other patterns. Below are all 11 background patterns:

Click on Pattern 5, then click on APPLY, then PREVIEW. This pattern creates a matt in the background behind the template.

None of the patterns actually changes the background color. To change this, click on the Color Selector for Background Color:

 

The default background color for style 7 is #0e96cf. Either click on a spot on the screen or simply enter the hexadecimal code for the color you would like to use. You could create a lighter or darker color. But for now, we will stay with the default colors.

Here is our final custom header:

Advanced Fine Tuning of the Appearance of your Cloudbase 2 Template

If you have a reasonable command of CSS (aka Cascade Style Sheets), you can to further modifications of the appearance of your Cloudbase 2 template by going to Template – Edit and clicking on CSS to edit the CSS sheets. Below we will edit the appearance of the Springforwardwebdesign.com website.

 

For example if we wanted to make the color of the website background container lighter, below are some settings to try changing in the template.css sheet:

Original code below with proposed changes in bold

/* CloudBase 2.0 overrides for Gantry Framework */

The cloudbase 2 CSS template is well organized into several sections as indicated below. The question is which sections should be modified?

One way to find out is to make the change, then click on APPLY, then PREVIEW to see if the change worked the way you wanted. If it did not work, then change the code back to what it was before and try changing a different section.

/* Basic styles */

body {color: #333;}

#rt-header, #rt-bottom {color: #333333;}

.rt-container {background: #fff;} switch to #c8d did nothing

.rt-article a{text-decoration: underline;}

a:hover {color: #000; text-decoration: none;}

#rt-footer, #rt-copyright, #rt-copyright a {color: #333333;}

#rt-sidebar-a {background-color: transparent;}

#rt-sidebar-b {background-color: transparent;}

#rt-sidebar-c {background-color: transparent;}

#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}

#rt-accessibility .button{

            padding: 0px;

}

#rt-accessibility .button, .rt-joomla .icon {

            background-image: url(../images/typography.png);

}

 

/* Layers structure */

#page-wraper{

            width: 998px; changed to 960px

            padding: 0px 37px; changed side padding to 20px that brought it in!

            margin: 20px auto 0px auto; changed top margin to 0px and it put light purple to the top.

            background: url(../images/background/shadow.png) 50% 0px no-repeat; delete url(../images/background/shadow.png) and add background-color: switch to #c8d

}

 

Did not change color, but appeared to reduce excess spacing. So left.

 

#in-page-wraper{      

            background: url(../images/background/bottom-shadow.png) center bottom no-repeat;

            padding-bottom: 51px;

}

#in-page-wraper-2{

            background: url(../images/background/content-background.png);

            border: 1px solid #fff; deleted border

            padding-top: 25px; Change Top padding to 0px

            padding-bottom: 25px; bottom padding to 0px

            min-height: 500px;  added max-width: 960px;

}

 

In page wrapper 2 has to be it. Deleted url and put in #c8d

That did it. But now extending too much to each side and border not good:

Max width now at 960: Image needs to be made 940. Also the page wrapper was 998px, changed to 960px:

.rt-container{

            background: none; change to: #c8d;}

This changed the entire interior background color:

 

#rt-mainbody{

            background: #fff; switch to c8d does nothing

            margin: 0px;

            -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);

            -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);

            box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);

            padding: 6px;

            overflow: hidden;

 

Next make the side padding 10px and wrapper 2 top padding 10px and bottom padding 10px

Plus reduced the component padding from 15 to 10

Try taking 10px off top and bottom, but leaving side 10px

border width at 0px:

The final background color choice was #cbf

Next focus on finding and getting rid of the 10px padding on te top and bottom of the header box: Also making the menu drop down backgrounds slightly darker – like #ddf

First get rid of the padding 6 px and see what happens:

Second change component content padding to 0px 10px

Third, change the block padding to 0px THAT DID IT

Next get rid of the box shadow and see what happens:

 

-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);

            -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);

            box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);

Change simple module backgrounds to ddf

Here is original for top modules

/* Top modules */

#rt-top{

            padding-bottom: 15px;

}

/* Content bottom modules */

#rt-content-bottom{

            padding-bottom: 10px;

}

/* Header modules */

#rt-header .module-title h2{

            background: none; change to ddf

            color: #000;

            padding: 0px 0px 4px 0px;

            text-shadow: none;

}

Here is menu box original:

#rt-menu .rt-container{

            background: url(../images/menuBackground.png) 0px -10px repeat-x #fff;

            width: 940px; this is why the header image needs to be 940 wide

            height: auto;

            border: 1px solid #dcdcdd;

            margin-bottom: 12px;

Scroll down to RoNavMenu, under Navigation Drop Downs, background is #fff, make #ddf

That was the final change to the CSS.

Hopefully, this will help you better understand how you can change almost any aspect of your cloudbase 2 template.

Thus far, we have been focusing on the COLOR combinations for your Cloudbase 2 template. In the next article, we will review how to change the LAYOUT or structure of the way articles appear in your Cloudbase 2 template. In general, three and four column layouts are difficult to read. We will therefore focus on one and two column lay outs – using 3 and 4 column layouts for creating “Feature Boxes” and the Top and Bottom of the HOME page.

In subsequent articles, we will show you how to add and configure the maxi-menu as well as many other tips for bringing your new state of the art website to life. The next article will go into greater detail on how to design and build your Joomla Menu System.