3.1 Benefits of the Cloudbase 2 Template

A template controls the layout and appearance (but not the content) of all pages of your Joomla website. The Joomla Content Management System comes with 3 default templates. There are literally thousands of additional Joomla templates to choose from on the internet and many are free. Sadly, none of these templates are very adjustable, especially in customizing the header of your website. Once you have installed Joomla onto your website, one of the first things you will want to do is add a more flexible template than the 3 default templates that come with the Joomla installation.

This article (and the following articles) will describe the process for adding one of the newest and most customizable templates, which is called Cloudbase 2 created by a company called Cloud Access. See http://demo.cloudaccess.net/?template=cloudbase2for an online demo.

This revolutionary new template offers a 960 GRID to simplify customizing your layout structure,

With a Maxi-menu option and a unique Template Color Picker Control Panel.

Before getting in to the details of this new template, we will begin with a short review of the benefits of the 960 GRID, the maxi-menu and the Cloudbase 2 Template Color Picker Control Panel

Benefits of the 960 Grid… Moving Web Design from Tables to Divides

The 960 GRID is a 960 pixel fixed width template used to organize the modules in a logical and easy to read and visually pleasing appearance. The first benefit is that 960 pixels simulates how most readers have read pages and books all of their life. The average notebook page is 8 ½ inches wide by 11 inches high. Looking only at the width part, 8 ½ inches is about the same as 850 pixels.  Assuming the page has half inch margins on each side, the width of the text on a standard sheet of paper is typically about 750 pixels.  In a similar manner, the average computer screen is about 1200 pixels. Subtracting space for desktop icons leaves about 1000 pixels for the typical browser screen. Thus, 960 pixels is about the maximum width for a website which can be easily read from line to line without using a horizontal scroll bar.

The second benefit of a 960 grid is that this number is easily dividable by 2, 3, 4, 6, 12 and 16. This allows for a very large number of module widths that all look nice in the same 960 pixel space. For example, a website could have a top header and menu which are both 960 pixels, followed by a slide show and text box appearing side by side in 480 pixel wide boxes. Scrolling down, one could have three 320 pixel FEATURED boxes or four 240 pixel boxes.  There is also a multitude of options for handing the main content area, sidebars, bottom feature areas and the footer section. The layout options for the 960 grid are endless.

History of the 960 Grid

In the ancient days of web design (2006), Joomla Version 1.0 (and everyone else) used tables to lay out their websites. It was easy to design websites, but pages were very slow to load. Also any change to any cell in the template table required rebuilding the entire table and re-coding the entire website.

Beginning in 2007, Joomla Version 1.5 (and everyone else) moved to Divide tags (<div>) instead of Table tags (<table>) to construct websites. This change allowed web pages to load much faster, but greatly increased the difficulty of designing custom page layouts. Two column layouts were handled by “floating” boxes to the right or left. But additional columns required creative use of CSS margin settings. All of this was beyond the comprehension of those who did not understand computer coding such as HTML, XML and CSS. And if you wanted your website controlled by a database such as Joomla uses (which you do), you also had to learn PHP and MySQL. Multimedia and Interactivity (Web 2.0) also required learning Java Script (JS). Web design was (and still is) an alphabet soup nightmare for most novices.

Many folks just stayed with the old Table method and put up with websites that were slow to load and difficult to change. Others moved to Joomla 1.5 to get the benefits of the thousands of Joomla extensions. They then were required to search for a template with a page layout that was similar to what they wanted, or pay for a professional web designer who had the skill and training to create custom page layouts. It used to take days, or even weeks, for a professional web developer to create the coding and files necessary to build a custom page layout. Making changes to the layout was equally difficult and time consuming. Unless you were rich, revising and changing the page layout over time was not even an option.

All this changed in January, 2010, when one of the world’s leading Joomla template maker, Rocket Themes, released a free template, called Quasar, based on the 960 Grid System – a revolutionary Website Page Layout framework by Nathan Smith.  The 960 Grid System allows you to create or change your own Website Page Layout in less than one minute merely by clicking a few buttons! You can even have different page layouts on different pages also with the click of a button. To learn more about this template and see a demo of it, go to the Rocket Theme’s webpage: http://demo.rockettheme.com/?template=quasar

The Quasar Template requires the use of a separate component, called Gantry, which must be installed with the template. In March 2010, Rocket Themes released a slightly simpler free template, called rt_gantry_j15, which also comes with the Gantry Component. This new template comes with a slightly easier Administrator Interface. However, it lacks a file, called template.css, which is crucial for making several custom changes to the appearance of the template. Rocket themes has since released a third free 960 GRID template called Grunge. More recently, Rocket Themes and a relatively new Joomla Hosting Company called Cloud Access have released a new free 960 Grid Template called Cloudbase 2 – which is what this article will not focus on.

Templates based on the 960 GRID have up to 60 module positions. (You can think of modules as the boxes which make up your website and positions as options where the modules can be put). This is many more module positions than traditional Joomla templates.

To understand all the possibilities of the 960 GS, take a few minutes and go to the 960 GS website (http://960.gs). Here you will find the front pages of two dozen websites built using the 960 GS system. Next to each is a button which you can click on to see how the Grids are laid out. They appeared to be laid out like tables. But they load quickly because they are based on Divides.

Below is a graphic of just 38 of the 60 module positions in the Cloudbase 2 template:

This new template framework has made adjusting the structural appearance of your website much easier. The Cloudbase 2 template (and the Rocket Themes templates) come with a Template Control Panel which allows you to adjust the width and number of various modules on your own custom template:

Benefits of the Maxi-menu System

In addition to being the most customizable Joomla template available at the moment, the Cloudbase 2 template also comes with an expandable or maxi-menu system which greatly expands the navigational and structural functioning of the website.

Traditional menus we very limited in terms of the amount of space available for menu item descriptions. Typically, menu item descriptions were limited to just a couple of words. Maxi-menus allow for sub-menus to expand when the main menu item is clicked on. This allows for much more information to be placed on the main page, but have the information hidden from view until it is needed.

In the past, maxi-menus only came on a very few, very expensive templates. However, recently, Rocket Themes added a free Maxi-menu option to all three of its 960 GRID templates. http://www.rockettheme.com/extensions-joomla/roknavmenu

But all three of the Rocket Themes 960 GRID templates still suffer from being difficult to change the color options and to change the header image and text.

Benefits of the Cloudbase 2 Template Color Control Panel

Recently, Cloud Access introduced a revolutionary new template, called Cloudbase 2 which includes the 60 module positions of the 960 GRID framework and the maxi-menu option of the Rocket Themes templates (as a separate add-on) AND adds template color selectors in a control panel – allowing you to change the colors of various sections of your template in seconds with the click of a button and without having to change any of the CSS coding.

Pattern 5 is a vertical matt style background: 

You can also change the background color to whatever you want with the background color picker: 

Simply click on the color you want, then click APPLY, then PREVIEW to see what it looks like:

You can also change the headline color and the link color to whatever you want:

Making things even easier, the template comes with 10 preset background patterns (set by merely clicking on the drop down arrow above).

 There are also 11 preset color combinations (all of which are adjusted with a horizontal scroller and clicking on the one you want.

It only takes a few minutes to see what your website would look like with these 110 color/background combinations – or any other color/background combinations you can think of! Simply click on a background and/or preset color combination and/or change anything by clicking on the color selectors and then click APPLY, then click PREVIEW. There is no need to adjust any of the CSS sheets or know anything at all about computer programming.

The following is the appearance of the standard default Joomla Template called Milky Way: 

Below are three of the Cloudbase 2 Preset Options:

Preset 1: 

Preset 3: 

Preset 7:

You can even select different templates and different colors for different pages and different menu items. The design options of this new template are nearly infinite.

Overcoming the Final Obstacle… An Easy to Use Custom Header Tool

However, even this new Cloudbase 2 template still suffers from one major problem. Unless you are very good with CSS, PHP and HTML computer programming – and have access to a thousand dollar program called ADOBE PHOTOSHOP, and know how to use it, you will have a very difficult time trying to customize the header. The same can be said for the 3 Rocket Themes templates. Rocket Themes has a forum on these free 960 GRID templates. The questions go on for more than 43 pages. See http://www.rockettheme.com/forum/index.php?f=288&rb_v=viewforum&start=40

Many of the questions have to do with problems encountered when trying to create custom headers by altering the CSS and HTML of the 960 Grid template.

One of the goals of this article and the next one in this series is to offer you a much simpler method for creating a custom header for the Cloudbase 2 template. The method I will describe below involves simply turning off the template logo section with a click of a button:

Then, replace the difficult to adjust logo with a simple easily customizable box or module which will allow you full control over both your background logo image and your foreground logo text – without changing a thing on the template CSS sheets.

This technique will help overcome one of the final obstacles standing between you and complete control over the appearance of your Joomla website. You will be able to quickly create almost any kind of header you would like.

In the next article, we will describe how to download the free Cloudbase 2 Template. Then in the article after that, we will describe a simple method for creating a custom header – including custom images and text- for your website.

In subsequent articles, we will also 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.