Version 4 Theme Editing beyond built in editor

Hi,





First of all congratulation for version 4. It looks for a really good release.

As I can see in version 4 theme folders, and CSS files were completely changed. My aim is to create a custom theme based on the default theme using absolutely different CSS rules.

As I can see you merge CSS files into a “standalone” file.

Could you please give me a short guide, how the new CSS styleing engine works? How to copy or create a new skin? How to change or overwrite basic CSS rules?



Thanks

Hello, i am looking for the same, a quick tutorial for customize the css files with my_changes.

I would also love to see documentation on this as all of the docs are for v3 with the exception of the add-on documentation… I can't even find docs on the new theme editor or any of the new features for that matter…

Edit the CSS files using the paths as shown in the built-in editor. You don't need to use that editor (I use RapidPHP). The merged file is presented from those individual files.

[quote name='NairdaCart' timestamp='1372685739' post='164680']

Edit the CSS files using the paths as shown in the built-in editor. You don't need to use that editor (I use RapidPHP). The merged file is presented from those individual files.

[/quote]



Thanks for the tip NairdaCart! If I use the editor or edit the main stylesheets directly, will they be overwritten when a cart upgrade comes through?

[quote name='Galactica' timestamp='1372693435' post='164684']

Thanks for the tip NairdaCart! If I use the editor or edit the main stylesheets directly, will they be overwritten when a cart upgrade comes through?

[/quote]



My best guess is: yess they will be overwritten after an cs cart update.



You need to use the my_changes addon to make sure you will keep your customisations. That said. This didn't hold true for v3 to v4.

I cloned my theme first so I'd be surprised if the upgrade overwrote that as it doesn't exist in the original release.



Also I only ever add CSS code or change the user defined sections.



Never been a fan of the my_changes type solutions for CSS but I have started using it in V4 and it seems to work perfectly.

[quote name='NairdaCart' timestamp='1372751699' post='164714']

I cloned my theme first so I'd be surprised if the upgrade overwrote that as it doesn't exist in the original release.



Also I only ever add CSS code or change the user defined sections.



Never been a fan of the my_changes type solutions for CSS but I have started using it in V4 and it seems to work perfectly.

[/quote]



If you don't mind me asking, what is the code you have in your “styles.post.tpl”? I can't get mine to point to my stylesheet…

[quote name='Galactica' timestamp='1372799155' post='164747']

If you don't mind me asking, what is the code you have in your “styles.post.tpl”? I can't get mine to point to my stylesheet…

[/quote]



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

[quote name='NairdaCart' timestamp='1372800550' post='164749']


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


[/quote]



Thanks NairdaCart, turns out I had that part right but for some reason even though I cleared the cache through the admin and my browser it wouldn't update.



Turns out that I had to manually delete the standalone CSS file off of the server and refresh my browser to see the changes… Big thanks to ehenderichs for the tip.

hello all.

I edit skin basic in cs-cart V4, but when I change CSS in basic theme, website not change, I try delete cookies but not okie. I don't know why, in V4 beta, I change okie, but now V4 I don't can done it. Who can tell me why

Hello,

If you want to do some changes to the css play with scheme.less, base.css, styles.css. You can find them in the css folder. I'm not a web-designer, but I noticed that scheme.less overwrites most of the code in base.css and styles.css. So if you want something changed make sure you look for the css code in scheme.less.



Hope it helps.

Thanks [quote name='shopinca' timestamp='1373291067' post='165004'] Hello, If you want to do some changes to the css play with scheme.less, base.css, styles.css. You can find them in the css folder. I'm not a web-designer, but I noticed that scheme.less overwrites most of the code in base.css and styles.css. So if you want something changed make sure you look for the css code in scheme.less. Hope it helps. [/quote]

Thanks!

Hi all - I am a newbie…I am trying to figure out in basic terms how to even use the My Changes add-on. I have installed and enabled the add-on.



Now I go to one of the styles.post.tpl files (which one? there are about 20 of them), and then I add this:

{style src=“addons/my_changes/mystyles.css”}

Then I create the above directory and css file and make any css changes I want to that file?



Which addons folder are we talking about as there are at least two?



BTW - there is no directory in my addons folder called “my_changes” so i need to create it?



Thanks for your help, I just want to be able to add and use my own CSS to overwrite some basic design features.



Jacson

You put your custom CSS file into design/themes/basic/css/addons/my_changes



Your styles.post.tpl file goes into design/themes/basic/templates/addons/my_changes/hooks/index



If you've created your own theme/skin then change basic to the name of that.



Make sure that you set the cache to rebuild automatically in the Design/Template Editor section of the CS-Cart dashboard.

Thanks! That worked! I appreciate the help.



Jacson

Got it, Should have read a little further down.

Yes - I first activated the addon “My changes”, ( I think that adds the directory “my_changes” to a bunch of places) then any directories that don't exist you need to create them, as long as you follow the hierarchy. I also created the mystyles.css file



Hope that helps, its pretty easy and works great.