How do I modify the colour of the menu bars - BuddyPressCorporate Theme

Hi All,
I am using the BuddyPress Corporate Theme as a stand alone single site.
I find that the 12 preset styles just for the menu bar/title bars arent exactly what I need. How can I modify the colour to #000882 to match the main elements of the logo.
In the blurb about the theme it talks about the easy Colour Picker. Unfortunately I find ant reference regarding Easy Colour Picker anywhere?

What would be really great is if i could create a graduated bar that goes from #000882 at the top and slightly lighter shade towards the bottom in a similar fashion to some of the 12 preset examples. (This would be nice but not essential)

Any suggestions warmly received.

Many thanks and kindest regards
Andrew

  • Tyler Orr
    • Site Builder, Child of Zeus

    If I'm understanding you correctly, the preset colour picker is for predetermined colors in the CSS files for that color scheme. I don't believe you can add custom colorization outside of modifying the CSS.

    Are you familiar or comfortable with CSS to accomplish this? If not, I'd be happy to help.

  • Vaughan
    • Support/SLS MockingJay

    hiya

    all the nav CSS rules are using the same.

    so if you search your base.css file for ul#nav you'll find all the CSS related to the navigation.

    so do a search for

    ul#nav

    find the css values & copy to your custom CSS. then edit away.

    a great tool to use would be firebug for firefox browser, it'll let you highlight the element on screen and show you the CSS & which file it is located in as well as the line numbers.

    remember you have to set to default in the theme options in order to use custom css.

    hope this helps

  • Tyler Orr
    • Site Builder, Child of Zeus

    I would recommend installing a child theme for this. That way, if you ever update the BuddyPress Corporate Theme you won't lose any modifications :wink:

    1. Go into your original download folder called "bp-corporate"
    2. You will then need to add the bp-corporate-child theme to your /themes folder on your server. bp-corporate-child can be found in bp-corporate > themes > bp-corporate-child
    3. After you have uploaded that directory you will need to activate the child theme in the WP Dashboard
    4. From there, open up the stylesheet located in bp-corporate-child > style.css
    5. You can target the background with the following code:

    #navigation {
        background: none repeat scroll 0 0 #8C8C8C;}

    6. Change out the color to whatever you would like. If you are looking to do a gradient as described above, you can use this link: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/

    Hope this helps!

  • afreeth
    • Site Builder, Child of Zeus

    Thank you for this, I have sorted the child theme as suggested and activated it, and I 'think' I have followed your direction correctly but it hasn't worked.

    I have found two .css files

    bp-corporate-child/_inc/css/child-style-sample.css
    instructions within the file suggest I update it and re-save as child-style.ccs

    and

    bp-corporate-child/style.css

    I have put

    #navigation {
    background: none repeat scroll 0 0 #000882;}

    in both but no avail.

    This is the contects of the child-style-sample.ccs file:-

    /* begin child theme css style here */
    /*
    rename this to child-style.css
    any custom css can be input here to prevent any css edit missing when version updates to themes
    to effective overide some css used #custom first id hack

    sample:
    #custom .myclass {} or used !important for better css hack overide

    sample
    #custom .myclass {
    color: #fff !important;
    size: 14px !important;
    }

    try not to touch the css from other stylesheet for better and easy updates.
    */

    /* 197438-1377118007 */

    Any suggestions warmly received.

    Kindest
    Andrew

  • Tyler Orr
    • Site Builder, Child of Zeus

    Couple of things:

    1. Place your code in the child-style-sample.css file

    2. Place it below the last */ in the file:
    AFTER THIS: try not to touch the css from other stylesheet for better and easy updates. */

    3. Rename the file to child-style.css

    That should work. Pending on what your default settings are trying using different color # to confirm: ie. #000000, #ffffff, etc.

    If you still have issues let me know!

  • afreeth
    • Site Builder, Child of Zeus

    Hi,
    I have done it, yipeeeeeeeeeeeee
    However I couldn’t make it work with the style sheets.

    I happen to be using 'My Custom CSS' Plug in. Have put the various bits of code in to the plugin and it works a treat and with the croovy /cssgradientbackgroundmaker/ it brilliant. Very pleased.

    Is it reasonable to suggest if I copy the stuff I put into 'MyCustomeCSS' plugin and pasted it into the style sheet, it should work?

    If this is the case, will the style sheet I use be called child-style.ccs or just style.ccs ?

    Will I put it on the

    wp-content/themes/bp-corporate-child/_inc/css

    or would it go in

    wp-content/themes/bp-corporate-child

    Many thanks for all the help, really appreciate it.

    Kindest regards
    Andrew

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.