Help With Custom Ccs And Visual Editor Overwrite

Hello.


Can anyone provide some much needed help regarding custom CSS and the way the visual editor overrides CSS changes with LESS?


I have converted the visual editor into full CSS mode to making changes, as some of my changes to CSS code are edits [not additions] and the part of code I’m searching for is not available in the CSS section while in LESS mode…

  1. Is there a better way/place to make CSS changes so that I don’t have to search through thousands of lines of code? Or a way to search through this many lines of code to find a particular line?

  2. Is there a way to switch back the LESS mode, from full CSS mode, in the visual editor without loosing all my CSS changes?

  3. When using an application like web inspector or dev tools to find the CSS code of particular object I need to edit, what is the best way to make these CSS changes once I have identified the sections that need editing?



    I’m familiar with CS-Cart, CSS, and web development, but my true expertise is online ink distribution and finance, so any help from someone who is more knowledgable in these aspects would be greatly appreciated. Thank you.

You can use the 'My changes' add-on to include your custom CSS files.

Create your CSS file, for example 'design/themes/[your_theme]/css/addons/my_changes/styles.css'. Add your CSS there, you can even override the standard CSS.

Create the 'design/themes/[your_theme]/templates/addons/my_changes/hooks/index/styles.post.tpl' file with the following code:

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

Re-install the 'My changes' add-on in the administrator area.

So you will be able to make only necessary changes and only in this file.

1. Is there a better way/place to make CSS changes so that I don't have to search through thousands of lines of code? Or a way to search through this many lines of code to find a particular line?

3. When using an application like web inspector or dev tools to find the CSS code of particular object I need to edit, what is the best way to make these CSS changes once I have identified the sections that need editing?

Please check the following thread:

http://forum.cs-cart.com/topic/37510-how-to-add-custom-css-with-my-changes-addon/

Note that you can also use styles.css instead of styles.less, the .less file is included later so you can override necessary CSS rules in it

Thank you very much for your help, from both of you.


If you don’t mind me picking your brain further…


I’m assuming with the mentioned My Changes add on method you both described, this would be how to add CSS… What about if I am changing an already present section of CSS code.


Ie. What if I use a CSS inspector to identify a certain element on my site with a width of 500px and I want to change it to 800px?


Would it work for me to copy my entire CSS content from the full CSS mode in visual theme editor, delete it all, then copy it into a new file that I name styles.css and reference it in the My Changes addon as you both described?

This way I can just make changes or additions to the styles.css file when I need to, but keep my visual theme editor is LESS mode all the time? This would be great.


If this is possible it would be great. This way I can have full access to CSS and use theme editor in LESS mode.


I appreciate your help very much. It’s great to have a community who can fill it where my experience/knowledge is limited.

Thank you very much for your help, from both of you.

If you don't mind me picking your brain further...

I'm assuming with the mentioned My Changes add on method you both described, this would be how to add CSS.. What about if I am changing an already present section of CSS code.

Ie. What if I use a CSS inspector to identify a certain element on my site with a width of 500px and I want to change it to 800px?

Would it work for me to copy my entire CSS content from the full CSS mode in visual theme editor, delete it all, then copy it into a new file that I name styles.css and reference it in the My Changes addon as you both described?
This way I can just make changes or additions to the styles.css file when I need to, but keep my visual theme editor is LESS mode all the time? This would be great.

If this is possible it would be great. This way I can have full access to CSS and use theme editor in LESS mode.

I appreciate your help very much. It's great to have a community who can fill it where my experience/knowledge is limited.

Hi

The my changes addon allows you to make changes to already existing css one rule ad a time if you need to.

use something like firebug to identify the div

.ty-grid-list__image

border: 1px solid #1abc9c;

border-radius: 20px 0;
box-shadow: 5px 5px #ccc !important;
adding the div below to the style.less file in mychanges will change the border color in this instance to red.
.ty-grid-list__image
{
border: 1px solid red;
}

But would leave all the other properties as they are.

If you make changes to the core CSS files, they may be over written on upgrades.

Alan

Thank you very much for your help, from both of you.

If you don't mind me picking your brain further...

I'm assuming with the mentioned My Changes add on method you both described, this would be how to add CSS.. What about if I am changing an already present section of CSS code.

Ie. What if I use a CSS inspector to identify a certain element on my site with a width of 500px and I want to change it to 800px?

Would it work for me to copy my entire CSS content from the full CSS mode in visual theme editor, delete it all, then copy it into a new file that I name styles.css and reference it in the My Changes addon as you both described?
This way I can just make changes or additions to the styles.css file when I need to, but keep my visual theme editor is LESS mode all the time? This would be great.

If this is possible it would be great. This way I can have full access to CSS and use theme editor in LESS mode.

I appreciate your help very much. It's great to have a community who can fill it where my experience/knowledge is limited.

There is no need to override the whole CSS file. Just override CSS rules for the required elements with the styles.less file in the My changes module.

Thank you very much.


As per following the tutorial linked above, how can I override a specific CSS rule…


I understand how to add CSS code, as described in the reply just above this, but am still not understanding how to target a specific CSS rule to edit or override.


Use the same example as above with the .ty-grid-list_image CSS code; instead of adding the red border, which I understand how to do, how would I change the border radius from 20px to 10px?


Also, when editing .tpl files that do not have any hooks in the code, how would I use the my changes add-on to edit them so I don’t have to edit the original .tpl file.


And if anyone has the time and knowledge, it would be very helpful for many people to explain what the best way is to migrate changes made to original files in the past [before using the my changes add-on] to my changes files so that our edits made to original files will not get overridden in a future upgrade…


Thanks to everyone who has taken the time to help.

You would be best served to read a tutorial on css and understand how "cascading" works.

If you have a class that has 5 properties and you only want to change 2 of them, all you have to do is add another (later) instance of that class with the two properties defined that you want changed. Note that in some cases, you may have to use the '! important' qualifier to get your changes to have precedence.

For example, there is the CSS rule in the standard styles.less file:

.ty-btn__big {
    padding: 6px 17px;
    text-transform: uppercase;
}

You can use the same name in your own styles.less with the following values:

.ty-btn__big {
    padding: 0px;
    text-transform: none;
}

As it was mentioned, in some case you should add the !important setting, for example:

.ty-btn__big {
    padding: 0px !important;
    text-transform: none !important;
}

That's all. Enjoy.

3rd variants allows to use inheritance.

For example:

.ty-btn__big {
    padding: 0px;
    text-transform: none;
}
.ty-tygh .ty-btn__big {
    padding: 0px;
    text-transform: none;
}

Second variant will have higher priority

Thank you all for your help. I understand the concepts of CSS needed, but understanding the !important setting and the way the My Changes add-on works has been very helpful as all prior CSS knowledge was not in the application of CS-Cart.


Is there a thread reference, or someone who can answer the below question? I’ve seen it as a problem people often encounter as a beginner of CS-Cart who are developing an important extensive website and have not yet heard of a solution…


Is it possible to somehow isolate any changes that have been made to all the tpl, css, less, etc files prior to using the My Changes add-on so that all these changes won’t be lost during a future upgrade? Or if this is not yet figured our or just very complicated maybe a developer is interested in developing an add-on/program that will compare all the contents of every file with that of the original CS-Cart files from that version and highlight them for manual transfer. That would be very helpful and possibly a good idea if feasible but I’m sure would be quite complicated.


Again thanks to everyone for your help. It has helped me understand the inner workings of the My Changes add-on much better than any CS-Cart documents.

If you develop a modification with the help of 'addons' functionality, it will be isolated from the standard CS-Cart code. Add-ons can be created since very early version of CS-Cart.

You can use this instruction as a guidance: http://docs.cs-cart.com/4.3.x/developer_guide/addons/index.html

As for the changes in the standard code: when there is no way of isolating your code in the add-on, we insert our code to standard files directly, but with // [username] and // [/username] comments at the beginning and end of our code changes. This helps us to find the code injections when it is necessary.

Note that you will receive a list of modified files during the upgrade process.

Also there are many tools created for different OS (OS X, Windows, Linux..) which allows to compare directories. They are not relacted with CS-Cart

Also there is 3rd party module which allows to monitor files:

http://ez-ms.com/ez-maint.html

Here is what we found in the description:

Monitor common site files for new, removed or modified files. This
function will tell you what has changed on your site since the last
time it was run. Monitor this daily and ensure the changes make
sense. I.e. is this new PHP file supposed to be there? Why was
index.php modified? When did thumbs.php or test.gif appear?

Do note that the list of modified files is rarely accurate. The good news is that it usually errors on the side of being too aggressive in determining differences. I don't think I've had a 4.x upgrade that didn't identify language po files as being modified and they've never been touched.

And there's still no file compare routine like there was in V2 to help you find/understand the differences.

Thank you. That would be helpful to understand an accurate way to do this, especially with the new update coming this week. I want to upgrade but will loose tens of hours of work.


I figure I’d ask here since you all are very knowledgable with the use of My Changes for CSS files.


I did as described above and created both files [the styles.less and the file that references it] and then added the following CSS code to the styles.less file:


.about-co-subheader {

font-size: 16px !important;

color: blue !important:

}


I then made a new block in layout manager and added “about-co-subheader” [without the quotes] to the user-defined CSS class field. I cleared all caches manually [ie. deleted all 4 residing cache folders, cleared CS cart cache in admin panel, cleared server cache, and purged CDN cache and set into development mode] yet I can not get my changes to show.


Am I doing something wrong, or why will this block not inherent in the CSS class I referenced in the user-defined CSS class field in the block settings?

Thank you. That would be helpful to understand an accurate way to do this, especially with the new update coming this week. I want to upgrade but will loose tens of hours of work.

I figure I'd ask here since you all are very knowledgable with the use of My Changes for CSS files.

I did as described above and created both files [the styles.less and the file that references it] and then added the following CSS code to the styles.less file:

.about-co-subheader {
font-size: 16px !important;
color: blue !important:
}

I then made a new block in layout manager and added "about-co-subheader" [without the quotes] to the user-defined CSS class field. I cleared all caches manually [ie. deleted all 4 residing cache folders, cleared CS cart cache in admin panel, cleared server cache, and purged CDN cache and set into development mode] yet I can not get my changes to show.

Am I doing something wrong, or why will this block not inherent in the CSS class I referenced in the user-defined CSS class field in the block settings?

is .about-co-subheader an existing class or a new one. If it is in a new one best put it in Themes, visual editor, CSS

Also there are errors in the css. should be

.about-co-subheader

{
font-size: 16px !important;
color: blue !important;
}

and it's not really a good idea to just use Blue, use a #11111 colour.

Alan

Alan, just curious why you want to put it in the database if it's not an existing class?

co_link_dist, if you have other tags in your block then you will probably need to more specifically reference the class. I.e. if your text is actually in a span like:

This is a test of my class

then you might have to use a class of:

.about-co-subheader p span {

though

.about-co-subheader span {

should work if you don't have any other spans in the text.

Note that a "block" is generally a 'div container' type of object.

But you really have to look at this in a code inspector to know what the real class hierarchy is so you'll know how to set it.

Thank you. I still can not resolve it. I added p and span to the end of the CSS class code in the styles.less file as you advised [set up with the my changes add-on exactly as described at the top of this topic] but it did not work.


I’m not using the theme editor CSS because I’m trying to do it through my changes add-on so I will not lose these changes during next CS Cart upgrade… Also the blue and font size will not actually be used but are just a way to verify that it works once it does.


And not all are text, for instance the search field block at the top right have a user-defined css class of ‘top-search’ and the corresponding code looks exactly like mine does just with a different class name and values…


Any help would be very much appreciated, as the only difference between mine and the default CS Cart blocks with correctly working user-defined css classes is that my code is in the styles.less file in the CSS/addons/my_changes/ that I made as described above and according to the referee tutorial…


Thank you to all who have contributed, I’ll be grateful for any further suggestions that can help me resolve this.

I figured it out by changing the extension on both the styles. file and the reference of it in the styles.post.tpl file from .less to .css but it only works in an html block by

Text Here




But this is not what I need… I need it to work when using the class in the “User-Defined CSS Class” field of block/grid settings…


If I put:

p,

a,

div,

span,

.about-co-subheader {

My CSS attributes/values here

}


It turns all the text on my website blue… I can not figure out how to set it up correctly so the CSS class is only used on objects when the class is put into “user-defined CSS class” field in block or grid settings.


Thank you to everyone of help for your time and knowledge.

Alan, just curious why you want to put it in the database if it's not an existing class?

co_link_dist, if you have other tags in your block then you will probably need to more specifically reference the class. I.e. if your text is actually in a span like:

This is a test of my class

then you might have to use a class of:

.about-co-subheader p span {

though

.about-co-subheader span {

should work if you don't have any other spans in the text.

Note that a "block" is generally a 'div container' type of object.

But you really have to look at this in a code inspector to know what the real class hierarchy is so you'll know how to set it.

Hi tbirnseth

No real reason other than the user seems to be very confused about the CSS, My response wasn't very well devised. I often find it easy to test my CSS from the visual editor and when I have it all working I put it into the styles.less files. Save me having FTP all the time.

But I am working across two PCs with six monitors. So I can have lots of things open all at once.

Alan