Adjusting the look and feel of a storefront using CSS

Catfish allows storefront styling through individual CSS overrides. This means that each your storefront look and feel can be completely different from the moment a customer arrives at the site.

This is very useful should you require button or menu colour changes.

More information can be found on CSS here: http://www.w3schools.com/css/

Setup

Login to the storefront you want to override the standard ThemeOne layout for as a Storefront Administrator.

Click Configuration -> Settings -> General and Miscellaneous Settings

Ensure that you have the two CSS Override options ticked:

  • ENABLE CSS OVERRIDE FOR THEME
  • CSS OVERRIDE IN STOREAGEFOLDER

Screen_Shot_2013-03-12_at_11.03.45.png

Uploading a CSS File

Navigate to Content Management -> CSS Override

Screen_Shot_2013-03-12_at_11.18.25.png

You can use Firebug (plugin for firefox) to assess the default CSS and work out what tweaks need to be made.

Create a text file with your all your adjustments like the one attached, and upload to the site.

If you wish to reference any image in your CSS files, upload them to the lower pane, and reference them within your CSS file using the {images}/imagename.jpg path.

An example of this can also be seen in the attached CSS file.

The example file changes the colour of all the buttons and menu areas of the site to Purple / Black. This example file can be used and adjust to easily adjust colours by updating the # colour references.

NB Adjusting values of the site may result in the site looking differently to how it should. We suggest changes of this nature should only be applied by users who are aware of how CSS works.

Please also note that due to site caching (holding changes in memory) adjustments may not appear instantly.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk