For the the top and side menus we don't want gradients; we'd prefer a flat colour look on our site rather than the gradient look. How do we do this on 4.0.2? Thank you for any advice you can provide.
We thought that CS-Cart could simply answer the question to help all of us who prefer a flat colour like CS-Cart.com . So we asked CS-Cart via a support ticket. Here's what we sent, “For the the top menus, side menus, buttons, etc. we don't want gradients; we'd prefer a flat colour look on our site rather than the gradient look. How do we do this on 4.0.2? You can help all of your customers by posting the answer to our forum post here http://forum.cs-cart.com/topic/33335-how-to-go-flat-with-402/”.
Here's CS-Cart's reply refusing to help us, their customers here on the forum but instead want to charge us to do so; “Unfortunately, you have run out of your support credit balance, so now we cannot render you assistance free of charge. If you want to continue using our support service, you need to order support credits on the Services page in your Help Desk account ( http://www.cs-cart.c…r-services.html ). I rely on your cooperation.”
It's a fair and easy question for CS-Cart to answer considering their own site and this forum both are using flat colours rather than gradients.
The way to achieve this is by overriding the css classes using my_changes. In topic http://forum.cs-cart…ed/page__st__40 you can find some scattered information about the my_changes addon. Unfortunattely the documention how to use this addon is not available yet for version 4.
I use firebug to determine which classes I want to changes and add them to styles.css or dropdown.css (for menu styles) located in design/themes/[theme_path]/css/addons/my_changes/
So for the sideboxes and dialog screens I add to styles.css
.ui-dialog, .
ui-dialog-titlebar,
.sidebox-important-wrapper,
.sidebox-wrapper > .sidebox-title {
background: whatever I like;
}
So for the topmenu I add to dropdown.css
ul.dropdown-multicolumns {
background: whatever I like;
}
Hopefully this will get you on your way.
[quote name='ehenderichs' timestamp='1382523556' post='170197']
The way to achieve this is by overriding the css classes using my_changes. In topic http://forum.cs-cart…ed/page__st__40 you can find some scattered information about the my_changes addon. Unfortunattely the documention how to use this addon is not available yet for version 4.
I use firebug to determine which classes I want to changes and add them to styles.css or dropdown.css (for menu styles) located in design/themes/[theme_path]/css/addons/my_changes/
So for the sideboxes and dialog screens I add to styles.css
.ui-dialog, .
ui-dialog-titlebar,
.sidebox-important-wrapper,
.sidebox-wrapper > .sidebox-title {
background: whatever I like;
}
So for the topmenu I add to dropdown.css
ul.dropdown-multicolumns {
background: whatever I like;
}
Hopefully this will get you on your way.
[/quote]
You may need to pre-fix yourr CSS rules with “#tygh_main_container” or some other specific value to override the default CSS. 4.0.2 was supposed to fix this, but the two versions I have installed still work wonky.
For instance:
#tygh_main_container ul.dropdown-multicolumns {
background: whatever I like;
}
[quote name='Galactica' timestamp='1382538470' post='170209']
You may need to pre-fix yourr CSS rules with “#tygh_main_container” or some other specific value to override the default CSS. 4.0.2 was supposed to fix this, but the two versions I have installed still work wonky.
For instance:
#tygh_main_container ul.dropdown-multicolumns {
background: whatever I like;
}
[/quote]
I can confirm this is still the case - we are running 4.0.2 and to override the default styles of main containers (ie top menu bar) we need to prefix CSS as you have stated.
For example, here's something from our my_changes.less file:
.tygh-top-panel {
border-bottom: 1px solid #2581bc;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
I'm not sure if declaring styles with !important is still required as of 4.0.2, but with 4.0.1 it definitely was… the CSS ordering was completely wrong in 4.0.1.
A custom my_changes LESS file works best for styles that are already in CS-CART. I only use the my_changes CSS file for new styles that I've added.
The my_changes documentation was updated for version 4 quite a while ago - [url=“http://docs.cs-cart.com/my-changes”]http://docs.cs-cart.com/my-changes[/url]
If you 'hack' the definition of the gradient function in the CSS and 'ignore' one of the two colours passed as arguments (just set both 'from' and 'to' colours as one of the two arguments) it will more or less go flat instantaneously.
You can look at the CSS overrides for the Reddish preset in 4.0.3 too…