This is a crash course on how CSS works in PinnacleCart's templating engine.
Applies to Version(s): 3.7.0 - 3.8.0 series
How CSS is Compiled in PinnacleCart
Pinnacle Cart software builds a cache directory which contains the templates and CSS that is used for the website. This is used to speed up the browsing experience. This cache is rebuilt whenever you exit the cart designer (this is an IMPORTANT detail).
This is therefore the location that “appears” to be the source of the webpage if you were to inspect the source code of the rendered page. This is the primary point at which mistakes are made.
There is only one CSS file that the cart presents to the browser for the core cart functions, including Pinnacle Cart mods (not including 3rd part plugins or 3rd part mods). This file is named all.css and resides in the cache folder.
This file is a combined and minified (all spaces and comments removed) version of all the other CSS files in the following order:
Saving the all.css file in this way creates hierarchy (A bit misleading because the lower an item is on the list, the more the style is given importance).
This hierarchy doesn't mean that there can't be styles that are higher in the sheet (that come from a lower-priority CSS file) and supersede styles that are lower in the sheet (that comes from higher-priority CSS files). Actually, these situations are uncommon.
Examples that might supersede and cause confusion include:
- Using !important declaration
- Providing greater specificity
Now that we have covered the caching schema and the CSS creation structure it is important to explain the relationship between them.
The all.css file is compiled by entering then exiting the cart designer, we call this “refreshing the theme”. This means that any changes that are made to the files directly WILL NOT be seen on the site without refreshing the theme. Any changes made in the cache folder directly WILL BE OVERWRITTEN the next time the theme is refreshed.
Here is a breakdown of the files, their locations, and their proper use (in hierarchy order):
- base.css (lowest on the priority chain) - Located in the file system this file should NEVER be changed by user
- skin.css (second-lowest priority) - Location: /content/skins/SKINNAME/styles - The base style for the theme, should not be changed by average users. Changes here will eliminate the ability to “go back” to original theme
- theme-default.css (not used) - Located in the file system this file should NEVER be changed by the user. Empty CSS file used only by old legacy themes
- designmode.css (second-highest priority) - Location: /content/skins/_custom/skin/styles **(note this is in the SKIN folder NOT the CSS folder) - This file is edited by the Cart Designer function in the admin area. When using cart designer interface, changes end up here
- custom.css (HIGHEST priority) - Location: /content/skins/_custom/skin/styles **(note this is in the SKIN folder NOT the CSS folder) - Intended to be the file where experienced developers make direct changes. The IS an “Advanced Tools” option in cart designer to make changes however most developers would use FTP. The highest priority, therefore, the last file added to all.css, identical styles referenced here supersede all others
- If you are making changes in the cart designer the theme is refreshed each time you save a change and also again when you exit cart designer, therefore you will be seeing all the changes compiled into the all.css file (current up to the time you refreshed the theme).
- If you are making changes to the custom.css file directly you MUST refresh the theme to see your changes
Links to Related Articles
None at this time.
If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.