WordPress.org

Ready to get started?Download WordPress

Forums

Elbee Elgee
[resolved] [closed] Header image tricks with fluid width layouts (8 posts)

  1. Daedalon
    Member
    Posted 1 year ago #

    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 1920x400 instead of 960x200.

    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

    http://wordpress.org/extend/themes/elbee-elgee/

  2. Doug
    Member
    Theme Author

    Posted 1 year ago #

    Daedalon:
    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.

  3. Daedalon
    Member
    Posted 1 year ago #

    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.

  4. Daedalon
    Member
    Posted 1 year ago #

    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 960x200 pictures allow, so I may need to start tweaking and use workarounds before 1.4 comes out.

  5. Doug
    Member
    Theme Author

    Posted 1 year ago #

    Daedalon:
    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.

  6. Daedalon
    Member
    Posted 1 year ago #

    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?

  7. guynave2
    Member
    Posted 1 year ago #

    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.

    http://www.clamoringforchange.com

  8. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic