WordPress.org

Ready to get started?Download WordPress

Forums

Themes that have header across top of page (6 posts)

  1. davede
    Member
    Posted 3 years ago #

    Hi,

    Sorry the topic title couldn't be more descriptive!

    I'm looking for good themes that have their header across the entire top of the page i.e. all the way across from left to right.

    Just like wordpress and like a LOT of other sites e.g.
    http://demo.themesmania.com/?theme=clean_design
    http://flexithemes.com/themes/initiate/

    ...also facebook seems to use this layout.

    anyway,

    what is the name of this type of layout so that i can better refine my search?

    does anyone know any recommended themes that follow that layout or any premium / free theme sites and could point me in the right direction?

    Thanks

  2. Clicknathan
    Member
    Posted 3 years ago #

    That type of layout is sometimes referred to as "liquid" or "fluid", though that technically applies to whether or not your content will expand/contract depending on the size of the browser window.

  3. davede
    Member
    Posted 3 years ago #

    Thanks for that.

    I didn't really think that was what i was looking for due to the exact reason you said:

    'technically applies to whether or not your content will expand/contract depending on the size of the browser window'

    i guess it is just a fluid header theme i'm after.

    I could happily modify an existing fixed theme's header if someone could point me in the direction of some good simple css for creating a fluid header.

  4. Clicknathan
    Member
    Posted 3 years ago #

    Or perhaps you could search for "Full Screen Header", or "Full Browser Width Header".

    Creating a header that goes the entire way across your site is actually pretty easy though. If you want one single image (such as a photo) that stretches the entire width, just use some CSS like so:

    body {background:#fff url(/location/of/yourimage.jpg) no-repeat center top;}

    You'll need to create an image that is at least 1400px wide, but of course many screens these days are even larger. Then, that code basically says "Take the body element, make it's background white (#fff), then place this image horizontally centered at the top of it."

    Alternatively, if you want a tiling image (the same pattern repeated across the screen), then you would create a tiled image (or go to a stock photo site like istockphoto.com and search for seamless) and assign it to the body tag like so:

    body {background:url(/location/of/yourtiledimages.jpg) repeat-x center top;}

    The repeat-x just says "repeat it horizontally".

    That should be enough to get you started. Have fun!

  5. davede
    Member
    Posted 3 years ago #

    m8 you are a legend!

    thanks so much your time and effort in responding.

    I've done a fair bit of css before e.g. My Money Calculator however not too familiar with the full length header. would definitely prefer tiling over fixed width image for both size and screen compatibility reasons.

    It seems strange that so many premium wp themes are styled in the standard fixed width header method when the nouveau style seems to be the fluid header (already named a few examples).

    I've been searching for a day or two and have only found either fluid themes with really overly complicated stuff and a bunch of crap everywhere or the standard fixed width.

    Might do up my own - how hard is it to do up a WP theme having had come straight html and css coding experience? any direction u could point me in?

  6. Clicknathan
    Member
    Posted 3 years ago #

    Well, I learned a lot from just messing with existing templates. Start with TwentyTen (or possibly TwentyEleven, haven't even looked at that yet so don't know what it's all about),and just experiment. Best of luck.

Topic Closed

This topic has been closed to new replies.

About this Topic