In your Child Theme or CSS Editor Plugin try this code:
/* Menu Colors */
#menu li.current_page_item a, #menu li.sfHover a
background: #F09DA7;
}
/* Blog Link Colors */
a:hover {
color: #F09DA7;
}
*Note
If your theme has a custom CSS Editor in it, you can also paste the code in there.
Never edit core CSS or PHP files under Appearance > Editor. Your edits will be deleted when the theme is updated.
I definitely have not touched their files. I have been putting them here:
Appearance > Customize > Style Settings > Custom Style Settings
Should I be making a child theme? I didn’t bother with that because I don’t plan on changing anything and they mention anything places in the Custom Style Settings will override the codes they have in place.
Sadly, it did not change anything though. For some reason that stupid menu and the green is very intent on sticking around.
Sorry I missed a bracket in the code, try this one now.
/* Menu Colors */
#menu li.current_page_item a, #menu li.sfHover a {
background: #F09DA7;
}
/* Blog Link Colors */
a:hover {
color: #F09DA7;
}
That is okay. I just tried it and nothing 🙁 I swear they have it locked in there somewhere (not that I think you can actually do that!) that it won’t change. This is everything I have changed, every time the green was listed I changed it.
body .footer-navi { background: #F29DA7; }
body .footer-container {
background: none;
background: #707070;
}
}
.footer .contactform input[type=submit]{
width:80px;
height: 36px;
font-size: 17px;
border-radius: 4px;
border: none;
background: #ffffff;
color: #fff;
line-height: 25px;
}
.footer #searchform {
background: #ffffff;
width: 90%;
height: 37px;
line-height: 36px;
padding: 0 1%;
margin-bottom: 20px;
border:1px;
position:relative;
border-radius: 0px;
}
.sl-slide-inner h1 a:hover{
color:#F29DA7;
}
.salesdetails{
width: 426px;
background: rgba(255, 255, 255, 0.74);
border-right: 8px solid #F29DA7;
padding: 23px 20px 10px 24px;
font-size: 20px;
-webkit-animation: fadeInLeft;
-moz-animation: slideInLeft;
-o-animation: slideInLeft;
animation: slideInLeft;
-webkit-animation-duration: .3s;
-webkit-animation-delay: .1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: .3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: .3s;
-o-animation-timing-function: ease-in-out;
-o-animation-fill-mode: both;
-ms-animation-duration: 1s;
-ms-animation-delay: .3s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: .3s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
color:#fff;
}
.flexslider_blog li.blog_item .flex_content a.read_more:hover{
background: #F29DA7;
border: 1px solid #F29DA7;
color: #fff;
}
.flexslider_blog .flex-direction-nav .flex-next {
right: -1px;
background: #F29DA7 url(images/next.png) center no-repeat;
}
.flexslider_blog .flex-direction-nav .flex-prev {
right: 27px;
background: #F29DA7 url(images/prev.png) center no-repeat;
}
.flexslider_blog .flex-direction-nav .flex-next:hover{
background: #F29DA7 url(images/next.png) center no-repeat;
}
.flexslider_blog .flex-direction-nav .flex-prev:hover{
background: #F29DA7 url(images/prev.png) center no-repeat;
}
ins {
background: #000000;
border: none;
color: #333;
}
a:link {
color:#F09DA7;
}
a:visited {
color:#F09DA7;
}
a:active, a:hover {
color: #F09DA7;
#menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover, #menu li.current_page_item a {
background: url("../images/menu-bg.png") repeat-x scroll center top #F09DA7;
color: #FFFFFF;
}
#menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover, #menu li.current_page_item a {
background:#F09DA7!important;
}
#menu .ddsmoothmenu {
background: #F09DA7;
}
.header .menu-bar {
background: black;
}
/* Menu Colors */
#menu li.current_page_item a, #menu li.sfHover a {
background: #F09DA7;
}
/* Blog Link Colors */
a:hover {
color: #000000;
}
I tried it with the new code I pasted above on a test site and it worked fine for me.
Where do you have all that code pasted?
You have my code added to something that has the same code but with an !important added.
hm. I wonder why it isn’t working for me? This is the entire thing I have listed in the custom style sheet part of the customizing.
http://kpetersondesigns.com/
It has been saved, but the green is still there. I went to open it in a different browser to see if maybe it was cookies etc. but I still see green.
ah, I did because of one of the codes that was there. I took that out but still have the green. The current code that is there is this and it is here: Appearance > Customize > Style Settings > Custom Style Settings
body .footer-navi { background: #F29DA7; }
body .footer-container {
background: none;
background: #707070;
}
}
.footer .contactform input[type=submit]{
width:80px;
height: 36px;
font-size: 17px;
border-radius: 4px;
border: none;
background: #ffffff;
color: #fff;
line-height: 25px;
}
.footer #searchform {
background: #ffffff;
width: 90%;
height: 37px;
line-height: 36px;
padding: 0 1%;
margin-bottom: 20px;
border:1px;
position:relative;
border-radius: 0px;
}
.sl-slide-inner h1 a:hover{
color:#F29DA7;
}
.salesdetails{
width: 426px;
background: rgba(255, 255, 255, 0.74);
border-right: 8px solid #F29DA7;
padding: 23px 20px 10px 24px;
font-size: 20px;
-webkit-animation: fadeInLeft;
-moz-animation: slideInLeft;
-o-animation: slideInLeft;
animation: slideInLeft;
-webkit-animation-duration: .3s;
-webkit-animation-delay: .1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: .3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: .3s;
-o-animation-timing-function: ease-in-out;
-o-animation-fill-mode: both;
-ms-animation-duration: 1s;
-ms-animation-delay: .3s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: .3s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
color:#fff;
}
.flexslider_blog li.blog_item .flex_content a.read_more:hover{
background: #F29DA7;
border: 1px solid #F29DA7;
color: #fff;
}
.flexslider_blog .flex-direction-nav .flex-next {
right: -1px;
background: #F29DA7 url(images/next.png) center no-repeat;
}
.flexslider_blog .flex-direction-nav .flex-prev {
right: 27px;
background: #F29DA7 url(images/prev.png) center no-repeat;
}
.flexslider_blog .flex-direction-nav .flex-next:hover{
background: #F29DA7 url(images/next.png) center no-repeat;
}
.flexslider_blog .flex-direction-nav .flex-prev:hover{
background: #F29DA7 url(images/prev.png) center no-repeat;
}
ins {
background: #000000;
border: none;
color: #333;
}
a:link {
color:#F09DA7;
}
a:visited {
color:#F09DA7;
}
a:active, a:hover {
color: #F09DA7;
#menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover, #menu li.current_page_item a {
background: url("../images/menu-bg.png") repeat-x scroll center top #F09DA7;
color: #FFFFFF;
#menu .ddsmoothmenu {
background: #F09DA7;
}
.header .menu-bar {
background: black;
}
/* Menu Colors */
#menu li.current_page_item a, #menu li.sfHover a {
background: #F09DA7;
}
/* Blog Link Colors */
a:hover {
color: #000000;
}
P.S. THANK YOU for your help
OK,
Delete the code I gave you and add this one.
I edited it a bit
/* Menu Colors */
#menu li.current_page_item a, #menu li.sfHover a, #menu li a:hover {
background: #F09DA7;
}
/* Blog Link Colors */
a:hover {
color: #F09DA7;
}
Okay, this is incredibly weird but I put it in there and it didn’t work. I moved it to the top and it worked. So some code in there was stopping it from working.
THANK YOU SO MUCH!!
Unfortunately, on the block when you hover over a link, it still *looks* dark green. It could almost pass for the black but I think it is the green.
You need to remove all the other code in the box unless you need it.
You have duplicate code on the custom css box.
Also just add !important to the a:hover so the code looks like this.
/* Blog Link Colors */
a:hover {
color: #000 !important;
}
I tried to take out code that I thought wasn’t important and apparently it controls the color on the blog, which is odd. As it is the sales detail part.
OK, Now we can edit the code to change your links back to the pink.
The complete code should be this.
/* Menu Colors */
#menu li.current_page_item a, #menu li.sfHover a, #menu li a:hover {
background: #F09DA7;
}
/* Blog Link Colors */
a {
color: #F09DA7 !important;
}
a:hover {
color: #000 !important;
}
that would be amazing because I think it changed the font back. I am normally so much better at this. I must be out of practice. Thank you for all your patience and help!
Currently, I cannot get it to even load. It seems like it decided I was doing too much to it. Do you see it at all?
