OpenCart – Adobe Fireworks (Image Editing)

There are a gazillion ways to edit images but only a few pieces of software make this process a piece of cake! This article is a HOW TO for just one piece of software called Adobe Fireworks. If you are using Opencart framework for your website then chances are you WILL be altering the graphics either by purchasing a custom template, or by altering the default template. For this demonstration we will be editing the default button that opencart uses. The button can be found anywhere where the class=”button” is defined.


We’re going to change the overall look by altering the button color in Adobe Fireworks. T If you open up the following file catalog/view/theme/default/stylesheet/stylesheet.css do a search and find the following line:

a.button, input.button {
	cursor: pointer;
	color: #FFFFFF;
	line-height: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background: url('../image/button.png') repeat-x;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;

Notice the image that is called in the CSS? That image can be found exactly where it says : ../image/button.png


Now open up Adobe Fireworks and load button.png into a new file. Once you open the image you will want to expand the size of the canvas and color it WHITE. This will allow you to really see what you are doing. It will now look something like this:


The image that you are looking at actually is two images in one because CSS treats it as such. The upper half of the image is used for the normal Active state of the button and the lower is used for hover. Keep this in mind when combining colors. There are a billion ways to edit this image so let’s just choose one and run with it. Let’s apply a filter to the entire image which will save us from having to draw squares on both halves. Select the image and go to FILTERS – ADJUST COLOR -> HEW/SATURATION.


Adjust the levers to where you want them and press OK. This will change the overall color.


Now all you have to do is save over button.png and upload it to the server. You will see the change wherever there is a button.

Looking for quality OpenCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *