Caching CSS and Addons

Store Builder Questions
1

I notice that some CS-Cart addons (including those included with the software) have CSS files in the skins/customer/addons/addonname directories.

Sometimes the CSS files are not joined together into the cached CSS file (when join_css is set to true in the config file.)



This is really two problems:

  1. These CSS files should be included in the cache.
  2. The my_changes addon includes my own CSS files that include overrides for the values in the addon’s CSS file and they are not displaying. It appears as though the addon’s CSS files have a higher priority than the cached/joined CSS file.



    It’s not all the addons that have this problem. I’ve found it with Buy Together and reported it. Today I found News and Emails was not included in the joined CSS file after I cleared the cache and let the system rebuild the joined CSS files.



    What the heck is causing this? Is there a maximum size for the cached CSS files and I’m overrunning it? Is it the addon’s priority?
2

Using smartoptimizer?

3

Don



The CSS of all default addons should join as one file in the /var/cache/ folder. If not, I assume you are using other joining/compression methods other than the default config.local.php changes. 3rd party addons will also join as one regardless which syntax you use (provided the syntax in the addons script.post.tpl is valid), but JS compression doesn't seem to work unless you use specific syntax. Most 3rd party addons I have seen don't compress and use something like this in a scripts.post.tpl:

```php


```

However, if you use the following syntax, the JS file IS compressed.


{script src="addons/my_custom_addon/js/customaddonjavascript.js"}


Yet another irritating gripe…

4

I'm not using smartoptizer.

I'm not using any 3rd party joining method - only the CS-Cart option in the config.local.php script.

I do use Xcache for compression, but I think that's outside the scope of this problem.



My joined CSS files in the var/cache/templates/css folder are in six different files, all created today after I cleared the cache.



I've disabled joining CSS for the time being. I can't afford to have custom css not displayed.

5

I also seem to have 3 CSS files in /var/cache/templates/css/, all generated upon the first page load after clearing the cache.



I am assuming you have something like this:



/skins/yourskin/customer/styles.css

<br />
.myclass {<br />
color: #ffffff;<br />
}<br />

```<br />
And also in /skins/yourskin/customer/addons/my_addons.css<br />
```php
<br />
.myclass {<br />
color: #000000;<br />
}<br />

```<br />
<br />
In this case, your compiled CSS file(s) are only rendering the "color: #FFFFFF" and/or disregarding everything else also defined in the my_changes version of the "myclass" class?<br />
<br />
I have only ever gotten round this horrible thing by:-<br />
<br />
Creating custom named classes for all design elements I intend on changing in the front end, thus there can be no conflicts in the compiled css file.<br />
<br />
OR<br />
<br />
Use the lovely "!important" css tag for rules which otherwise get overwrote.<br />
<br />
You could, however, in theory, use a "styles.override.tpl" on my_changes and include the contents of "styles.tpl" in this file and copy the contents of "styles.css" into the mychanges stylesheet and only reference this file in styles.override.tpl. The only problem with this is when new CSS classes are added to the default styles.css.<br />
<br />
After all, if you are on 3.0.6 as your signature suggests, 306 will be forgotten about, the styles.css won't ever change, and you won't have any problems....except still having 3 compressed CSS files <img src="upload://iKNGSw3qcRIEmXySa8gItY6Gczg.gif" class="bbc_emoticon" alt=":grin:">
6

Thank you for taking the time to think about this problem. I appreciate your effort.

The real problem with the joined CSS files is that there are a couple of CS-Cart addons that have been included with CS-Cart since 1.3.5 that have styles.css files in their folders /skins/skinname/customer/addon/addonname/ which are NOT being joined into the cached CSS file. To make matters worse, the unjoined CSS files are taking priority (loading last) over the classes that ARE in my_changes (which is included in the joined file).

Example: the News and Comments addon has a styles.css file that includes .news h1 {color: #xxx;}. I add .news h1 {color: #yyy} to my_changes style sheet and enable joining CSS files. The the styles.css file in the news and comments addon is used and my header tag is #xxx. If I unjoin the CSS files, the problem goes away and my custom class is applied (is loaded last).



Your solution would work if I was willing to rename all the CSS classes in the template, or override the template with hooks, but jeez louise… what a lot of work that would be.



I disabled the CSS joining. I should let it recompile the joined file and see if my custom class is even in there. I swear it has something to do with the joining logic - but I can't find it anywhere to see if there is something wrong with it.