Storefront > Themes > Edit Theme > CSS Editor
Overview
The Cart.com online stores CSS parser requires CSS to be written in a specific way. You will not have to learn any new CSS, but the parser has some specific requirements. The parser will show a Parse Error and the line number if it detects something that does not meet the requirements.
CSS Parser Requirements:
- All CSS properties must have a semicolon after them.
- A CSS property cannot be included twice in the same ruleset.
- All rules must have opening and closing curly brackets ( { } ).
- All quotes must be closed.
In this article I am using the Global CSS Editor for examples, but they apply to any of the CSS editors in Storefront.
How the CSS Editor works
When you open the CSS editor you will see the following screen:
In this editor you can edit the CSS used in your site’s Theme, preview the changes, and apply the changes by saving the edits!
Note: You can only save the CSS changes if there are no errors, otherwise you’ll get the following message:
Errors
Errors are displayed with an icon on the left side of the line that contains the error. Hovering your mouse over the error icon will display a tooltip describing the error.
If there are no errors, then you can save your changes and they’ll immediately be applied to the chosen theme.
Warnings
Warnings are different from Errors as CSS with warnings can be saved but may cause your pages to look incorrect. If this happens it is suggested that you check the CSS warnings for problems.
Common Errors and Warnings
Unclosed Block
An Unclosed Block Error is when the CSS selector is missing the right curly bracket “}”. The editor will also change all selector text from black to red, and can be used to quickly find where the error occurs.
The editor will highlight opening and closing braces if your cursor is next to them.
Unknown Word
An Unknown Word Error is similar to an unclosed block error and often shows when the selector is missing the left curly bracket.
This error can also happen when mistakenly using a semicolon instead of a colon.
Unknown Property
This warning happens when there may be a spelling mistake with one of the CSS properties.
In this example I misspelled the “padding-left” property, and because the editor did not recognize the property it triggered a warning.
Duplicated CSS Property
If you are copying some CSS from elsewhere, the last occurrence of the property is the one that applies. So if you’re making edits and they are not showing, and you’re getting no errors, check for duplicate CSS properties.
Editing Tips
If you are copying CSS from another source and are having parsing errors, the final semicolon may be missing.
An easy way to fix this is to paste the CSS code into an editor such as Notepad++ and do 2 find/replaces:
- Replace all instances of the ;} (semicolon curly bracket) with just a } (curly bracket)
- Use a Regular Expression search for ";\s}" and replace with "}}}" (use three brackets to not bother empty rules such as { } ) This will find ;} as well as ; } (with space(s) )
- Then do the opposite and replace "}}}" with "; }" (or ";}" )
This will give your CSS rules the proper closing bracket form.