Modify image for the intro header in BP Social.

I would like to either reduce the size of the image for the intro header, or eliminate it, and also make the text wider. Where would I do this?

  • Tammie
    • WordPress Wizard

    @pluzon: Could you give some indication of what you mean by header as social has 2 areas could be called header and also provide a link please - a link always helps as your site could have specific information we need to take into account when supporting.

  • Mason
    • DEV MAN’s Sidekick

    Hiya pluzon,

    This is a bit outside of what would be covered in theme options, but all the changes you're looking for can easily be accomplished through a bit of HTML/CSS styling.

    Easiest way would be to remove lines 13-28 in top-header.php and then customize the CSS for #top-header (to change height to what you prefer) and .home-intro (to spread it across the entire width of the page). You can edit the changes in style.css or use a child-theme and add the custom CSS there.

    If you need help making these changes, firebug in firefox is really your best friend. Tammie's even put together a great video tutorial on how to get started with this tool.
    http://buddydress.com/2010/06/firebug-installing-discovering-and-using-the-tutorial/

    Thanks!

  • pluzon
    • Design Lord, Child of Thor

    My changes to top-header.php in child won't over-ride top-header.php in parent. I already have footer.php in the child, and the modifications I've made work. I think I must be leaving out something very basic. Any ideas? Anything that is commonly overlooked in this situation? I don't have any skill in any of this, and all of it is new to me, so, I think maybe I have forgotten something between when I added footer.php to the child and now.

  • Mason
    • DEV MAN’s Sidekick

    Hiya pluzon,

    Try copying the header.php file into the child theme folder.

    Then you'll need to make the following changes to the new header file:
    on lines 176 and 179 replace the word TEMPLATEPATH with STYLESHEETPATH so line 176 will look like this:
    <?php if( !is_user_logged_in() ) { load_template (STYLESHEETPATH . '/top-header.php'); } ?>

    That should do the trick. (I shoulda mentioned that from the beginning but didn't think of it. Apologies!)

    Keep us updated as to how it's going. Thanks! :smiley:

  • pluzon
    • Design Lord, Child of Thor

    It worked! And, using your previous instruction, I deleted the intro image in the child top-header.php file.

    Now, I'd like to move the welcome message and the sign-up/sign-in at the bottom of the message, to above the navigation bar (that has the "Home" tab). This is in the blank area to the right of the words, "BuddyPress Themes In Action", as shown in the BP Social demo: http://buddypressthemes.org/?wptheme=BuddyPress%20Social. Which file controls the order of these? I'm guessing I need to move top-header.php above navigation.php in this file. Is that right? I'm also guessing that this will not put the welcome text to the right of the logo, as I wish, but below it. Is it better to do this in style.css, or to move that file to the child and modify it?

    My reason for doing this is to make it easier to view the pages that are displayed from the navigation page. I find that when using a wide screen, it is awkward to scroll up and down while viewing these pages before logging in. After logging in, using the navigation bar to view the pages is very user friendly. This is the experience I'm trying to re-create on pre-login page.

  • pluzon
    • Design Lord, Child of Thor

    If the above is too ambitious for my limited abilities, maybe it would be more plausible to decrease the height of the welcome area by changing it into 3 columns: column one with the welcome title, column two with the welcome text body, and column three with the sign-up/sign-in items.

  • Mason
    • DEV MAN’s Sidekick

    Hiya pluzon,

    Yeah, once you start moving things about like that it get's a bit tricky.

    The file you're looking for to make those changes is header.php. Start looking around line 171 and below for where they other files are called.

    I'm not exactly sure what you want to do, but my recommendation would be to play around with it in firebug and see how changes effect the display. You could lower the height of the welcome area and thus make that bit smaller.

    It may be worth noting that the whole welcome area and picture are only on the front page when a user is logged out. Once they're logged in that section is replaced by activity and normal buddypress content.

    Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.