Creating a color variation of a RocketTheme Joomla template consists mainly of two major steps; creating the modified images with the Fireworks Source PNG and customizing the CSS included in the template.The best place to start creating a color variation of the RokWebify template is the Source PNG file. Here, we can layout all of our colors to see how well they work together. This also will give us the properly colored images which will be needed in the template as a large portion of the template's color is created through the use of gradient images.

• We will begin by opening the "rokwebify_source.png" file that is included in the RokWebify Joomla template release in Adobe Fireworks. Here we will have full access to all of the layers and elements in the template design and can make all of our image modifications.
  
  - In the Layers panel on the right hand side, find the folder at the top of the Layers list named "Web Layer" and click the eye icon to the left of the Folder text to make the Web Layer invisible. This will remove the green overlay "slices" that are currently obscuring the logo text. We'll need these slices later on.
  
  
• The first element to start with is the background gradient. Currently the background is a blue gradient and we are going to change it a to a grey color that will better compliment our red color scheme.
  
  To change this we will first need to select the Pointer Tool in the Fireworks toolbar.
  
  - With the Pointer Tool selected, click on the blue background area to select it. When selected you should have a vertical line on the left hand side with a square on one end and a circle on the other end. This line represents the gradient control. You will also notice that the "Background" layer will show as selected in the Layers Panel.
  
  
  
  - With the Background layer selected, the Properties panel at the bottom of the screen will show all of the various controls for this layer. Included, is the gradient color control represented by a colored square with a paint can icon on the left and a dropdown selector with "Linear" selected on the right. This is the Fill Color control. Click on the Fill Color square to bring up the color controls.
  
  
  
  - This will bring up a view of your gradient with colored boxes representing your start and end colors. Click on the left square directly underneath the gradient color bar, this will bring up a color selector. In this example, we will set it to #CCCCCC. Now, click on the right square directly underneath the gradient color bar. Set this color is set to #666666. Hit the ENTER button when finished.
  
  
• Now that the background gradient is set, we are going to move on to the logo area. The logo consists of several elements that will need to have their colors changed and tinted to better suit our new color scheme.
  
  - Using the Pointer Tool, double click on the "RokWebify" text in the logo area of the layout. This will give you a text cursor to allow you to edit the text. Highlight the green coloured "Rok" text. In the bottom Properties panel, click on the Fill Color square to the right of the font name and size selectors. In this example we will be setting this color to #B10000. Next, highlight the blue coloured "Webify" text and set its color to #666666 in the Properties panel.
  
  
  
  - Now we want to change the color of the green Alpha button. This button also uses a gradient for its color. Click on the green starburst shape with the Pointer Tool to select it. When selected, it should appear with a blue outline and a gradient control bar in the center.
  
  
  
  - In the bottom Properties panel, click on the Fill Color square to the left of the dropdown selector set to "Linear" to bring up the gradient color controls. Set the left square to #CC0000 and set the right square to #990000. To the right of the Fill Color square is another colored square, this represents the Stroke Color. Click on the Stroke Color square and set its color to #870000.
  
  
  
  - The last part of the logo is an envelope icon with two arrows. This is a bitmap image, therefore the colors cannot be edited in the same fashion as the other elements of the template. You can either replace this icon with one of your own, or you can change the "Hue" of the image to give you the red color we are looking for. To change the Hue, select the icon with the Pointer Tool and in the bottom Properties panel click on the Add Live Filters button on the far right side, represented by a button with a "+" symbol. Choose Adjust Color > Hue / Saturation in the menu and it will bring up a Hue / Saturation control panel. Set the Hue to 142 and hit ENTER or OK.
  
  
• Next, we will want to set the color of the menu bar. The menu bar consists of several elements including a solid color bar at the top, a gradient bar for the main part of the menu, and two vertical lines to create the bevel separator.
  
  - First, we will want to change the color of the solid bar on top. Select the solid bar (light green) with the Pointer Tool. In the Properties panel click on the Fill Color and change to #FF6D6D.
  
  
  
  - Next, we need to change the main gradient color of the menu bar. Select the Gradient bar and in the Properties panel click on the Fill Color and change the left color square to #990000 and then change the right color square to #D73333.
  
  
  
  - Finally, we want to change the colors of our vertical separator bars. We will only need to change the first set (to the right of Home) as that is the only one that is within a slice and will be exported to represent our separator image. There are two vertical lines side by side, they are rather small so you may need to zoom in a bit (CTRL or CMD +) to see them better. Select the left line with the Pointer tool, in the Properties panel click on the Stroke Color square and change to #990000. Next, select the right line with the Pointer tool and in the Properties panel click on the Stroke Color square and change to #D73333.
  
  
• Now it is time to take care of our content area icons. RokWebify has a triangle shaped bullet image as well as an arrow shaped bullet image that are used in the content. We will need to adjust these to match our new color scheme.
  
  - First, we will need to change the color of the triangle shaped bullet that is used as our "arrow.png" image. Currently it is green, we will want to select it with the Pointer Tool, click on the Fill Color in the Properties panel, and set the color to #B10000.
  
  
  
  - Next, we will need to change the color of the arrow shaped bullet images in the right Main Menu area. These are bitmap icons as opposed to a shape, so you will have to tint them using the Hue / Saturation in the same fashion as we did in the logo icon earlier.
  
  - Select the first arrow icon with the Pointer Tool and in the bottom Properties panel click on the Add Live Filters button on the far right side, represented by a button with a "+" symbol. Choose Adjust Color > Hue / Saturation in the menu and it will bring up a Hue / Saturation control panel. Set the Hue to -67 and hit ENTER or OK. We only need to tint the top one, as it is the only one that will be exported for our template bullet image.
  
  
• The next area we want to change is the right sidebar area. Currently, it has a light blue hue in the background and light blue bars underneath the module headers. We will want to change these to a gray color to better match our gray and red color scheme.
  
  - First, select the sidebar element with the Pointer Tool and click on the Fill Color in the Properties panel and change the color to #F3F3F3.
  
  
  
  - The light blue bars underneath the module headers do not have to be changed here, as they will be generated entirely in the CSS and will not consist of any images. However, I find it's helpful to change them on the source file so that you can see all of the colors together to get a good overview of how the finished product is going to look.
  
  - To change these, Select the first bar underneath Main Menu with the Pointer Tool. Next, while holding the SHIFT key, select the bar underneath Latest News. This will cause both of the bars to be selected at the same time. In the Properties panel below, click on the Stroke Color and change to #CCCCCC.
  
  
• The Final area of the Source PNG that needs to be edited is the footer area of the template. There are several elements here that need to be edited to reflect the new color scheme.
  
  - First, we want to change the color of the green horizontal bar that divides the footer from the content area. Select the green horizontal bar element with the Pointer Tool and click on the Fill Color square in the bottom Properties panel. Set the color to #990000.
  
  
  
  - Next, we need to change the color of the gradient that makes up the main background of the footer. Select the footer background element with the Pointer Tool. In the Properties panel click on the Fill Color and change the left color square to #565656 and then change the right color square to #252525.
  
  
  
  - This next step, once again, is optional as the blue bars underneath the module headers are generated entirely from the CSS. To change the color of the bars, select the Pointer Tool and SHIFT + click all three. Click on the Stroke Color square in the bottom Properties panel and change the color to #595959.
  
  
  
  - Finally, we need to change the color of footer reflection element. Select the footer reflection area with the Pointer Tool and in the Properties panel click on the Fill Color and change the left color square to #565656 and then change the right color square to #252525.
  
  
• Our final step with the Fireworks source file, is to export the image slices and replace the ones included with the template. Upon exporting, Fireworks will automatically create an image file for each of the slices in the template design, it should create a total of 15 images.
  
  - First, we need to turn our Web Layer back on. In the Layers panel on the right hand side, find the folder at the top of the Layers list named "Web Layer" and click on the empty square to the left of the Folder text to make the eye icon reappear and the Web Layer visible. This will bring back the green overlay slices. Prior to exporting the images, you will also need to make the "Content" layer folder invisible as it contains the sample text and we don't want that to appear on our image slices. You can make the "Content" layer folder by clicking the "Eye" icon to the left of the folder name.
  
  
  
  - Next, go to File > Export and set the Export settings to Export: Images Only, HTML: None, Slices: Export Slices. Make sure the "Include Areas without Slices" is NOT checked. Browse to the folder or area you wish to save the images into. This can either be the actual rt_rokwebify / images folder of the template, or you can put them in a temporary folder and then upload the individual images to the rt_rokwebify / images folder on your server. When ready, click on the Export button.
  
  
  
  - Fireworks will now create separate png image files for each of the slices in the template design, it should create a total of 15 images. If you saved these to a temporary folder or to the desktop, you will want to copy or upload these 15 image files into the rt_rokwebify / images folder of the template install you wish to do the modifications to.