How To Add Custom Css With My Changes Addon

I think, it is a most frequently asked question. So let me answer here for everyone.

The tutorial is actual for CS-Cart and Multi-Vendor 4.x

  1. Make sure that the status of the My changes add-on is Active (Add-ons β†’ Manage Add-ons )
  2. Create the design/themes/[your theme]/templates/addons/my_changes/hooks/index/styles.post.tpl file with the following content

{style src="addons/my_changes/styles.less"}

  1. Create the design/themes/[your_theme]/css/addons/my_changes/styles.less
  2. Add your CSS rules to this file
  3. Clear the cache (Administration > Storage > Clear cache)
  4. Check the result

See also:

2 Likes

How come My Changes addon is installed, but have red circle like a stop sign on it? Thanks for the help.

Could you please provide me with the screenshot?

[sharedmedia=core:attachments:8858]



Here's the SS. Thanks!

Unfortunately, this message is empty for us. Please check and contact me via PM

Could you tell me hot to add custom css or js for admin panel? :grin:

Dear littlee,


[quote name=β€˜littlee’ timestamp=β€˜1421890537’ post=β€˜203144’]

Could you tell me hot to add custom css or js for admin panel? :grin:

[/quote]



This is similar to adding process for customer panel. So you should make the following:

  1. Create directory with your add-on name in the β€œ/design/backend/templates/addons/” (if it is not exist).
  2. Create directory β€œ/design/backend/templates/addons/addon_name/hooks/” (if it is not exist).
  3. Create directory with for index hooks β€œ/design/backend/templates/addons/addon_name/hooks/index/” (if it is not exist).
  4. Create post- or pre-hook file for styles or scripts. For styles it should be styles.pre.tpl or styles.post.tpl and for scripts it sould be scripts.pre.tpl or scripts.post.tpl. Do not use override hook because this will rewrite all that contain between hook open and hook close tags.
  5. Open the created files and add the following:

    a) for styles (if you use less, use the β€œless” instead of β€œcss”):

    {style src="addons/addon_name/style.css}

    B) for scripts:

    {script src="js/addons/addon_name/script.js}



    Please be sure, that you have created the Style and Script files that you added in these files.

    CSS files should be located here:

    β€œ/design/backend/css/addons/addon_name/”

    JS files should be located here:

    β€œ/js/addons/addon_name/”



    If you need an additional information about add-on creation you can read the official documentation:

    Advanced Add-on Tutorial β€” CS-Cart 4.0.x documentation



    I hope, that my message help you.



    Have a nice day,

    Andrey.
1 Like

Could you tell me hot to add custom css or js for admin panel? :grin:

Sorry, we missed your request. Let me make the post of Andrey Sidorov more readable

How To Add Custom Css With My Changes Addon To Admin Panel

The tutorial is actual for CS-Cart and Multi-Vendor 4.x

  1. Make sure that the status of the My changes add-on is Active ( Add-ons β†’ Manage Add-ons )
  2. Create the design/backend/templates/addons/my_changes/hooks/index/styles.post.tpl file with the following content

{style src="addons/my_changes/styles.less"}

  1. Create the design/backend/css/addons/my_changes/styles.less file
  2. Add your CSS rules to this file
  3. Clear the cache ( Administration > Storage > Clear cache )
  4. Check the result

Thank you all.

1 Like

I need some help, please!

While I views products in their category, all my fonts are red and the product name is darkred but becomes the normal red FF0000 when I hover my mouse over it. How could I stop this effect for that part? I think I tried everything, please advice me!

Just add the necessary styles in the CSS section of the Theme editor. If you want to receive CSS rules from us, please share the URL of your website.

It's ok, just needed to edit the @font variable in theme's css.

Also, can anyone explain what the styles.pcl.css file is under the design/themes/yourtheme/css/addons/mychanges location and what it’s CSS contents are from? I am just learning to use this add-on and have not yet added anything to this location myself. I don’t understand where it pulled this code from or why it is there.


Thanks to anyone who can clue me in on this.

If you have a styles.pcl.css file in the design/themes/yourtheme/css/addons/mychanges folder (usually it is my_changes), CSS styles are taken from this file.

It is included usually in the design/themes/yourtheme/templates/addons/my_changes/hooks/index/styles.post.tpl file.

Also, can anyone explain what the styles.pcl.css file is under the design/themes/yourtheme/css/addons/mychanges location and what it's CSS contents are from? I am just learning to use this add-on and have not yet added anything to this location myself. I don't understand where it pulled this code from or why it is there.

Thanks to anyone who can clue me in on this.

This file is not from the CS-Cart installation package. Looks like developers who worked on your website added this file. As alternative, it was added while 3rd party module installation

Use can also search a file with '{include file='addons/mychanges/styles.pcl.css'} line.

Sorry, we missed your request. Let me make the post of [b]Andrey Sidorov[/b] more readable

[b] [size=6][b]How To Add Custom Css With My Changes Addon To Admin Panel[/b][/size][/b]


The tutorial is actual for CS-Cart and Multi-Vendor 4.x

1. Make sure that the status of the [b]My changes[/b] add-on is [b]Active [/b]( [b]Add-ons -> Manage Add-ons[/b] )
2. Create the [b]design/backend/templates/addons/my_changes/hooks/index/styles.post.tpl[/b] file with the following content

{style src="addons/my_changes/styles.less"}
3. Create the [b]design/backend/css/addons/my_changes/styles.less[/b] file
4. Add your CSS rules to this file
5. Clear the cache ( [b]Administration > Storage > Clear cache[/b] )
6. Check the result

Thank you all.

Thank you very much for the detailed tutorial, worked correctly for me

tzic, you are welcome!

The problem with putting your styles in the my_changes addon is that the theme styles will override them - i.e design/themes/yourtheme/styles/data/selectedstyle.less and selectedstyle.css (updated by the theme editor) are included AFTER all the styles in styles.tpl including any added at the end with post.tpl overrides in addons. This can be really frustrating at times when you can't figure out why the css you added in my_changes isn't working.

There are a couple of ways to avoid this.

1. Copy everything in selectedstyle.less followed by selectedstyle.css to the top of your my_changes styles.less file. Create design/themes/yourtheme/styles/data/mynewstyle.less and mynewstyle.css as empty files. Switch to mynewstyle on the admin Themes page. Quit using the theme editor for anything but logo images. This gives you one place to go to make your css changes and when you add a rule to the bottom of that one file it overrides any stock cs-cart rules.

2. Copy everything in selectedstyle.less and selectedstyle.css to mynewstyle.less and mynewstyle.css Switch to mynewstyle on the admin Themes page. Quit using my_changes for css. You can keep using the Theme editor but you still have 2 files to look at for css changes. If you edit these files directly without using the Theme editor then you need to clear cache for them to take effect even if you have Rebuild cache automatically turned on (reported as a bug). You can also make multiple copies of the files for testing and switch back and forth using the admin themes page. A nice way to try out a couple of alternatives when fooling around with different looks.

3. Same as 2 but combine the less and css into the new less file and make the css file empty. Quit using the Theme editor. Still has the Rebuild cache issue. Give you one file to look at / edit for css changes.

If you combine the less and css files into a single less file its worth taking an hour to consolidate and organize the rules to make it a bit easier to find existing rules.

The order of the included files is:

- All the css files are included through hooks: pre (that are added by an add-on).
- All the css files are included in the order as they are defined in the file: design/themes/basic/templates/common/styles.tpl
- All the css files are included through hooks: post (that are added by an add-on).
- All the less files are included through hooks: pre (that are added by an add-on).
- All the less files are included in the order as they are defined in the file: design/themes/basic/templates/common/styles.tpl
- All the less files are included through hooks: post (that are added by an add-on).
- All the inline styles that are added to the design/themes/basic/templates/common/styles.tpl template with the tag.
- The preset less file is included.
- All the styles added to the Custom CSS field in a Visual Editor.
But your ways are to complex. It is easier to use the CSS weight to override default CSS rules. For example. div with the id tygh_container exists on all pages

Also, can anyone explain what the styles.pcl.css file is under the design/themes/yourtheme/css/addons/mychanges location and what it's CSS contents are from? I am just learning to use this add-on and have not yet added anything to this location myself. I don't understand where it pulled this code from or why it is there.

Thanks to anyone who can clue me in on this.

styles.pcl.css is created by the Theme Editor link to Convert to CSS. It compiles your styles.less files to normal css and puts them in styles.pcl.css files. As the tool tip notes once done you can no longer use the Theme Editor to make changes, you'll just get an edit box to manually edit the one giant themes/mytheme/css/styles.pcl.css file with all of the cs-cart styling from several different files included. Your addons will have their less files converted to pcl.css files as well and you can no longer use any less features in them. You can switch back to using styles.less (button appears in Theme Editor after Convert to CSS) but any changes made to the pcl.css files will be lost. So you apparently created a my_change styles.less file and then converted to CSS. I would recommend switching back to less before making any changes.