Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
Updated
: works fine with
Featured Pages Unlimited v1.4+
/* START OF Change Featured Pages Button color */
.btn.btn-primary.fp-button {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ee7c2a;
background-image: -moz-linear-gradient(top, #f78c40, #e16309);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f78c40), to(#e16309));
background-image: -webkit-linear-gradient(top, #f78c40, #e16309);
background-image: -o-linear-gradient(top, #f78c40, #e16309);
background-image: linear-gradient(to bottom, #f78c40, #e16309);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff78c40' , endColorstr='#ffe16309' , GradientType=0);
border-color: #e16309 #e16309 #984306;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e16309;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn.btn-primary.fp-button:hover,
.btn.btn-primary.fp-button:focus,
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active,
.btn.btn-primary.fp-button.disabled,
.btn.btn-primary.fp-button[disabled] {
color: white;
background-color: #e16309;
*background-color: #c95808;
}
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active {
background-color: #b04d07 \9;
}
.btn.btn-primary.fp-button:hover,
.btn.btn-primary.fp-button:focus,
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active,
.btn.btn-primary.fp-button.disabled,
.btn.btn-primary.fp-button[disabled] {
color: white;
background-color: #e16309;
*background-color: #c95808;
}
.btn.btn-primary.fp-button:active,
.btn.btn-primary.fp-button.active {
background-color: #b04d07 \9;
}
/* END OF Change Featured Pages Button color */
Credit: @acub
If you need to change the color of the Featured Pages Buttons, with a different color for each button:
/* START OF Change Featured Pages Button color */
.fp-button-one {
background-color: red !important;
background-image: linear-gradient(to bottom, red, red) !important;
}
.fp-button-two {
background-color: green !important;
background-image: linear-gradient(to bottom, green, green) !important;
}
.fp-button-three {
background-color: blue !important;
background-image: linear-gradient(to bottom, blue, blue) !important;
}
/* END OF Change Featured Pages Button color */
/* START Extra code for Users of Featured Pages Unlimited extension */
.fp-button-4{
background-color: black !important;
background-image: linear-gradient(to bottom, black, black) !important;
}
.fp-button-5{
background-color: yellow !important;
background-image: linear-gradient(to bottom, yellow, yellow) !important;
}
.fp-button-6{
background-color: pink !important;
background-image: linear-gradient(to bottom, pink, pink) !important;
}
/* Note: only use with 4 and above, one-two-three remains same */
/* END Extra code for Users of Featured Pages Unlimited extension */
Where to copy/paste this code?
We strongly recommend you create a child theme and add this to the Child Theme functions.php.
Download a start-up child theme here.
Remember: you shouldn’t edit the theme’s functions.php.
add_filter('tc_fp_single_display', 'rdc_fp_single_display', 10, 2);
function rdc_fp_single_display($output, $area) {
return preg_replace('|fp-button"|', 'fp-button fp-button-'.$area.'"',
$output);
}
18 thoughts on “Change the color of the Featured Pages Buttons”
Hello, please tell me how I would change the color of the featured pages background from white to another color, as well as the green that is underneath all 3 images, to another color. Thanks!
PS The website in question is http://www.bestofindianashville.com thanks!
Hi Taryn,
You’ll find the answer in this forum thread : https://wordpress.org/support/topic/change-background-color-to-3-circles-feature-pages?replies=31
Hope this helps !
Cheers 🙂
Hi Dave,
Firstly thanks for all your great suggestions for customizing this theme. I find it extremely helpful.
I applied the css code to my child theme for the second part – “If you need to change the colour of the Featured Pages Buttons” which works great if you only have 3 featured pages, but I am using the Featured Pages Unlimited plugin and have six Featured Pages.
I duplicated the css code (as per below) as I want to display two alternating colours. I am wondering if there is something that I need to change in the functions.php file?
.fp-button-one {
background-color: #FBB03F;
background-image: linear-gradient(to bottom, #FBB03F, #FBB03F);
}
.fp-button-two {
background-color: #514E26;
background-image: linear-gradient(to bottom, #514E26, #514E26);
}
.fp-button-three {
background-color: #FBB03F;
background-image: linear-gradient(to bottom, #FBB03F, #FBB03F);
}
.fp-button-four {
background-color: #514E26;
background-image: linear-gradient(to bottom, #514E26, #514E26);
}
.fp-button-five {
background-color: #FBB03F;
background-image: linear-gradient(to bottom, #FBB03F, #FBB03F);
}
.fp-button-six {
background-color: #514E26;
background-image: linear-gradient(to bottom, #514E26, #514E26);
}
Thanks,
Dave
Hi Dave. You’re closer than you think (and I’ll update the snippet).
When Nic produced FPU, it was easier to change one-two-three to numerical values, so use .fp-button-4, 5, 6 and so on. (However one-two-three remain the same)
Dear Dave,
I put all the code as above in the style.css and the functions.php in the child theme. Now all the buttons are orange in stead of the colors mentioned inthe second block. Any idea?
There must be some other css code with higher ‘specificity’ which is overriding this css. Take a look using Firebug, else I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
More on specificity in this Guide
Long time coming but reviewed the snippet for 3.3 and had the same problem you reported. Hopefully it’s now fixed above by using !important.
I would like to put an image as background of the featured headers. Is that possible?
Sorry for delay in replying.
Not quite sure what you mean? I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Hello Dave,
Thank you very much for providing us with this snippet. I found it very useful.
I would just like to report an issue I came across. I copied the code above as you recommended, however the featured buttons were not clickable. I believe I found where was the error. In the code we are supposed to insert in the functions.php file:
return preg_replace('|fp-button"|', 'fp-button fp-button-'.$area,I just removed the double quotes after the fp-button and my new colorful featured button became clickable :).
Please correct me if I am wrong, since I am new in the world of web developing.
Thanks,
Good spot, Vasil!
I’ve fixed it above, though slightly differently – the ” was significant in the code to only change that single instance so my fix maintains that integrity.
Many Thanks
Dear Dave,
How to be different the three featured page button colors?
Is there any solution for this?
I think I should modify “class-content-featured_pages.php” file, but I don’t know how. :/
And after this I should define the new classes for buttons.
Can you help me?
New code added above.
Hi Dave! How is everything man?
As I am new to everything around here and I am not a Pro when it comes to coding, I would like to ask you if the code above is PHP or CSS?
Thanks in advance,
Samuel
See the Language tag on the post – it’s all CSS!
Dave, this snippet is actually changing my three FP buttons, not my 3-bar menu. Can you guess where I’ve gone wrong?
You haven’t, I have 😉
I’ll correct the heading of this one, and set up a corrected one. Thanks for pointing it out.