Change the color of the Featured Pages Buttons


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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+

Credit: @acub

If you need to change the color of the Featured Pages Buttons, with a different color for each button:

 

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.

 


Related Snippets you may also like


18 thoughts on “Change the color of the Featured Pages Buttons

  • Taryn

    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!

  • Dave Sanney

    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

    • Dave Bardell Post author

      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)

  • dweb

    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?

    • Dave Bardell Post author

      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

    • Dave Bardell Post author

      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.

  • Vasil Dimitrov

    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:

    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,

    • Dave Bardell Post author

      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

  • András

    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?

  • Samuel

    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

  • chappie

    Dave, this snippet is actually changing my three FP buttons, not my 3-bar menu. Can you guess where I’ve gone wrong?

Comments are closed.