Change the color of the Featured Pages Buttons

Last Reviewed: 21-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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”

Comments are closed.