|
Your Shift4Shop theme - the coloring scheme and basic look and feel - is dictated by both the frame.html page template and your theme folder's Cascading Style Sheet (CSS) file. Generally speaking, the frame.html acts as the blueprint for the layout of elements, while the CSS file acts as the color and formatting instructions for those elements. This article will help to explain CSS in some depth.
Note
To view and edit your particular theme's CSS file:
1. Log into your Shift4Shop Online Store Manager
2. Go to Settings>Design >Themes and Styles
3. Go to the Edit Template section and select Open Template Editor.
4. On the Template Editor page, look for the dropdown menu at the top right and select the option titled templates/[your-template-name-here]/css
This button will take you to a new page showing your store's CSS files allowing you to see the individual elements that can be changed. We include both a semi-graphical user interface for editing individual elements, as well as an advanced option to edit the raw CSS file.
Also, remember to clear your store's cache after editing the CSS file to ensure you are seeing the correct updates!
So what exactly is CSS?
CSS is a design shortcut which allows you to control how certain elements will display on a site when its HTML is ultimately displayed by the browser.
For example, let’s take this sentence in bold red font:
The quick brown fox jumps over the lazy dog.
In basic HTML coding, this would be written as:
<p><strong><font color="#FF0000">The quick brown fox jumps over the lazy dog.</font></strong></p>
Now of course, this is just one simple sentence. However, let’s say you want several of your sentences on the site to follow this color and format. You’d have to write this coding into each and every one of them. Most HTML editing programs will make this fairly easy (if somewhat time-consuming), but let’s say you ultimately decide you don’t like bolded red text. You’ve decided to change the font to blue and italic. Hard coding it this way would mean changing every… single… instance… of the coding on your store.
This is where something like CSS comes in handy.
A CSS file can be created which dictates all of these coloring and formatting instructions. Each element would have it's own unique name. For example, header price, description, add to cart, these can all be designated as their own individual CSS elements.
When editing your HTML, you would simply reference the CSS file in the HTML's header while listing the element classes in-line with their respective tags.
Here’s an example of a simple CSS instruction:
<style>
.fox{
color: red;
font-weight: bold;}
</style>
This is a simple instruction telling your HTML that you want the text to be red and bold. The ".fox" portion of the script is the name of the element. When you write your HTML, you simply reference this instruction by using the “.fox” name as the line's class.
So in your coding, the sentence may look like this:
<p class="fox">The quick brown fox jumps over the lazy dog.</p>
If you decide to change your HTML’s coloring at any point, simply edit the CSS file and all of your code referencing the ".fox" element will update to reflect the new colors.
Of course this is an overly simplified example of CSS, but there are many aspects of your theme that are controlled via the CSS file. Some of these include:
- Button Colors
- Text coloring
- Text formatting and size
- background and static images
- cell border weights and colors
- and many more.
For more in-depth information on basic CSS please click here to review some excellent tutorials from w3schools.com
|