Support » Theme: Elbee Elgee » [Theme: Elbee Elgee] Header image tricks with fluid width layouts

  • Resolved Daedalon


    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Doug Stewart


    I’ll keep these in mind as I work on version 1.4. It’s due to fully support WordPress 3.4’s new flexible header image code which should alleviate at least a portion of the aggravation you’re encountering.

    Great to hear. I’m marking this as resolved – the intention to provide hopefully useful feedback for development and information for other people in solving the above issues was accomplished. My current projects use fixed width.

    Based on the plugin settings and FAQ I’m not yet sure and want to ask:

    Is it currently possible to use a header image with a height smaller (or larger) than 200px?

    Is there a setting to disable the header image or should that be done in CSS at the moment?

    During the next weeks I need to customize a site to use a more compact header in terms of dimensions and file size than 960×200 pictures allow, so I may need to start tweaking and use workarounds before 1.4 comes out.

    Theme Author Doug Stewart


    I would recommend setting up a child theme and then altering the #header height definition. This will allow you to set it to your preferred dimensions.

    It was that simple. Thanks!

    Didn’t even need the child theme, just the customized css under main theme’s styles/ directory. That’s probably not the most upgrade-and-backupsafe option, I guess it’s better not to choose *none* for that customized CSS that can be chosen in the plugin settings page and put everything in child theme’s style.css instead?

    I’m creating a new site using Elbee Elgee (1.3.9) as my theme, and whenever I change my header text color, the color never sticks and it defaults back to white.

    Moderator Andrew Nevins


    Front-end developer

    You can create your own thread if you need support with your own issue.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme: Elbee Elgee] Header image tricks with fluid width layouts’ is closed to new replies.