Skip to:
Content
Pages
Categories
Search
Top
Bottom

Theme customization

  • Avatar of idotter
    idotter
    Participant

    @idotter

    I’d like to customize a theme in this way, that there’s a custom header before the admin-bar. Will this be possible ?


    My Header with Logo


    Admin-Bar


    BP-Content and -Header


Viewing 6 replies - 1 through 6 (of 6 total)
  • Avatar of Xevo
    Xevo
    Participant

    @xevo

    Well, yes. But it probably won’t go with the page anymore (unless you really know your stuff).

    Just paste the code from the admin bar (whats inside) below your header.

    If I remember correctly it’s somewhere inside the bp-core folder..

    Avatar of stwc
    stwc
    Participant

    @stwc

    Anything is possible. It kind of comes down to degree of difficulty!

    Avatar of idotter
    idotter
    Participant

    @idotter

    For better illustration i made a mokup of what i’d like to do:

    http://img.skitch.com/20100407-cpxuba7ib5gka58kywyyn7gpua.jpg

    1. put in a header with logo

    2. shrink the BP-header and

    3. reposition the tabs to top of header

    Is this possible with knowing little php, html and css?

    Or is anybody willing to do this for me for some little money ? ;-)

    Avatar of idotter
    idotter
    Participant

    @idotter

    noone willing to help?

    Avatar of Andrea Rennick
    Andrea Rennick
    Participant

    @andrea_r

    First off, make a child theme so you can hack that to pieces.

    1. Copy header.php into the child theme too.

    Find this spot:

    `<body <?php body_class() ?> id=”bp-default”>

    <?php do_action( ‘bp_before_header’ ) ?>`

    Put a <div id”banner”> </div> in there. This will be your new header, whcih we’re calling banner because header & log are used already.

    (Note: yes, i know we could probably hook into the bp_before_header, put I’m going for easy.)

    Open up style.css in your child theme (you moved a copy there when you made the child theme.)

    Add

    #banner {
    width:100%;
    background: url (yourbannerimage.jpg)
    height: 200px; /* the height of your new banner */
    }

    You may need to tweak that, but that’ll be enough to get you started.

    2. Shrink the header. Again, pure css here.

    #header { 50px }

    This will make it half as high as it is now.

    3. Move tabs.

    These are positioned absolutely via css. remove that, and wow, they go right about where you want them.

    ul#nav {postion:relative; }

    that’s the css you need.

    4. not mentioned but illustrated: moving the bp admin bar to a weird spot.

    The way this works is it “hooks” into the footer and is positioned fixed at the top of the page via css. I’m kinda stumped on this one, as anything I change moves it to the bottom again. It;s designed to be at the top of the page. It;s not a menu within the flow of the HTML.

    That’s all I can give you, really. Please get firefox and the Firebug extension. I found most of this in a few mintues becasue that’s what I use. (and I’m familiar with the css anyway… :P )

    Avatar of Andrea Rennick
    Andrea Rennick
    Participant

    @andrea_r

    First off, make a child theme so you can hack that to pieces.

    1. Copy header.php into the child theme too.

    Find this spot:

    `<body <?php body_class() ?> id=”bp-default”>

    <?php do_action( ‘bp_before_header’ ) ?>`

    Put a <div id”banner”> </div> in there. This will be your new header, whcih we’re calling banner because header & log are used already.

    (Note: yes, i know we could probably hook into the bp_before_header, put I’m going for easy.)

    Open up style.css in your child theme (you moved a copy there when you made the child theme.)

    Add

    #banner {
    width:100%;
    background: url (yourbannerimage.jpg)
    height: 200px; /* the height of your new banner */
    }

    You may need to tweak that, but that’ll be enough to get you started.

    2. Shrink the header. Again, pure css here.

    #header { 50px }

    This will make it half as high as it is now.

    3. Move tabs.

    These are positioned absolutely via css. remove that, and wow, they go right about where you want them.

    ul#nav {postion:relative; }

    that’s the css you need.

    4. not mentioned but illustrated: moving the bp admin bar to a weird spot.

    The way this works is it “hooks” into the footer and is positioned fixed at the top of the page via css. I’m kinda stumped on this one, as anything I change moves it to the bottom again. It;s designed to be at the top of the page. It;s not a menu within the flow of the HTML.

    That’s all I can give you, really. Please get firefox and the Firebug extension. I found most of this in a few mintues becasue that’s what I use. (and I’m familiar with the css anyway… :P )

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.