Note: 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 used for the website. The cache helps speed up the browsing experience. It is rebuilt whenever you exit the cart designer (this is an IMPORTANT detail to keep in mind).

This is the location that “appears” to be the source of the webpage if you 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:

  • base.css
  • skin.css
  • theme-default.css
  • designmode.css
  • custom.css

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 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 usage (in hierarchy order):

  • base.css (lowest on the priority chain) - Located in the file system, this file should NEVER be changed by users.
  • 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 is only used by old legacy themes.
  • designmode.css (second-highest priority) - Location: /content/skins/_custom/skin/styles **(note that 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 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

 Final notes:

  • If you are making changes in the cart designer, the theme is refreshed each time you save a change, and again when you exit the 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.