Hello,

Would like to place several blocks in the header, such as FB connect, Userpoints and a like button.

I tried the top header first, second and third blocks but I found the distance from the logo was large.

The header would be ideal next to the logo.

Any tips?

Comments

giorgio79’s picture

giorgio79 commented

Just as a comment, at the moment if we add multiple blocks to header ,they are just piled under each other, because all blocks have this

.block{clear:both;margin-bottom:25px;}

I guess a default float would be better for the header area, so blocks can get next to each other. :)

PS: I Succeeded by applying clear:none, so sg like this:
#block-fb-connect-login{float:left;width:200px;clear:none;}
#block-userpoints-1 {float:right;width:200px}

giorgio79’s picture

giorgio79 commented
Title: How to float blocks in header or have multiple header regions for multiple blocks? » Apply clear:none, and float:left to header blocks - so multiple blocks in header are next to each other

Changing title to be more descriptive :)

Jeff Burnz’s picture

Jeff Burnz commented
Title: Apply clear:none, and float:left to header blocks - so multiple blocks in header are next to each other » Float blocks in header region

Maybe, this changes the design and there are a lot of existing users, so I'd prefer to wait for more feedback from other users before jumping into this.

giorgio79’s picture

giorgio79 commented

Thanks Jeff, sounds good.

Meanwhile here is a 1 liner solution

.region-header .block {clear:none;float:left;}

Jeff Burnz’s picture

Jeff Burnz commented

Yeah, that's pretty much all you need to do, in some cases a particular block may need a width set on it. That said, this could break or at least disrupt the layout when viewing the site in small screens, so accounting for floated blocks at each break point is important, so check that if its important to you.