Header Widget Area

  • bryanhiggs

    #9565

    I just enabled the Header Widget Area in our Graphene theme, and it says:

    Header widget area

    Important: This widget area is unstyled, as it is often used for advertisement banners, etc. If you enable it, make sure you style it to your needs using the Custom CSS option.

    Well, I found the Custom CSS option, and have spent quite a bit of time trying to figure out how to make it do what I want it to do.

    I want the Header Widget Area to become visible just above or below the header image, and to be horizontal. I want it to be the place where we announce things of interest on the site — a banner/marquee type thing. Ideally, this would be only on the front page (this is a static web site, not a blog).

    I’m having the devil of a time trying to make this happen. I’m relatively fluent in HTML/CSS, but the problem I’m encountering is that the Header Widget Area is located just below the header image. They both exist inside a <div> which is positioned relatively, but the header image is positioned absolutely, for some reason.

    I’m finding that the Header Widget Area shows up on top of the header image; they seem to be superimposed.

    I can change the position of the Header Widget Area to be absolute, too, but that only moves it around. It does not insert it above or below the image, since the image is absolutely positioned, which seems to be the problem.

    Can someone give me a hint/clue as to how to do what I want to do. Since the description says that “it is often used for advertisement banners”, surely this shouldn’t be this difficult?

    Anonymous

    #43944

    Link to the site?

    bryanhiggs

    #43945

    This is our production site: http://souheganvalleychorus.org/

    You won’t see anything from the Header Widget Area, since I couldn’t make it do what I wanted, and it kept appearing in the wrong place(s).

    Mod

    Kenneth John Odle

    #43946
    Quote:
    but the problem I’m encountering is that the Header Widget Area is located just below the header image. They both exist inside a <div> which is positioned relatively, but the header image is positioned absolutely, for some reason.

    That is where the header widget area is located in the code; you can make it appear where you want (within reason) using custom CSS. I say “within reason” because you won’t be able to insert it between elements where there is no room for it.

    In your case, I would suggest that you use a Graphene custom action hook widget area:

    Tutorial:

    http://techblog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

    Reference map:

    http://demo.graphene-theme.com/graphene-hooks-map/

    bryanhiggs

    #43947

    Thanks for your response, Kenneth Odle!

    So, that would make the Header Widget Area rather less useful than it could otherwise be.

    I’ll take a look at your post and see what I can figure out with that.

    Regards

    Bryan

    Mod

    Kenneth John Odle

    #43948
    Quote:
    So, that would make the Header Widget Area rather less useful than it could otherwise be.

    It’s actually highly useful. Just not in the way that you want to use it. I’ve used it to include donation button and social sharing buttons off to the sides of a website that stay put as users scroll down the page.

Viewing 6 posts - 1 through 6 (of 6 total)

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