Hi. Firstly, thank you for this theme. I think it is great!

I would like to understand a bit more about some of the CSS used in the header region. I am trying to add a block into the header region. The block contains a single banner ad 468x60. After limiting the block width, floating the block right and aligning the block content right, I achieve the layout shown in the attached image Screenshot-mix-and-match-header.png.

After playing with firebug, I found the following CSS code associated with the site logo:

#header-site-info-inner {
    float: left;
    min-width: 500px;
}

I then disabled the min-width in firebug to achieve the desired result as shown in the attached image Screenshot-mix-and-match-header-firebug.png.

So to my questions:
What is this min-width there for?
Is it to fix another problem that I have not yet seen with my layout?
If not, should this be fixed in the theme rather than me fixing it in my local.css file?

Thanks for your help.
Ian

CommentFileSizeAuthor
#5 Screenshot-mix-and-match-skinr-block.png31.31 KBff1
#3 Screenshot-mix-and-match-final.png59.36 KBff1
Screenshot-mix-and-match-header-firebug.png92.87 KBff1
Screenshot-mix-and-match-header.png56.32 KBff1

Comments

ff1’s picture

ff1 commented

After some more css tweaks, the final results are attached. And here's the css that achieved it:

/* Allow ad block in header region alongside the site logo. */
#header-site-info-inner {
    min-width: 0px;
}
#header-group .block .inner .content {
    padding-right: 5px;
    float: right;
}
.search-box {
    padding-top: 0px;
}
ff1’s picture

ff1 commented
StatusFileSize
new Screenshot-mix-and-match-final.png59.36 KB

... and the attachment!

Mambo89’s picture

Mambo89 commented

Could you please write more about it. I repeated your process but it doesn't work.

ff1’s picture

ff1 commented
StatusFileSize
new Screenshot-mix-and-match-skinr-block.png31.31 KB

I used the skinr module and then also made the following changes to the block that contains the banner ad:

Width (16 column grid): 10 units wide
Block position: Float block to the right
Content alignment: Right align content within its container

Hope that helps.

ajross’s picture

ajross commented
Status: Active » Postponed (maintainer needs more info)

Sorry I was slow responding, but I'm glad you were able to work out a solution. I'm afraid it is difficult to set up the header region so it works for different types of blocks and backgrounds so it usually does need some modification to get things to look right for different sites. Mambo89 - were you able to get things working also?

ff1’s picture

ff1 commented

No problem Andrea. The CSS was very easy to work with, so once again, thanks for a great theme!

Ian

kemi’s picture

kemi commented

thanks this method works well

ajross’s picture

ajross commented
Status: Postponed (maintainer needs more info) » Closed (fixed)
Patricia_W’s picture

Patricia_W commented

I'm having a similar problem. I have a logo image that is 960px, but when I use it it is shifted right by about 20px. I've tried a bunch of settings to fix this but none work so far. When I use csseditor to view the image it appears that the only matching style is img in defaults.css and styles.css

Even if I add an override to local.css it has no effect and doesn't show as a matching style. I'm far from a css expert so I'd appreciate any help to get this fixed. Otherwise I love the theme.

I also tried to use a local.css override to add a background image above the navbar but the navbar moved up and blocked part of the image.

ff1’s picture

ff1 commented

Your problem is similar, but not the same as this one, so you should create a separate issue for it. Also, it would help if you posted some a screenshot to help others recreate the problem, or even better a url if the site is live.

If you post your new issue number back here I'll be happy to have a look at it for you.