This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.
Related
Hi I am new on here first of all nice to meet you all
I am facing a problem on wordpress
I am using "Quick Download Button" Plugin which the link is https://wordpress.org/plugins/quick-download-button/#description
after I have install it on my site I tried to change the button colour by css but I never ever success to change it. I have checked the button in inspect and I copied it but it didn't work.
what I tried was
.g-btn.f-l
{
color: #3c1c1c;
}
but it never worked.
please anyone help will be awsome thanks and sorry for my bad english
Like #jared said - it shouldn't be too hard to find the right selector and change the color within your browsers dev-tools. If you see the color change, bingo! Then if that doesn't work within your css file itself, you might have an ordering issue with your sites css files (i.e. your css is loading before the plugins). Quick way to test this is add the !important selector to that rule on your file - e.g:
color: #3c1c1c !important;
the css color-parameter is not defining the color of the button, but from the text of the button. if you want to change the color of the button, you need to look after "background" or "background-color".
example:
.g-btn.f-l{
color: #FFFFFF;
Background-color: #3c1c1c;
}
Visible example:
Source of example: Kryptonews Lexikon
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I'm using WordPress with the Stability theme installed.
When not hovering over an icon, it looks red (by default). This can be easily changed by changing the theme's skin in the options menu.
However, when the mouse is hovering over the icon, it turns black. This is independent of the theme's skin and I cannot, for the for the life of me, change this color to something else. I've been using the element inspector in my browser and turning CSS properties on and off all day and couldn't zero in to the property that defines that color.
Any ideas on how I might be able to change it? The theme's documentation sais nothing about it.
You can change the background colour by editing this bit of css, or by overriding it with your own duplicate in a custom css file.
.no-touch .icon-box.icon-box-animated .icon:hover::before {
background-color: #2f2f2f;
transform: scale(0.9, 0.9);
}
Its currently located in: http://stability.dan-fisher.com/css/theme-elements.css on line 1302
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I'm working on my wordpress website, I recently got this new theme called Visia. After a search for days I finally found out where the hover effects for the circle around the social buttons was located. But there's only one problem: the icons have their own CSS file. And I want both circle (border-color) and icon (color, they have an icon font) to change color on just one hover.
Now I got this changed in the icons.css
.icon-linkedin:hover {
border-color:#06C;
opacity::1;
color:#06C;
}
the other one has no hover yet, because I tried to refer to that class (style.css) to icons.css
.social-links a:hover {
???
}
The borders should change color the same color as the icons (because there are different social links, there are different colors)
If anyone could help, would be great...
Thanks in advance!
Simply overwrite it like so:
.icon-linkedin:hover {
border-color:007bb6;
color:007bb6;
}
And add !important if needed:
.icon-linkedin:hover {
border-color:007bb6 !important;
color:007bb6 !important;
}
I've fixed it by removing the border from some other class (the one who actually gave the border) and added it to an icon class that was already there. I also added a hover to that class which made it possible to change both color and border-color.