Header logo image / banner

[Redh]

Hello, I'm a new customer and am working on migrating from vBulletin to Xenforo. I've used VB for over 10 years, so all this new responsive design is a mystery and a wonder to me! I'd also like to say that I spent a long time choosing which theme to make the switch to, and your designs and support over on the official forums stood out. I'm very happy to be here!

My question is regarding the best solution for having a banner across the top of the page, in the header section, which is the same width as the website (in my case, 1190px). If I simply add this banner to the "Header Logo Image Path", then when the browser window is reduced in size the logo shrinks to fit, but the header height doesn't adapt with it, leaving blank spaces at the top and bottom of the header section.

Alternatively, if I add the banner image as a background image to the header section itself, it spreads across 100% width of the page and not just within the max-width I've set for the forums. This solution would also cause problems when the responsive design switches to a mobile logo, as now the background banner image makes no sense.

What is the best way to achieve an 1190px image in the header that will scale well with responsive design?

If I've been unclear, I can post screenshots to show the problem.

(Also, unrelated, any quick feedback on the best alternative to vBAdvanced? Most of the solutions I've seen so far only seem to work for a single home page, and not several different non-forum related pages)

Edit to say: I'm using Core Dark.

 

[Russ]

No true replacement for vBAdvanced from what I'm aware. XenPorta and CTA Featured Threads are currently the only types of home page solutions out there. Bob on XenForo also has an articles system but he's closed off to new customers I believe.

As for having a banner that large up top you'll have a hard time finding a good solution. Basically there's no way to retain the height of the image while shrinking it down without it looking distorted. One thing you could do and this is built into the style but have a mobile logo which kicks in. If you want to show me an example of the banner I can try to guide you the best I can though.

 

[Redh]

Thanks for the reply Russ. I'm happy for the image height to scale down, I wouldn't want it to distort. But when it does that, I get a gap above and below the image because the header height doesn't scale along with the image, it stays at 200px.

Once it gets to mobile size, I'm happy for it to switch out to a different logo image.

 

[Russ]

Can you show me a preview of the image you're using for your logo?

 

[Redh]

This is the full size banner image:

And this is what happens when the browser window is not as wide as the image width:

Thanks again

 

[Russ]

So this is how I'd approach it...

Do you have the psd to the banner? I'd split the images, make it so your logo the cyrus gaming + the logo icon and the opaque background is it's own image. Then same the image behind it as it's own image. From there... set your logo as the small text + icon, then go to Style Properties -> [XB] Header and Navigation -> Logoblock pagecontent: and set the background image on that the image behind your logo.

Does that make sense?

 

[Redh]

Haha! Ok, I'm going to read this several times and spend a few hours working on it! I do have the PSDs and can split up the image no problems. I'll try and figure out the rest, and pop back later if I get truly stuck.

Thanks so much for the help - I'm very glad I made the right choice in coming here for my theme

 

[Russ]

If you want to email me the PSD to: [email protected] I can split it real quick for you assuming it's layered. I can then return the images for you to upload. Once you upload it if you want to create me a temp login on your site I can get it setup in a minute or so

 

[Redh]

Wow! That's really great of you, thank you! I'll email you shortly

 

[Russ]

Can you upload these files to your style folder? Also where is the forum installed? This isn't working: http://www.cyrus-gaming.xyz/

 

[Redh]

Uploaded to /forums/styles/logo.png and /forums/styles/logobg.png

And the forum is installed at www.cyrus-gaming.xyz/forums/

 

[Russ]

Take a look, let me know what you think

 

[Redh]

That was fast! This has solved the desktop issue, however now it doesn't switch over to a mobile logo, so the header looks very large on a mobile. Is there a way around this?

Incidentally, I wasn't against the image itself scaling down in size before, just the fact that the header size remained at 200px and didn't scale with the height of the image

 

[Russ]

Refresh, I did reduce the height of the spacing there, you can also replace it with anything you want here: http://www.cyrus-gaming.xyz/forums/admin.php?styles/cyrus-style.5/style-properties&group=header

 

[Redh]

That's awesome, thanks so much Russ - much appreciated!

 

[Redh]

Sorry, just one more small thing I've noticed. This works perfectly on the desktop version now - but when it switches to the mobile header (and on a mobile phone) the background image doesn't stretch to the full width, there are blank areas to the left and right. If this could be fixed, it would be perfect for me - I've added a 2nd logo file for the mobile header and I'm really happy with how it will look

See below - if the image could stretch to match the width of the blue area, that would be great.

 

[Russ]

Take a look, made a small CSS adjustment.

 

[Redh]

That has fixed the smallest mobile view, thank you! Now tell me if I'm just being ultra perfectionist, but there seems to be 3 transitions going on here. The desktop view, the mobile view, and one in between - tablets maybe? Anyway, the desktop and mobile are working perfectly, but the middle change is off. The transition is when the header switches to the smaller mode, but there are still two columns in the forum list (in the mobile view, this switches to 1 column).

Is this an easy fix, or am I just asking for something that really can't be done easily? I'm sorry to be such a nuisance on my first day here! Hopefully what we are doing here will be useful to others

 

[Russ]

Ah I did fix it but you may of had extra.css open. Sometimes if 2 people have it open it'll revert changes someone does.

@media (max-width:@maxResponsiveWideWidth)
{
   .Responsive #logoBlock .pageWidth, #navigation
   {
     padding: 0px;
   }
}

the ,#navigation part I added it back.

 

[Redh]

Sorry about that, I was working out how to change the prefix hover colours. I'll stay out of there for now!

The top blue bar goes across the screen 100%, however now the second blue bar (and everything below it including the breadcrumbs down) has a slight gap on either side. I can post a screenshot if you need.

I'm really sorry this turned out to be so complicated, there's no way I'd have managed to do this myself. Who'd have thought a "simple" banner would cause so much hassle!