Thank you for taking the time to read this. I have tried every single CSS code under the sun to try change the rollover text on a woocommerce button "Continue Shopping" to white when the button is hovered (currently grey background and black text when hovered). Wordpress with Woocommerce setup.
https://www.charliecustards.co.uk/product/the-charlie-new-orleans-black-on-black-brogue-boot-in-calf-leather-suede/
To see real time simply add the shoe to the basket and you will see the "continue shopping button" on the next screen which I just can't get the rollover text correct on! Also see screenshots.
I tried everything to get hold of the button in the css and simply change it, but nothing would work. This was the last code i tried and don't understand why it won't work?!
a.button.wc-forward:hover {color: #ffffff !important;}
More annoyingly if I put a background colour change on the hover to test I have the right selection that does work and on hover the button turns red! So not sure why the background will change but the text wont?
a.button.wc-forward:hover {color: #ffffff !important;
background-color: red !important;}
So with this code the "continue shopping" button background changes to red but the text does still not change to white?
Help on this would be so appreciated, its driving me mad.I've tried every div, selector etc associated with the button and nothing will work. The code above was one of many but I think the closest due to the fact it will change the background colour on hover but not the text colour.
Thank you so much.
I can't answer specifically in the context of WooCommerce but the current CSS applying that style is:
.woocommerce-page .woocommerce-message a.button.wc-forward:hover {
color: #000000 !important;
}
So you can attempt to copy this.
There's a fairly nasty trick for increasing specificity of "identical" selectors by just duplicating a class name, so if you still find the above is getting overwritten try using
.woocommerce-page .woocommerce-message a.button.button.wc-forward:hover {
color: #000000 !important;
}
I'd recommend commenting this as it looks like a mistake to most people.
Related
I would like to change the default outline glow of bootstrap for any dom element. I already did it for inputs and buttons but on any other element it is still blue. So for example, I press TAB on my keyboard and it goes to next element and it glows in blue. How do I change that? I can't find it in the css. Please look at the menu items below:
When I hit TAB on my keyboard it moves to the next each time and makes it glow in blue. How do I change that color? I think there is an easier way to modify the bootstrap css, either override it or host it locally and modify it rather than having to go after each class and specify the active, focus or whatever is causing this to glow in blue. Any ideas??
The outline glow you mentioned is called outline in CSS.
You will have to change the :focus pseudo property in css to get the color you want when you press the TAB key.
*:focus{
outline: red; /* Your color */
}
*:focus is what you are looking for:
*:focus {
box-shadow: 0 0 0 .2rem red !important;
}
you could override it using !important; like i did.
Visited links in IE 11 are showing up "inverted" with a dark blue background and a white foreground. I'm no CSS expert by any stretch, but my understanding is that this should cause visited and unvisited to look the same at all times.
a:link, a:visited {color: #034af3;}
Here is what it is doing (IE only)
That dark background is exactly the background-color of my ASP.Net Menu control. To get around this IE issue, I went to the .main definition in my CSS and forced the background-color to #ffffff for visited links.
.main a:visited {background-color: #ffffff;}
Everything seemed great until I looked at a page where I have AllowSorting set to "true" on my gridview. Now those links in the Header row have a white background, so by solving one issue with a hack I have created another issue.
Is there a way to block this "bluing" issue with IE and visited links?
========================
EDIT - Adding New Info:
I have changed the CSS for the navigation menu. I had originally set the "a item" (visited, hover, etc.) background color for each definition to #3a4f63, but spurred by Christoph's question below, changed those to "inherit" so, if I understand correctly, those now inherit from the hideSkiplink div which also has a background of #3a4f63. The menu still displays correctly, and this change also affected links in the body of the page. The result of that change is seen in the image below. So, clearly the definitions for my menu are affecting links in the main body of the page.
The forecolor is still inverted (almost white) but the backcolor is not being inverted to the dark blue.
I have an issue using the slicknav responsive menu, if the navigation buttons have a different background colour set for the hover in the stylesheet, if you hover over the actual tag text the background colour changes correctly, but if you hover over any part of the button away from the text, then the colour behind the actual text doesn't change. So you get a rather ugly box around the text in the original colour. This is happening in all browsers tested.
I cannot find any way to stop this happening, the css file is not that complicated. I've used Slicknav now on a few sites and always had the same problem, but this time I really need to fix it.
You can see an example of this here: http://www.yorkluxuryholidays.co.uk/
In responsive mode, hover anywhere over one of the menu items that have sub menus, but not directly over the menu text itself, and the area behind the text does not change colour.
This is the css I'm using for the hover:
.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}
It seems to make no difference which class you set the colour on, either or both, the behaviour is exactly the same.
I'd love to know if there is a way to fix this with the css!
Add in your css :
.slicknav_nav a:hover * {
color:#fff;
background-color:#7b9fc7;
}
Jsfiddle: jsfiddle.net/dlnkprs/MR33L/
I'm creating a different style for a Wordpress login form. I've put an icon in both username and password field. Displaying this:
But.. when you use Chrome's autofill the background turns yellow and the icons disappear:
Any idea how to solve this so the icons are still visible?
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
This will make it so the background of the inputs are white, and you can obviously change the colour to whatever you like. Unfortunately I can't find any way to make the icons appear in front of the yellow background, so the best thing I can recommend is to turn autocomplete off in each input element by adding the autocomplete="off" attribute to them.
Sorry I couldn't have been more helpful.
You can create a span element just at the left of each input box with the icon as background. With this you separate the input from the actual icon and keep the autocomplete functionality.
Demo: http://jsfiddle.net/pt8Rb/
I apologize if this post makes little to no sense, I'm very, very new to CSS, additionally some of the terminology is new to me and I'm not entirely certain I'm using it correctly.
I'm helping to tweak a pre-existing website that was created for Wordpress. (www.teloscares.org). Here's the problem that I'm having (As a side note, I use (for example) which means that I'm currently on that page. What I'm attempting to do is describe my problem by way of explaining what pages I'm on, etc.):
The "nav-bar" is the Cyan colored strip up on top with 5 items, Home, Benefits, Get Involved, Donate and About Us. While on the home page (for example) you notice that "Home" is surrounded by a yellow box. If you hover over "Benefits" (for example) you see that there's a sub-menu, with the light/dark grey boxes. Now, when you CLICK on the Benefits page in order to Navigate to it, "Benefits" now becomes your active page and the Navigation bar now has a yellow box instead of grey.
The PROBLEM I'm having is that while the "Benefits" box is meant to be yellow, the sub-menu items also appear yellow, and I want them to retain their grey.
When I navigate to a sub-menu page, it displays correctly with ONLY the active page being yellow.
How do I make it so that when the active page is a MAIN page on the nav-bar, the sub-menu boxes do not also appear yellow?
If need be, I'm willing to post any/all of the style.css file. Thank you very much for your help with this matter. I've been trying to find a solution on google with little luck.
-Josh
Here is the code causing the problem, its line 1331 of your stylesheet.
/* Removing this ALSO seemed to remove the yellow Block.
Changing the color property changed the text WITHIN the yellow block, but not
the color of the yellow block itself. Hm..... -Josh */
.main-header .navigation ul li.current_page_item a {
color: #000; /* was 000 */
/* Taking out THIS line removes the yellow block, but from both the main and sub-pages. -Josh */
background: url('images/bg_header.png') repeat-x left top;
}
Change it to this and voila :)
.current-menu-item {
color: #000; /* was 000 */
background: url('images/bg_header.png') repeat-x left top;
}
Your selector before, ul li.current_page_item a selects ALL the links that are within the li.current_page_item. We just want the top, and WordpPress uses .current-menu-item class.
This is happening because you apply the background image to all 'a' inside the 'li'. You should apply this instead:
.main-header .navigation ul li.current_page_item > a { .. }