Joomla Templates - RokWebify Tutorials

Open your template_css.css file. This should be contained within rt_rokwebify/css. A CSS specific editor such as Adobe Dreamweaver or CSSedit 2.0 are perfect for making CSS changes, but any text editor will do the trick.
Within the now opened CSS file, locate the following class at aproximately line 140. This is the class that we will be editing to convert RokWebify into a fluid width layout.
```
div#wrapper {
margin: 0 auto;
width: 868px;
padding-top: 18px;
}
```
In the RokWebify template, there are 3 variables contained within the div#wrapper class. The first property is margin: 0 auto. This variable is responsible for rendering the margins to 0 in all browsers. This is important as different browsers tend to render margins differently when the margin is not specified.

This margin setting also serves to centralise the template layout in the browser when dealing with percentage based widths. As this is currently set in the RokWebify template, you will not need to change this property.
The next parameter in the wrapper class is the width. As the name suggests, this is responsible for the overall width of the template. The RokWebify template has been designed in such a way that you can control the width of the layout from this single property. As you change the default width, the template layout and images will adjust accordingly.

The default width of the RokWebify template is set to 868px. You can change this number, keeping the px suffix, to increase or decrease the width of your template. In order to create a fluid width, we will want to use percentages to represent our width. In the first example, we will set the width to be full fluid width with no right or left margin.

Change the wrapper width property from width: 868px; to width: 100%;

Alternatively, you can apply a fluid width and also include a margin to the left and right of the template so that you see some of the background color and have better defined edges and template integrity. This approach works very well with templates that have rounded edges and, in my opinion, looks better with the RokWebify template.

To create this effect, we need to alter the 100% width we used in the last step to a lower percentage such as 90%. This sustains the dynamic fluid effect we achieved with the 100% width, but now we also have a small space on the right and left sides of the template.

Change the wrapper width property from width: 100%; to width: 90%;
The final setting in the wrapper class is the padding-top. This property controls the space above the template. The padding-top property pushes the whole template down by the specified amount of pixels. When customising templates that have rounded headers, such as the RokWebify template, it is best to have some space above the header so that some of the page background shows through and better defines our rounded corners. You can set this property to your own taste by editing the 18px to whatever amount of pixels you prefer.