Theme customization
-
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
-
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 ?
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…
)
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…
)
- The topic ‘Theme customization’ is closed to new replies.
