Skip to:
Content
Pages
Categories
Search
Top
Bottom

Sidebar over header (Twitter style)

  • Avatar of James
    James
    Participant

    @janismo

    hi,

    is it possible to pull default sidebar higher to the middle of the header (over header), like it is on twitter homepage?

    thanks.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Avatar of Roger Coathup
    Roger Coathup
    Participant

    @rogercoathup

    @janismo – anything’s possible (just about) by re-working the CSS in your child theme.

    Essentially, this is a CSS question rather than a BuddyPress question.

    Are you building your own theme? Do you know how to write to CSS?

    A good starting point to understand the markup and get a pointer where to re-work the CSS is a browser tool such as Firebug in Firefox or Developer Tools in Safari

    Avatar of James
    James
    Participant

    @janismo

    @Roger Coathup
    thanks for reply, I do have my child theme, but my skills are not to good, I would say very bad.
    Tried to achive this with sidebar padding, margins, etc…, but with such a method sidebar goes behind the header.

    maybe there is some fast/easy way, which would work for all browsers?

    thank you.

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    #sidebar{margin-top: -30px;}

    Avatar of James
    James
    Participant

    @janismo

    @Modemlooper

    hi,
    as I said before, it doesn’t help, because these corrections pull sidebar up, but to back of the header, not over the header (in front)

    thanks.

    Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    @Janis

    You can always widgetize your header. Here`s a great tutorial for that:
    http://wpmu.org/how-to-widgetize-a-page-post-header-or-any-other-template-in-wordpress/

    Then, you can do one of two things to make your sidebar go away:
    1 – On every template where you don’t want the sidebar to appear, you can either comment out the line where the sidebar template call is found, or use “remove_action”
    2 – Or you can cheat (not the best way): adjust the margin of the “.padder” div and the width of sidebar to 0px. It will still be there, just not visible.

    Avatar of James
    James
    Participant

    @janismo

    @pcwriter

    actually, before I started this topic, I’ve seen your link about widgetize in other post and already made one template.
    As I understand you now, I have to add sidebar to the header – ok, but according to this tutorial sidebar/widget will appear on top/bottom of the header.
    Maybe you could tell me how I can move it to the right side (on top of default sidebar). Do I have to add some css class?

    thanks.

    Avatar of James
    James
    Participant

    @janismo

    @pcwriter

    another thing would be whether will it be possible for me to change template for the home page, as I still want to use it (not static).

    thanks again.

    Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    @Janis

    If you can wait a couple of hours, I can post some css & stuff to get you started. I`m at work right now and should be home around 4:00pm (it`s 1:00pm here now)

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    #sidebar{margin-top: -30px; z-index: 999;}

    Avatar of James
    James
    Participant

    @janismo

    @pcwriter of course I will wait, thanks.

    @Modemlooper thanks, but your method still pulls sidebar to the back side of the header

    Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    @Janis, here we go…

    To widgetize your header, register a new sidebar in your child theme’s functions.php file, like so:

    `register_sidebars( 1,
    array(
    ‘name’ => ‘custom-header’,
    ‘id’ => ‘custom-header’,
    ‘before_widget’ => ‘

    ‘,
    ‘after_widget’ => ‘

    ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘


    )
    );`

    Next, add the new widget area to your child theme’s header.php file, just below the line where you see `

    Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    @Janis,

    Just thought of a different strategy… come to think of it, this may be what you’ve been asking for from the beginning ;-)
    If you want to keep your existing sidebar, but extend IT to the top of the page, and make your header narrower, that can be done purely through css. Here’s how:

    Make sure #container and #header divs are both position:relative;
    If your sidebar is on the right, add float:left; to #header div (if sidebar is on the left, add float:right; to #header div)
    Add z-index:1; to #header (makes it sit on top of the #content div)
    Add margin-top:Xpx; to #content (set to whatever pixel value gets your content to sit squarely below your header)

    Done :-)

    Avatar of James
    James
    Participant

    @janismo

    thanks @pcwriter,

    unfortunately have to conclude that, probably, it will be better for me to leave sidebar on its default place.

    tried both of your methods:
    1. using your codes + some css of default sidebar achieve widget near the left side of the header, but sidebar can not be extended to the content + sidebar acts strangely;
    2. header background sticks to the left side, but content (sidebar too) still goes to the back of header (its previous position);

    thanks again.

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

You must be logged in to reply to this topic.