Evolve Theme Change Front Page Content Box Button Color

Hi there,

Your CSS definitely looks correct. When I pasted it into my browser inspector tools, it worked fine. I have been looking for a few minutes and I see no reason why it wouldn’t work.

Would you happen to have any caching tools activated?

I absolutely do not. Unless the EWWW Image Optimizer plugin qualifies as a caching tool?

I had a caching plugin a couple of months ago, but I had to uninstall it due to problems it was causing on the site.

Thank you for looking into this for me!

I went ahead and installed the theme on my development site and copied your exact CSS into the theme stylesheet (don’t do that) and it worked as expected. So even though I can’t tell why at the moment, it might have something to do with where you’re placing the CSS. Where would that be? Child theme? CSS plugin?

That is a lot of extra work for you to do, and I just want to say that I appreciate all the effort.

I used the “Custom CSS” field which was very helpfully supplied by the theme’s developers.
In the dashboard: Appearance –> Customize, which brings up the site, with modification bar on the left. Most of the way down the bar is the Custom CSS field. This is exactly all of what I have in that field, for your reference.

#bootstrap-slider .carousel-caption .button{background:#dd9933 !important}

.menu-item a {
font-size: 1.28em!important;
}

#nav ul ul li a, #nav ul ul li a:visited {font-size:150%;}
body #header.sticky-header
}

.content-box-1 .read-more.btn { background: #f9a581; color: #ffffff;
}
.content-box-2 .read-more.btn { background: #8fb859; color: #ffffff;
}
.content-box-3 .read-more.btn { background: #78665e; color: #ffffff;
}
.content-box-4 .read-more.btn { background: #82a4fa; color: #ffffff;
}

No problem at all.

Try moving the CSS around. It’s possible that the theme’s CSS panel is not in a good position as far as the file order goes. Do you have a child theme installed? If so, try putting it at the bottom of that. If not, try CSS plugin like Reaktiv CSS Builder.

BINGO! Moving around the CSS, for whatever reason, worked like a charm. The problem is solved, and all I had to do (for anyone else that may see this in the future and need to know) is move the CSS around. Here is the working version of the code:

.content-box-1 .read-more.btn { background: #f9a581; color: #ffffff;
}
.content-box-2 .read-more.btn { background: #8fb859; color: #ffffff;
}
.content-box-3 .read-more.btn { background: #78665e; color: #ffffff;
}
.content-box-4 .read-more.btn { background: #82a4fa; color: #ffffff;
}

#bootstrap-slider .carousel-caption .button{background:#dd9933 !important}

.menu-item a {
font-size: 1.28em!important;
}

#nav ul ul li a, #nav ul ul li a:visited {font-size:150%;}
body #header.sticky-header
}

THANK YOU!

Great! Happy to hear that did the trick. Glad I could help.