ShopDev
Login  Register

Knowledgebase

CubeCart V4: Changing the Skin's Colours

This is one of those questions that is repeatedly asked.  In this guide, I'm going to detail the general procedure for changing the colours of any CubeCart skin.  Please note that this is by no means a thorough guide.  You will need to know how to work with Adobe PhotoShop and have experience editing CSS and HTML code.  Since this is a modification, we cannot provide 1-to-1 support for the process.

Prerequisites

You must be able to work with/in all of the following code/language/software:

  • Adobe PhotoShop (or similar)
  • CSS
  • XHTML

If you fail to meet any of the above requisites, this guide will not be able to help you.

Helpful Tools / Software

The following tools / software may come in handy when editing our skins:

  • Adobe Dreamweaver, Textmate, Aptana Studio (code editor)
  • FileZilla, Cyberduck (open source FTP client)
  • FireFox (open source browser)
  • Firebug (add-on for FireFox)
  • Adobe PhotoShop (requisite)

Where are the colours?

You first need to understand where the colours may be contained.  All of our skins make use of images for some page elements.  Naturally, these images will contain colour.  It's difficult to manipulate the colours of a raw image file.  However, we include the full PSD (adobe photoshop) source file for all of our skins.  This will allow you to modify the colours contained in images used by the skin.

All other colours (e.g. text colours, background colours etc.) are either contained within the skin's CSS stylesheets.  Occasionally, some colours will be contained within the skin's template files.  Firebug can be extremely useful for determining which class / id you need to edit.  Firebug should also be able to show you which properties are inherited and from which class / id / element they are inherited from.  I strongly recommend that you dowload the Firebug add-on for FireFox.

The PSD Source

Included with each and every one of our skin is the complete PSD source.  We used this PSD source to design the skin.  Therefore, you can use this PSD source to modify the skin.  We have already sliced the skin for you.  All you need to do is change any desired colours and save all the "user slices" to a safe location on your computer.  NOTE: if you change the size of any elements, you will need to modify the size of the slice also.

Once you have exported all the modified slices, you will need to upload them to your web-server; overwriting the original images.  All of the images used in the skin are contained in the following directory: /styleImages/.  Please note that some images are contained in subdirectories of the styleImages directory.  Again, Firebug is useful for determining the path of the original image.

The CSS Source Code

Attributes such as text-colour, background-colour, background-image etc. can almost certainly be found in the skin's stylesheet(s).  The skin's stylesheets can be found in the following directory: /styleSheets/

Very occasionally, some CSS is directly applied to the style property of the element; inside of the template files.  Again, Firebug is useful for determining whether this is the case.  Should this be the case, you will need to edit the corresponding template file.  We can point you to the correct template file if you open a support ticket.

Summary

That's really all there is to it.  To reiterate, please do NOT attempt to follow this guide if you fail to meet the prerequisites.  If you find this guide difficult to follow, you probably lack the required experience.  Should this be the case, my only suggestion is that you contact an experienced third party developer.  The following websites may be helpful:

We do not offer bespoke services.  Therefore, we will not be able to customise the skin for you.



Was this answer helpful?

Also Read
CubeCart V5: Turbo (Views: 309)

Quick Navigation

Client Login

Email

Password

Remember Me

Search