Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #13241


    I’m interested in being able to change the background color of the main menu on every page.

    If you take the same approach as with the background image and provide a small colour change box in the WordPress page editor front-end to override the default, that would be ideal.

    How do i go about adding that new field in the wordpress page editor and linking it to menu background css ?


    Hi radugidei,

    The code to walk you through creating an admin option for that would be too drawn out unfortunately. What you can do is add the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #header .container, #socket .container, .invers_pointer span {
    color: #ffffff;
    background-color: #111111;

    Change the background color numbers to the hex value you would like and if you need to, do the same with the color (for the links). Here is a quick list of hex values you can use: http://www.w3schools.com/cssref/css_colors.asp




    thanks Devin, but this changes the menu for all pages, which i had done anyway by editing layout.css.

    i have successfully added the new field in the page editor, using the register-admin-metabox.php file from includes/admin.

    here’s the code i added :


    “name” => “MenuColor”,

    “desc” => “You can choose a custom menu colour” ,

    “id” => “menucolour”,

    “type” => “colorpicker”,

    “std” => “”,

    “slug” => “add_options”,

    “class” => “av_2columns av_col_1”


    it appears fine in the page editor.

    can you please tell me where these settings are interpreted so i can link that colour to the menu bg color ?

    thanks and sorry to drag this out, but we really do need it.


    thanks for the input, managed to sort it myself. for people that are interested, use the code above, together with this :

    (following code goes in header.php, just before </div><!– end container_wrap–> )


    /* this sets the header (menu) colour dynamically */

    $the_post_id = avia_get_the_ID();

    $brandColour = avia_post_meta($the_post_id, ‘menucolour’);

    // echo “hello, brand colour is :”

    // echo $brandcolour;



    #header .container{

    background-color: <?php echo $brandColour; ?>;}



    Hello radugidei,

    Thanks for the info. :)



Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Main Menu colour change by page’ is closed to new replies.