How do I add a custom image to the top header of the BP Social Theme?

How do I add a custom image to the top header of the BP Social Theme? Currently it is one solid color.


  • mathamatix
    • Flash Drive

    Hi Mason,
    Yes. I have looked into firebug and it has been extremely helpful. As far as the CSS file that you mentioned, would that be "base.css"? I have made changes to the background properties but there has been no result. Could you provide some more instruction? I am a lay person/n00b and this is my first time using wordpress/buddypress.

  • Mason
    • DEV MAN’s Sidekick

    Hiya mathamatix,

    My apologies, this one slipped through the cracks.

    If you've gotta link to your site that is always helpful as I can provide direction specific to your site :smiley:

    As far as getting acquainted with firebug and such, I'd recommend going through a few of Tammie's video tutorials here:
    She explains them well and the last one is specifically on firebug and CSS!

    You'll want to add your custom CSS to the bottom of your style.css file. It should look something like this:
    #top-bar {
    background: url('_inc/images/yourimage.jpg');

    Just replace yourimage.jpg with your image file name and drop the file into bp-social/_inc/images

    Hope this helps!


  • Mason
    • DEV MAN’s Sidekick

    You're right, that option is included, however, it adds an image in a different spot than what is desired in this case. My understanding is that we're trying to fill the entire width of the #top-bar div with a background image.

    When I test out the bp social custom header, the image is placed inside #inner-content which is below the navigation bar and not what we're trying to do here. The way you're thinking about the theme is probably more logical as far as how it should work so I'll ask Richie to come by and see if a theme adjustment is needed.

    Thanks! :smiley:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.