Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

How To Add Custom Css With My Changes Addon Rate Topic   * * * * * 3 votes

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 21 October 2014 - 08:33 AM #1

*
POPULAR

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"}

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

See also:
- How To Add Custom Javascript With My Changes Addon
- How To Add A New Carrier

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • luongbui
  • Newbie
  • Trial users
  • Join Date: 07-Dec 14
  • 9 posts

Posted 10 December 2014 - 07:17 PM #2

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

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 11 December 2014 - 08:10 AM #3

Could you please provide me with the screenshot?

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • luongbui
  • Newbie
  • Trial users
  • Join Date: 07-Dec 14
  • 9 posts

Posted 13 December 2014 - 10:07 PM #4



Here's the SS. Thanks!

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 15 December 2014 - 09:29 AM #5

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

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • littlee
  • Newbie
  • Trial users
  • Join Date: 22-Jan 15
  • 1 posts

Posted 22 January 2015 - 01:35 AM #6

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

 

Posted 26 March 2015 - 03:29 PM #7

Dear littlee,

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


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"):
<code>{style src="addons/addon_name/style.css}</code>
B) for scripts:
<code>{script src="js/addons/addon_name/script.js}</code>

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:
http://docs.cs-cart....s/advanced.html

I hope, that my message help you.

Have a nice day,
Andrey.

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 27 March 2015 - 01:13 PM #8

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"}

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

Thank you all.

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • McBad
  • Newbie
  • Trial users
  • Join Date: 28-Apr 15
  • 5 posts

Posted 03 May 2015 - 12:56 AM #9

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!

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 04 May 2015 - 02:27 PM #10

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.

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • McBad
  • Newbie
  • Trial users
  • Join Date: 28-Apr 15
  • 5 posts

Posted 04 May 2015 - 09:05 PM #11

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

 

Posted 17 December 2015 - 03:13 AM #12

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.

 
  • oleg.gorshkov
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 06-Dec 13
  • 3139 posts

Posted 17 December 2015 - 06:37 AM #13

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.


Simtech Development | sales@simtechdev.com | www.simtechdev.com
CERTIFIED CS-CART PARTNER | LICENSES | DEVELOPMENT | ADD-ONS | DESIGN | UPGRADE

Mega SEO Package - All you need for your SEO


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 17 December 2015 - 07:51 AM #14

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • oleg.gorshkov
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 06-Dec 13
  • 3139 posts

Posted 17 December 2015 - 08:48 AM #15

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


Simtech Development | sales@simtechdev.com | www.simtechdev.com
CERTIFIED CS-CART PARTNER | LICENSES | DEVELOPMENT | ADD-ONS | DESIGN | UPGRADE

Mega SEO Package - All you need for your SEO


 
  • tzic
  • Member
  • Trial users
  • Join Date: 15-Dec 15
  • 39 posts

Posted 13 January 2016 - 12:58 PM #16

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"}
3. Create the design/backend/css/addons/my_changes/styles.less file
4. Add your CSS rules to this file
5. Clear the cache ( Administration > Storage > Clear cache )
6. Check the result

Thank you all.

 

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 13 January 2016 - 02:59 PM #17

tzic, you are welcome!


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • straygecko
  • Advanced Member
  • Members
  • Join Date: 01-May 13
  • 92 posts

Posted 22 January 2016 - 02:51 AM #18

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.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18477 posts

Posted 22 January 2016 - 08:01 AM #19

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 <style></style> 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

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • straygecko
  • Advanced Member
  • Members
  • Join Date: 01-May 13
  • 92 posts

Posted 22 January 2016 - 04:45 PM #20

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.