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.
Related
I am trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.
I have this working for the menu link color:
a.navPage-subMenu-action.navPages-action {
color:#ffffff;
}
I searched on here for a solution, and it would appear that it's as simple as:
a.navPage-subMenu-action.navPages-action:hover {
color:#ffffff;
}
But that is not working. It is a BigCommerce site and I am trying to change the color from the existing red (on hover). The hover color wouldn't be white - I'm only using that for testing to see if the red goes away.
try using the !important tag this should override your themes product hover.
I have started working with react and material ui and facing problem in changing the color and font of text in the table header. Over riding it doesn't seem to change the default style.It is specified that using "headerStyle"(object) changes the header styling. Can anyone help me with properties that has to be changed to achieve this.
Just checked you code.
Adding className work fine.
<TableHeader className="table-header">
And now you can apply styling you need according to your need like
.table-header{
background: #cdcdcd !important;
}
.table-header th {
color: blue !important
}
This works well for changing the background color and heading color for the table!
I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!
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.