I have created two extra tabs in woocommerce product pages, however the text now breaks if you move to a smaller screen, if there away to avoid this, i also need to change the text colour.
http://allabouthome.co.uk/product/butler-style-writing-desk-with-foldable-legs/
After a bit of research i managed to use this code to style the tabs, i also removed the reviews tab as not needed and seems to display the text fine now!
/* active tabs */
.woocommerce-tabs ul li.active a {
Background-color: #99f7ab;
}
/* inactive tabs */
.woocommerce-tabs ul li a {
Background-color: #70be51;
}
/* active tabs text */
.woocommerce-tabs ul li.active a {
Color: #60695c !important;
}
/* active tabs text */
.woocommerce-tabs ul li a {
Color: white !important;
}
Related
Hovering on the webpage works, but NOT as intended. I want the text color to change on hover over a list's item. At this point, the hover changes the color of the text ONLY when hovered over the text, but not on the item itself.
Vimeo video
On the first webpage, it can be seen how the hovering works only on the text itself, and on the second webpage, the color of the text changes when hovered over both list item and text. I want to make the first webpage's side menu just like that. I am using wordpress for the creation of the webpage and custom CSS for styling.
The current CSS code, related to hovering and color change:
.et_pb_widget ul li {
background-color: #f9f9f9;
padding: 10px;
}
.et_pb_widget ul li:hover {
background-color: #EEEEEE;
color: #ff0000 !important;
}
.et_pb_widget > ul > li > a:hover {
background-color: #EEEEEE;
color: #ff0000 !important;
}
.et_pb_widget body:hover {
color:#ff0000;
}
I would really appreciate it if you could help me out with this!
I've almost successfully changed the default white text and gray background menu color in the TwentySeventeen theme for WordPress by adding the lines below to a childtheme style.css stylesheet.
Menu ScreenShot
However, the menu still very briefly displays the default menu color as I mouse off any given selection in the sub-menus. I'm a hack when it comes to CSS and have spent hours trying to find a solution on line. Any suggestions? Thank you very much.
/*Change Drop Down Menu and Sub-Menu Hover and Text Color */
.menu a:hover,
.menu li:hover>a {
background-color: rgb(220, 225, 200) !important;
/* light green */
color: #000000 !important;
}
Seems like that because that there are 2 backgrounds, one on the li
and second on the a
The grey background is on the li so you just need to "reset" it
.main-navigation li li:hover,
.main-navigation li li.focus {
background: none;
}
Hi I am trying to target the navigation CSS on all of my woocommerce pages to change it from (the parent css) white to black. I basically want all the menu items to be black on all shop pages.
.woocommerce #top-menu-nav #top-menu li a{ color: #000000 !important; }
.woocommerce #top-menu-nav #top-menu li a:hover { color: #cea54a !important; }
However, it only displays on the product category page but actually not on any of the shop pages. Is there something else i should add to the above to reflect this change?
Thanks
To target the elements of your menu on woocommerce pages, you should try something like this (assuming that #top-menu is the ID of your menu:
body.woocommerce #top-menu a,
body.woocommerce-page #top-menu a {
color: #000 !important;
}
Hope this helps
I'm working on a Wordpress site and am not fully following the html and css given to me.
I have a rule that says when a menu item is hovered, make the background of the line item orange and the nested anchor text white:
.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);
Then:
.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}
The first rule works the second does not. Using the inspect element feature I notice that when I apply this rule it becomes scored out. When I apply the rule outline: solid 1px to see the nested anchor, it is indeed smaller than the parent line item when my goal is to make it match the size.
Here is the nav: http://jsfiddle.net/hfnjgjxf/
Notice that when you hover over the menu items the text only changes to white when you hover over the center (the inner a tag). The inner a tag should be the same size as the parent so that when hovered, the text turns to white, on any part of the line item.
Hope I'm talking sense. If you view the fiddle you'll see what I mean.
Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.
However, you could simply achieve that by adding the padding on anchor tags instead of the list items:
EXAMPLE HERE
.dropdown ul li {
/* padding: 7px 10px; */ /* Remove this declaration */
border: none;
border-right:2px solid lightblue;
background-color: transparent;
}
.dropdown ul li a {
display: block;
padding: 7px 10px; /* Add this instead */
}
It would not be required in this situation to make the anchor element the same size as its parent, but just to apply the effect to the anchor, based on the hover of the parent li. You can achieve that by changing the selector to match the li hover rather than the a hover.
.dropdown > ul li:hover > a {
color: white;
}
http://jsfiddle.net/hfnjgjxf/2/
Hi I have a little CSS problem with a Superfish menu, when an active menu is hovered the color: #000000 don't apply, both background and color is white. The inactive menu works as I want.
Example:
Menu 1 (active)
- Bla
- Bla
Menu 1 (active & hover)
- Blank
- Bla
pastebin: http://pastebin.com/ziYaZJ3e
.ot-menu li li a:focus, .ot-menu li li a:hover, .ot-menu li li a:active {
background: #FFFFFF;
color: #000000;
border-bottom: none;
outline: 0;
}
.ot-menu .current_page_item li a, .ot-menu li .current_page_item a {
background: black;
border-bottom: none;
color: white !important;
}
The color set here is the reason you are getting white on white. But if disabled the non-hovered active text becomes black on black BG. You need to re-structure your style rules / ordering.
Where possible try to avoid using !important where you can as it can make tracking down styling issues very difficult (speaking from experience, I've produced some really nasty style-sheets lazy-coding with it).