Best Practices Amending Css In V4.x

Developers Frontend
1

Hi



My question has come up in part in other threads but I am posting a new one just to mate my needs. As a store owner with two licenses for a CS-Cart V4 Ultimate running currently V4.1.3 and a custom skin I purchased from a vendor that has done several cool (IMHO) skins for CS-Cart.



Let me start my questions


  1. I am trying to enlarge the font used in the product description from to 13 pixels for better reading. How can I accomplish this, which CSS file am I to edit


  2. The product tabs on the product detail page are absent in my CS-Cart installation. That is the borders are absent. Where can I change the selector for the div



    For your information:

    I am using both web developer in Chromium as my primary developing webbrowser in Ubuntu LTS 14.04 right now and otherwise on Windows 7 Pro with Firefox 29 and Google Chrome (I wish there was a decent non Google Chromium browser for Windows … but that is off topic)



    at any rate I am puzzled on to which css file to amend and get the job done. Sofar I am unsuccesfull in finding the selectors I see under firebug in any of the css files which I should edit



    http://kb.cs-cart.co…product-details



    Best regards
2

Well, in  my opinion, it can be in public_html/design/themes/YOUR_TEMPLATE_NAME/css



and don't forget to clear cache in public_html/var/cache/misc/statics/design/themes/YOUR_TEMPLATE_NAME/css



and press Ctrl+F5 in your browser



otherwise we need more details. Good luck!

3

this may help

4

For quick changes you can just edit the CSS on the custom CSS tab of the theme editor.



This updates the CSS and LESS files for your selected layout within the selected theme. For example /design/themes/{yourtheme}/styles/data/{yourstyle}.css



You can also edit these files directly which is easier for more than a couple of mods. You don't need to modify any other CSS files as these take precedence.



It's best, while making development changes, to set the Rebuild Cache Automatically (under design) to On. This saves having to clear the cache all the time.



As far as I can tell there is no need to use mychanges anymore for CSS/LESS changes. It's more for template modification with the way 4.x is structured.

5

[quote name='Webmaster_at_Mungotedo' timestamp='1398879763' post='182714']

Hi



My question has come up in part in other threads but I am posting a new one just to mate my needs. As a store owner with two licenses for a CS-Cart V4 Ultimate running currently V4.1.3 and a custom skin I purchased from a vendor that has done several cool (IMHO) skins for CS-Cart.



Let me start my questions


  1. I am trying to enlarge the font used in the product description from to 13 pixels for better reading. How can I accomplish this, which CSS file am I to edit


  2. The product tabs on the product detail page are absent in my CS-Cart installation. That is the borders are absent. Where can I change the selector for the div



    For your information:

    I am using both web developer in Chromium as my primary developing webbrowser in Ubuntu LTS 14.04 right now and otherwise on Windows 7 Pro with Firefox 29 and Google Chrome (I wish there was a decent non Google Chromium browser for Windows … but that is off topic)



    at any rate I am puzzled on to which css file to amend and get the job done. Sofar I am unsuccesfull in finding the selectors I see under firebug in any of the css files which I should edit



    http://kb.cs-cart.co…product-details



    Best regards

    [/quote]



    Please note that custom CSS changes can be added in the following way:


  3. Log in the admin panel
  4. Go to Design → Themes
  5. Click on the “Visual Editor” button near the “Main” layout
  6. On the opened page you will see the sidebar
  7. Select the “Custom CSS” item in the “Custmoize” selectbox
  8. Add required style changes (like in the .css file) in the textarea and click on the “Save” button



    Hope that helps.
6

[quote name='eComLabs' timestamp='1399019023' post='182781']

Please note that custom CSS changes can be added in the following way:


  1. Log in the admin panel
  2. Go to Design → Themes
  3. Click on the “Visual Editor” button near the “Main” layout
  4. On the opened page you will see the sidebar
  5. Select the “Custom CSS” item in the “Custmoize” selectbox
  6. Add required style changes (like in the .css file) in the textarea and click on the “Save” button



    Hope that helps.

    [/quote]



    Quite frankly that helps… not, not in the sense of right now.

    Your input is appreciated but that is not my question right now.



    Quite simpy, I want to identify the css files in on my webserver in the filesystem of my cs-cart installation which have the properties that I see in my split window while inspecting the css in my Firefox and or Chromium browser(s).



    See image below (in this case IE11)





    row 1496 of which css file has the selector #f4e9f9



}
.tabs ul li {
background-color: #f4e9f9;
background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f4e9f9));
background: -webkit-linear-gradient(top,#ffffff,#f4e9f9);
background: -moz-linear-gradient(top,#ffffff,#f4e9f9);
background: -ms-linear-gradient(top,#ffffff,#f4e9f9);
background: -o-linear-gradient(top,#ffffff,#f4e9f9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefffe', endColorstr='#fff3e8f8', GradientType=0);
}




and resides where in the filesystem. I cannot find it.

7

What you see in firebug (or equivalent) has no relation to line numbers in the individual css files.



What you are looking at is a compilation of system “less” files, system “css” files, addon “css” or “less” files put together and compressed/cached as a single css file. The location for customer view css cache is located in /var/cache/misc/[STORE_NUMBER]/theme_editor/standalone.[ugly key value].css



So what @ecommlabs recommended above is simply a short-cut to getting there. It is recommended that you “overload the classes” rather than to change the distributed versions so that you won't have conflicts if/when your site is upgraded.



If you're interested in the location of the “uncompiled” versions, they are located in desgin/themes/[THEME]/css directory tree.

8

[quote name='tbirnseth' timestamp='1399103208' post='182820'] What you see in firebug (or equivalent) has no relation to line numbers in the individual css files. What you are looking at is a compilation of system “less” files, system “css” files, addon “css” or “less” files put together and compressed/cached as a single css file. The location for customer view css cache is located in /var/cache/misc/[STORE_NUMBER]/theme_editor/standalone.[ugly key value].css So what @ecommlabs recommended above is simply a short-cut to getting there. It is recommended that you “overload the classes” rather than to change the distributed versions so that you won't have conflicts if/when your site is upgraded. If you're interested in the location of the “uncompiled” versions, they are located in desgin/themes/[THEME]/css directory tree. [/quote]



taking all of you who participated in supplying me with advise I am learning new things. The learning also brings new questions to mind like:


  1. if what I see in firebug or any other tool has no relation to actual individual css files, where then are the properties that firebug reveal actually in place ? Not in the uncompiled files for sure because I already examined the entire file system of my cs-cart install. Where is it then ?


  2. if the properties I see are not in the uncompiled files but in can be found as

    /var/cache/misc/[STORE_NUMBER]/theme_editor/standalone.[ugly key value].css, why can't I find the value properties not in those compiled .css files



    I am mistyfied in the way CS-Cart V4 handles CSS

    Can anyone of you clarify to me as a certain layperson how this works ?
9

They are in individual files but you don't need to know where they are. The whole idea of the CS-Cart system is that any CSS you add overrides or adds to the existing CSS. Editing the source files is a very, very bad idea as it will make upgrades awkward.



As has been said by myself and others in this thread you just need to put the CSS you want in the place provided in the theme editor (or edit the files used by that directly).



All you need to know is the class names and you can see those in Firebug. Where they come from is irrelevant.

10

Or you can also create your own individual css that will be added to the rest by using the my_changes styles.post.tpl hook. There are plenty of examples on the forum of how to do that. But the easiest way for a merchant (I.e. not a developer) is to utilize the Admin interface and the theme editor.

11

[quote name='Webmaster_at_Mungotedo' timestamp='1399049890' post='182801']

Quite simpy, I want to identify the css files in on my webserver in the filesystem of my cs-cart installation which have the properties that I see in my split window while inspecting the css in my Firefox and or Chromium browser(s).

[/quote]



Please check post #2 in the following thread:



Question About Rebuild Cache Automatically - Issues & Troubleshooting - CS-Cart Community Forums



@Vali offered a good solution to temporary disable merging of the css files. So you will be able to identify the location of the required files.



Hope that helps.