custom background

im trying to setup this theme for a site but i do not see anyway in having a custom background image for the white area below the picture of the person with the boxhead
http://themetastic.com/buddypress/?wptheme=BuddyPress%20Social if you go here where you see widget areas
its white on the background.

when i view the sourcecode to try and pick out the elements it does not show any css code that i can pick out this section and add custom css to.

thanks

  • Imperative Ideas
    • HummingBird

    How comfortable would you be with editing your theme? I'll try to outline the problem in as basic a format as possible.

    1. The portion of the site you are interested in is a DIV with the ID of #wrapper, which typically wraps an entire site including the header but this author has elected to start it after several header segments. This is generally considered poor engineering as he's not adhering to standards.

    2. The #wrapper div is 960px wide with a {margin: auto} designation to center it. This means that we can target the #wrapper itself and get the result in example-1.jpg. As you will see, the background is now yellow. In order to achieve this I had to apply an {overflow:hidden} to the CSS. Without it, the height of the DIV was collapsing. That is why you were not getting any sort of result - because the DIV had a height of zero.

    3. So now we have a problem because your background image, color, or gradient will be constrained to a centered 960px DIV. This can be fixed by adding another div outside of the wrapper (this is really bad nomenclature but I'll show you anyhow) so your sturcture looks like:

    <div id="fullwidth">
    <div id="wrapper"> --- stuff --- </div>
    </div>

    We would then define fullwidth as:

    #fullwidth {width:100%; overflow:hidden; background:---stuff---;}

    Don't forget to add overflow hidden to the wrapper as well.

    Now the background should be at 100% width.

    Honestly though it's a lot of work to do for a non-responsive template that is poorly engineered.

  • tfbc
    • Site Builder, Child of Zeus

    @aristath i have included a screenshot

    where the black lines i drawn in, is where i need to have a custom background image.

    there i nothing in the theme style settings to add custom backgrounds for this part of the theme.

    I want to be able to change the background behind the columns regardless of if i have 1, 2 or 3 columns.

    thanks @Imperative Ideas i saw your screenshot, its close to what i want, but the opposite, im actually wanting the background to be outside the columns, then the columns would remain white with a background fixed behind that, i guess a boxed style not a stretched. in your screenshot you have made the columns green or yellow( sorry color blind LOL) then there is white to the left and right of that. this is the part I want to have a background.

  • aristath
    • Recruit

    You can add the following to your stylesheets:

    html { background: #333; }
    #container { background: #fff; }

    In case you are not familiar with the way backgrounds work in CSS, you can read an excellent tutorial on them here: http://www.w3schools.com/css/css_background.asp

    The #333 part of the code above is the background you want that region to be. I chose color #333 which is a dark gray, but you can enter whatever you want there, as per the instructions on the link I posted.

    I am marking this issue as resolved, if however you feel that you require any further assistance then please feel free to reopen it!

    Cheers,
    Aristeides.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.