Adjusting the look and feel of a storefront using CSS

Catfish allows you to style your storefronts individually by applying a CSS file to them directly. As this is done on a storefront level, you can have two storefronts on your platform which look nothing like one another.

What can be achieved through the use of CSS is hard to explain as it is a very open-ended question since it depends on the skill of the one producing the CSS.

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 Ovverides for Theme:
CSS Override in storage folders:

Uploading a CSS File

To upload a CSS file, navigate to Admin -> Content Management -> CSS Override

In here, you simply need to upload a .css file in the 'Upload a new CSS file' section as highlighted below:

Upload_section.png

 

Most browsers now have developer tools which allow you to inspect the elements of the page and see what tweaks will need to be made.

Please see the below links for how to do this on Google Chrome and Firefox:

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Uploading and referencing images

In order to upload an image to be used in your CSS file, nca

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

Please sign in to leave a comment.
Powered by Zendesk