BuddyPress Social: wider header & custom background (whole page) possible?

Hello,

I have 2 BuddyPress Social Theme Questions:

1) Is there a way to have a WIDER header on the Social Theme?
Or is what I currently have at the top of http://JazzHeaven.com/social the max WIDTH possible?
(It seems like 421x131 or similar. This is what I uploaded under "Appearance/Theme Options/Header Settings/Insert your logo full URL here".
=> Would be nice if that spot accepted uploading a wider JPG as well, s/th like 960x150!
Would love to make that header go over the WHOLE WIDTH of the page...)

Also, I tried uploading a "custom header" (960x150) under "Appearance/Header", but... that placed itself way too low on the page, strangely, which wouldn't work.

2) For the main background, behind all the main content (so not the header!):
would it be possible to customize that, so that it looks like the main content area on my main site at http://JazzHeaven.com ? (I have the Photoshop files...)
The plain white is a little flat for my taste.

DavidM had kindly already responded with this:

"As for the background image, I believe you can easily do that with the BODY tag:
body{background-image:url.png;}
To clarify, that would be a CSS edit, something you could include in your theme's style.css file. You can access that file directly from your admin area at Appearance > Editor too."

Can you tell me how to implement the following pieces specifically?

I have the middle part:
http://jazzmusicheaven.com.s3.amazonaws.com/images/repeat.jpg

I have the bottom part:
http://jazzmusicheaven.com.s3.amazonaws.com/images/bottom.jpg

How/where do I put this, so that I have the background just like main site at http://JazzHeaven.com?
So, the darker-blue color on the right & left side; and the lighter-blue cloud/sky background for the main section in the middle? And the ending it correctly with the bottom part?

So, DavidM, you were saying to add some code under Appearance/Editor in the "BuddyPress Social Child Theme: Stylesheet (style.css)", right?

Could you tell me how I would insert the 3 pieces I mentioned (dark blue on right & left side; the custom cloud/sky background in the middle (with the sheet music edge, but that's already part of that repeat.jpg), AND ending it correctly with the BOTTOM.JPG to end the "sheet music horizontal border" correctly at the bottom?

Thanks very much for your support!

Falk

PS: Sorry, one more: I upgraded to the 1.6.2 Social Theme, BUT my CHILD THEME is still at 1.2.4 - is that the way it's supposed to go? I always ONLY updated the parent theme, but I never touch the child theme, since that's where the custom stuff sits?
Thanks in advance!
Falk

  • DavidM

    Hi Falk,

    These are rather extensive edits and really would require a developer to fully accomplish. You can take a look at the listing available here on the site to help with that.
    https://premium.wpmudev.org/wpmu-jobs/developers/

    We can definitely provide pointers, as you saw in your other thread, to assist you with the matter, but ultimately, these things do require quite a bit of understanding of theme development and it's best you get a developer for that reason.

    That said, there's a few things I'd like to mention that will help you get a good start in customizing it yourself. The following thread provides a great explanation of the parent-child theme model.
    https://premium.wpmudev.org/the-buddypress-manual/what-are-parent-and-child-themes/

    As you mentioned the version of the child theme on your site isn't recent, what you'll likely want to do is delete the version on your site, and install the version included in the latest version of the theme.

    That will be the theme you'll actually want to make all your customizations to. Within that child theme folder you'll find a file bp-social-child/_inc/css/child-style-sample.css. You'll want to rename that file to child-style.css. This is the file you'll be actually be making the edits in.

    In that file you can copy the following to the bottom, below all the comments:

    #home-logo{
    	width: 960px;
    	overflow:visible;
    }

    With that done, you'll need to uncomment the following line from style.css in that child theme folder:
    /* @import url(_inc/css/child-style.css); */

    Uncomenting that line at the end of the file, you'll then have this:
    @import url(_inc/css/child-style.css);

    With that, you can activate that new child theme, upload your 960x150 logo and you should see the entire image then.

    Regarding the background image, that's definitely an extensive one, much more so than this, something that really belongs in the custom development department.
    https://premium.wpmudev.org/wpmu-jobs/

    Let me know if any of this needs clarification though. I'll see how I can assist from there.

    Cheers,
    David