Full width header and footer

  • DezD

    #9257

    Hi Folks

    I really would like to create a site that has a full width header/footer such as shown in: http://pantryliquors2.com/

    Can anyone give me some hints and tips on how to get started please/

    Many thanks

    DezD

    Mod

    Kenneth John Odle

    #43156

    Graphene is really not built for this sort of thing.

    As I recall, someone managed it a few years ago. It was neither easy nor enjoyable.

    If you search the forum, you may find it. I don’t have a link to it.

    Dom

    #43157

    This was my exact question as well, would love to know if someone finds the answer.

    Mod

    Kenneth John Odle

    #43158

    You can if you do a forum search. It’s in there, somewhere, I swear. I have neither the time nor the motivation right now. Busy, busy, busy.

    As I said, the Graphene theme isn’t really set up to do this. If you really want a feature like that, you should use a theme that supports it, or else it’s a lot of work and troubleshooting, and a single update may cause all of that work to become undone.

    FWIW, that site is using a child theme of the Bacchus theme, which is not available from the WordPress theme repository. Instead, it’s a custom theme from a company at http://synesteth.com, whose website is not up yet. But you can view the css for the Bacchus theme here:

    http://pantryliquors2.com/wp-content/themes/bachus/style.css

    and the child theme stylesheet here:

    http://pantryliquors2.com/wp-content/themes/bachus-child/style.css

    if that gives you any ideas.

    DezD

    #43159

    Hi John

    Many thanks for getting back to me, I agree,there was a post somewhere in which someone had managed to create the desire effect but I couldn’t find it either, oh well back to the drawing board, (I still want to use Graphene as it is so good).

    I’d thought about using a background image that would give the impression of a full width header/footer etc but need to make sure that it does not get messed up in different browsers/screen sizes etc.

    Best wishes

    Deryn

    Admin

    Syahir Hakim

    #43160
    Quote:
    I’d thought about using a background image that would give the impression of a full width header/footer etc but need to make sure that it does not get messed up in different browsers/screen sizes etc.

    That would work for the header, but not for the footer since the distance between the header and footer depends on how much content the current page has.

    DezD

    #43161

    Hi Syahir

    Good point.. Just had a thought though, is there a way to “fix” the footer to the bottom of the screen?

    Thanks

    Deryn

    Admin

    Syahir Hakim

    #43162
    Quote:
    Good point.. Just had a thought though, is there a way to “fix” the footer to the bottom of the screen?

    Yes. Something like the following CSS code would work:

    #footer {
    position: fixed;
    bottom: 0;
    width: 960px;
    }

    DezD

    #43163

    Hi Syahir

    Thanks for that, Im going to have a go at it now and I’ll let you know how I get on/what it looks like when it’s done.

    Kind regards

    Deryn

    DezD

    #43164

    Hi Syahir

    Well, I’m part of the way there but could really do with your help and advice here if possible please.

    I’ve added a background image which works perfectly well except that I need it to scroll up the screen with the main body of the site.

    Can you please take a look and tell me where I am going wrong?

    Many thanks

    Deryn

Viewing 10 posts - 1 through 10 (of 11 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.