[Theme: Elbee Elgee] Header image tricks with fluid width layouts
-
Thanks once again for the great theme. Here’s more feedback for the purpose of making the theme even better.
When using a fluid-width layout, the header images behave differently on IE 8 and the newest version of Firefox (13 at the moment of writing). After adding the following under div#header in the custom CSS file based on ng.css, the header behaved the same way in both, although slightly differently than originally:
background-position: right bottom; background-size: auto;
Before this, the other browser resized the image only horizontally, skewing the proportions, while the other resized it both ways, so that only the bottom 200px of the resized image was shown when using wide browser windows. After the CSS change a blank space would appear on the left side of the image when a larger browser window was used. This doesn’t work perfectly with all header images, but it works fine when using for example the fireworks background image and adding the following CSS under div#header:
background-color: black;
I’m not sure what to recommend as the default settings, but the current default looks awkward with fluid layouts on both IE 8 and Firefox — and in different ways on both. It would be better to use one behavior on all major browsers.
Still another option would be to not specify a height for the header area in fluid layouts, only a min-height, and then stretch the header area both horizontally and vertically when the browser area exceeds 960px in width. 1920px wide browser window? No problem! Your header image is now 1920×400 instead of 960×200.
However, all the fluid layouts I’ve seen used have a fixed header image size and header height. To do that in Elbee Elgee it would be enough to just be able to customize the header a bit easier than currently, as I suggest in my other thread Advertising banner over header image. For example Slashdot uses a fluid-width layout with a fixed-size header image, and to be able to do this with Elbee Elgee without leaving WordPress admin panel would rock big time.
Possibly it would become easy enough if there was an FAQ entry on customizing the header for at least:
- Heights other than 200px
- Fluid widths, or widths otherwise different from 960px
- Using advertising banners (eg. Google Adsense code) instead of or over a static banner in header area
- The topic ‘[Theme: Elbee Elgee] Header image tricks with fluid width layouts’ is closed to new replies.