My Changes in Version 4

Hello Everyone,



Can anyone confirm or deny that they've been able to get my_changes add-on working in version 4 to override default CSS styles?



We've carefully followed the documentation here:



[url=“http://docs.cs-cart.com/my-changes”]http://docs.cs-cart.com/my-changes[/url]



And we've defined our styles as !important.



And we've verified that the my_changes add-on is enabled.



And we've even rolled back to basic skin and set-up my_changes add-on in it's directory instead.



But we just don't seem to be getting anywhere - the source doesn't show our styles.less file being included as a separate file, and the CSS file loaded from the cache doesn't include our changes.



Any help very gratefully appreciated.



Thanks, Happy Fruit Bat.

Working fine for me.



I have my custom .less and .css files in the equivalent of /design/themes/basic/css/addons/my_changes



I have my styles.post.tpl file in /design/themes/basic/templates/addons/my_changes/hooks/index



The contents of the styles.post.tpl is :


{style src="addons/my_changes/mystyles.less"}
{style src="addons/my_changes/mystyles.css"}




Additonal styles I put in the CSS file and override styles into the LESS file.



I keep the Rebuild Cache Automatically toggle set to On while I'm testing new styles. You can find that on the left hand side pane in the Template Editor section.

V4.0.1 is buggy and priorities of css (or less) files is not done properly.

You might use the old V3 method of having styles.post.tpl use an html 'link' tag rather than a smarty 'styles' tag. This should put your 'link' after the inclusion of the main (combined) css file.

I can't seem to get the my_changes process to work.



I precisely followed the procedure and tried methods suggested in this post but to no avail.



Frustrating that even a basic change seems to be way more complicated with V4.

Hi Frathom,



I've been meaning to return to this thread to give some feedback on getting my_changes add-on to work.



Couple of points to note.



The template hooks go in a similar place to before:



/design/themes/basic/templates/addons/my_changes/hooks/index/styles.post.tpl




But don't [color=#282828][font=arial, verdana, tahoma, sans-serif]expect to put LINK tags as you would have done for previous versions, I couldn't get that working.[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]Instead you need to use the smarty plugin to reference your CSS files as follows:[/font][/color]



{style src="addons/my_changes/mystyles.less"}
{style src="addons/my_changes/mystyles.css"}




And with reference to the above path, note that the CSS files shouldn't be placed next to your .tpl file as described in the my_changes documentation for v4 (it's wrong!), they should be in the following path (note the separate branch for CSS files):



/design/themes/basic/css/addons/my_changes/mystyles.less




And finally clearing the cache with ?cc in the traditional manner didn't work for me either, make sure you've enabled the “[color=#282828][font=arial, verdana, tahoma, sans-serif]Rebuild Cache Automatically” setting in the left hand pane of the template editor.[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]Thank you to Nadia and others for these clues, and hope this helps you get it working.[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]HappyFruitBat[/font][/color]

The way it works is that the CSS files are all evaluated and combined in to one single CSS cache file, which is automatically referred to via a LINK tag added by the template system.



You should put regular CSS syntax in your styles.less file, and would expect those to appear towards the bottom of the compiled CSS cache file.



[color=#282828][font=arial, verdana, tahoma, sans-serif]HappyFruitBat[/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif] [/font][/color]

Note that ?cc clears the registry and the css/js cache and causes those caches to be rebuilt.

The ?ctpl now clears the templates.



My opinion is that the css/js caches should be cleared with the templates, not with the registry. But you can always just do:

?cc&ctpl

Good info (as always) tbirnseth, Thanks. :grin:

Never mind I think I figured it out. Thanks



Do you always have to work in the /design/themes/basic/ path for folders? In the previous versions you could create a new skin folder with the /customer/addons/my_changes folder in it ( with any css and hooks in that ) so you could have multiple templates and switch in the Design > Skin Selector area of admin. I realize the paths are different but does it not work to have a custom skin folder with the my_changes folder in it? Something like:

/design/themes/mycustomskin/templates/addons/my_changes/hooks/index/styles.post.tpl

Or will that always need to in the basic theme folder of



/design/themes/basic/templates/addons/my_changes/hooks/index/styles.post.tpl



Thanks!

Actually, the correct way to do it is to add to the

var/themes_repository/basic/addons/my_changes

directory and then uninstall/install the my_changes addon. It will then propagate those files to the currently installed themes.



But 99% of people won't take that route. Hence you need to put the addons/my_changes directory structure into each theme where you want it to be used. But do note that images, css, fonts, and other stuff is now scattered all over the place so you have to populate a wide variety of directory roots with the appropriate addons/my_changes directory structure along the the proper content within those directories.

I'm stumped on how to get my_changes working. I've followed the instructions for 4.x here:

http://docs.cs-cart.com/my-changes



These KB instructions differ from the methods posted above in this thread, so I'm not sure which are valid.





I haven't been able to get any CSS rules from my_changes to appear on my dev site. I've checked folder and file permissions, reset the cache, enabled “rebuild cache automatically”. Can someone provide a simple CSS change in a my_changes folder structure that is proven to work so I can debug my issue?



thanks,

Glen

Glenn,



Assuming the name of your theme is 'basic', do the following:

  • create the file design/themes/basic/addons/my_changes/hooks/index/styles.post.tpl

    In this file put: {style src=“addons/my_changes/my_styles.less”}
  • create the file design/themes/baseic/css/addons/my_changes/my_styles.less with the content you want. I.e.

    .h1 {font-size:larger;}
  • Invoke your URL with the ?cc parameter to clear out the original compiled css file. You can verify the modification times of the files if you're not confident the cached ones were cleared (or remove them manually). They are located at var/cache/misc/statics/design/themes/basic/css folder.



    This is for the customer (theme) view. For admin (backend) it is a little different, but basically the same. This is also for the 'single storefront' version (the old PRO). Not sure whether you get a different instance of the theme per storefront or whether the storefronts all share the same themes (what I would expect, but I think each storefront has its own instance of a theme and hence has a store identifier as a subdirectory of the theme, but I'm not exactly positive).

Can you mix custom styles in the my_styles.less file? Or is that only for changing styles already in the style.css for the template?

don't understand the question. *.less files are compiled into *.css files and then combined into the cached *.css files.

They “should be” loaded last and therefore any definitions they contain should override standard ones or ones used by addons with lower priority.

I appreciate your response but after following your steps (and double-checking them), I still don't get any results on the storefront. I've checked the permissions again, cleared the cache (with &cc, &ctpl, and manually - browser cache is also disabled) and still no luck. I created a CSS rule in my_styles.less called “.glen” so that I could search for that in Chrome's inspector and it just doesn't get included in any of the CSS. This is in 4.0.2 (free) with the My Changes addon installed and enabled.



Any additional ideas would be welcome.

thanks,

-Glen


[quote name='tbirnseth' timestamp='1380573885' post='168963']

Glenn,



Assuming the name of your theme is 'basic', do the following:

  • create the file design/themes/basic/addons/my_changes/hooks/index/styles.post.tpl

    In this file put: {style src=“addons/my_changes/my_styles.less”}
  • create the file design/themes/baseic/css/addons/my_changes/my_styles.less with the content you want. I.e.

    .h1 {font-size:larger;}
  • Invoke your URL with the ?cc parameter to clear out the original compiled css file. You can verify the modification times of the files if you're not confident the cached ones were cleared (or remove them manually). They are located at var/cache/misc/statics/design/themes/basic/css folder.



    This is for the customer (theme) view. For admin (backend) it is a little different, but basically the same. This is also for the 'single storefront' version (the old PRO). Not sure whether you get a different instance of the theme per storefront or whether the storefronts all share the same themes (what I would expect, but I think each storefront has its own instance of a theme and hence has a store identifier as a subdirectory of the theme, but I'm not exactly positive).

    [/quote]

Does it show up in the cache file versus the browser? I.e. can you find your '.glenn' in the var/cache/misc/…/*.css file(s)?

No - none of the cached files contain my “.glen” class. Running “grep -r 'glen' .” from bash on the site root returns only my original .less file.



thanks,

Glen


[quote name='tbirnseth' timestamp='1380652758' post='169007']

Does it show up in the cache file versus the browser? I.e. can you find your '.glenn' in the var/cache/misc/…/*.css file(s)?

[/quote]

Have you enabled “[color=#282828][font=arial, verdana, tahoma, sans-serif]Rebuild Cache Automatically” Template Editor screen?[/font][/color]

[color=#282828][font=arial, verdana, tahoma, sans-serif]I appreciate you're clearing caches manually, but worth a go.[/font][/color]

I was trying this also and it seems there is a bug…or something weird



Cs-cart is trying to load the styles.css that we want to load from /dev_installation/design/themes/basic/templates/addons/my_changes/ from /addons/my_changes/ instead



I am using 4.0.2 and i have installed at a folder next to my 2.2.5 install



2020 , can you verify this is or is not your issue…



update: i had to match the path in styles.post.tpl to my server for the .css file only and now everything is working ok .css and .less

Happy - You don't have to enable “rebuild automatically” (which really slows things down) if you clear the cached data manually or via url parameters (?cc)…

Glenn - I've not done anything in the customer area for adding css classes, only in the admin area. But what I specified should work. Can only assume there is a discrepancy between where you put your less file(s) and where you've told the cart to look.