This should be a simple thing to do with css, but i cannot find the code.
I upgraded to 4.2.1 and changed to the “Facebook” theme. I changed the colors to match our colors, but I want to change the top bar to a darker color, but the My Account menu (text and user icon) and language menu colors aren’t editable in the Theme Editor for some reason.
What would be the css code to change those menus? is the little “user icon” beside My Account also editable?
Thanks.
[quote name='SwimShady' timestamp='1408125840' post='189682']
This should be a simple thing to do with css, but i cannot find the code.
I upgraded to 4.2.1 and changed to the “Facebook” theme. I changed the colors to match our colors, but I want to change the top bar to a darker color, but the My Account menu (text and user icon) and language menu colors aren't editable in the Theme Editor for some reason.
What would be the css code to change those menus? is the little “user icon” beside My Account also editable?
Thanks.
[/quote]
You should change:
.ty-dropdown-box__title a {
color: darken(@base, 40%);
}
and
.ty-minicart__icon {
color: darken(@base, 45%);
top: 7px;
font-size: 14px;
position: absolute;
}
Classes are located in /design/themes/responsive/css/styles.less , but we recommend you create new .css file for changes.
The easiest way to find ANY CSS parameter that is applied to your store is to use Firefox's Firebug addon. It allows you to instantly find the CSS parameter that is being applied and even modify it temporarily so you can experiment with changes.
As an example:
When I do bulk edits of products, I will select 40 products at a time so I can change their categorization. The title of the product is always included in the editable list, but the form field is so small you can't see the entire title. I use Firebug to temporarily enlarge the field size from 150px to 350px. The change is only applied to my view of that page so I can see the entire title at a glance.
Using Firebug (and CS-Cart addon: My_Changes) I successfully changed my v3 store to a black background with white text on all product pages, lists, forms, pages, news, menus, etc.
V4 makes it more difficult for you to directly edit the original CSS file (or .less file) because the CSS is all compiled into one cached file - but that's OK, since you really want to just add your modified parameters to your own CSS file anyway (or add them to the Theme Editor's Custom CSS form.)
There is no need to create new .css file or override default one. Just use the CSS section in the theme editor to add new css rules
[quote name='Magpie Don' timestamp='1408292923' post='189766']
The easiest way to find ANY CSS parameter that is applied to your store is to use Firefox's Firebug addon. It allows you to instantly find the CSS parameter that is being applied and even modify it temporarily so you can experiment with changes.
As an example:
When I do bulk edits of products, I will select 40 products at a time so I can change their categorization. The title of the product is always included in the editable list, but the form field is so small you can't see the entire title. I use Firebug to temporarily enlarge the field size from 150px to 350px. The change is only applied to my view of that page so I can see the entire title at a glance.
Using Firebug (and CS-Cart addon: My_Changes) I successfully changed my v3 store to a black background with white text on all product pages, lists, forms, pages, news, menus, etc.
V4 makes it more difficult for you to directly edit the original CSS file (or .less file) because the CSS is all compiled into one cached file - but that's OK, since you really want to just add your modified parameters to your own CSS file anyway (or add them to the Theme Editor's Custom CSS form.)
[/quote]
Thanks Magpie Don! (kinda sounds like a dirty name)
I will have to reinstall firefox, been using chrome instead. Sounds like a great addon fro v4. It's gonna help me so much! I was wondering how the heck they did their css…it was nearly impossible to find in the their original file in File Editor. All I saw was a weird .css file when looking in Chrome's “Inspect element” feature.
[quote name='eComLabs' timestamp='1408351962' post='189810']
There is no need to create new .css file or override default one. Just use the CSS section in the theme editor to add new css rules
[/quote]
Thanks eCom Labs. That's one of the question I posted in another post. I wasn't sure what happened to My_Changes, and if it was still necessary for css changes.
Cart-Power, that changes the “Cart is empty” text, not the My Account text. But thanks for trying to help.
I actually ended up finding the css code:
.logged .ty-account-info__title, .logged .ty-account-info__user-arrow {
color: #FFFFFF;
}
and this to change the language color (left of top bar):
.ty-select-block__a-item {
color: #ffffff;
}
.ty-select-block__arrow {
color: #ffffff;
}
[quote name='Cart-Power' timestamp='1408287129' post='189762']
You should change:
.ty-dropdown-box__title a {
color: darken(@base, 40%);
}
and
.ty-minicart__icon {
color: darken(@base, 45%);
top: 7px;
font-size: 14px;
position: absolute;
}
Classes are located in /design/themes/responsive/css/styles.less , but we recommend you create new .css file for changes.
[/quote]