Widget areas in 3 or 4 columns under header, similar to footer

  • culturalproduct

    #4118

    The one thing that had caused me to try other themes after I had spent a lot of time with Graphene was this:

    I’d love to be able to have 3 or 4 widget areas right under the header navigation bar, horizontally, on the front page. There is a theme called “Reference” which has this, but, no way to limit them to the front page only.

    So it would look to visitors like a series of boxes (or whatever you put there) similar to the footer widget areas.

    I realize you can enable a widget area in this location, but its just a single area that spans the layout, which is great, but not quite it.

    Mod

    Kenneth John Odle

    #27302

    If you are handy with css, you can implement this using a graphene action hook widget area.

    Activate a the “graphene_before_content” widget area in “header.php”. Add text widgets (or whatever) and style it using css.

    You can see an example here: http://test.kjodle.net/blog/2012/01/13/image-gallery-test/

    This is the custom CSS I used to style the widgets:

    #graphene-dynamic-widget-graphene_before_content {
    background: #e3e3e3;
    margin-left: -25px;
    }

    #graphene-dynamic-widget-graphene_before_content .widget_text {
    position: relative;
    float: right;
    width: 28%;
    padding: 10px;
    margin: 10px;
    background: #99ccff;
    border: solid 3px #0000ff;
    border-radius: 10px;
    }

    I made it ugly so that it’s obvious, but you could also just copy the default widget styles.

    The whole thing took me about ten minutes to do while I was watching American Dad, so you could probably get this done in an hour or so and actually make it look good.

    Mod

    Kenneth John Odle

    #27303

    I realize that shows up on every page. However, you can use the Widget Logic plugin to control the position of this widget.

    This is so cool I may implement it on my blog. Thanks for the idea!

    culturalproduct

    #27304

    I’ll have to try American Dad to reduce my time usage on PHP 🙂

    Thanks for the tip on Widget Logic. I’ll have to examine that a bit as it asks for more code-thingys that I don’t know as yet.

    I want boxes (or widget areas) for a landing page. On some very graphical sites that don’t need or have an actual blog on them, but are more like a website front end, these allow you to highlight anything from products, services, to pitch points. I had a couple of websites that I needed to highlight services for, that are pretty wide-ranging within the relevant business sector, so it helped convey quickly some of what we do there. Anyway I used another theme that had them already but maybe I can switch them to Graphene now.

    I’d guess these boxes would be attractive for advertising placement as well.

    Thanks – W

    culturalproduct

    #27305

    Out of curiosity: is it the Float part that makes them be a horizontal row, instead of a vertical pile, of widgets?

    Mod

    Kenneth John Odle

    #27306

    is it the Float part that makes them be a horizontal row

    Yes. Each one floats to the right of the previous <div>.

    There are probably more efficient ways to style these, but that code was quick and dirty to get the job done.

    Mod

    Kenneth John Odle

    #27307

    Actually, I had to load those widgets backward (what, second, first) to get them in the right order, but was too tired to figure it out. Then I saw what kenmcneill wrote in this thread and realized I had left and right mixed up.

    Now the new code is:

    #graphene-dynamic-widget-graphene_before_content {
    background: #e3e3e3;
    margin-right: -25px;
    }

    #graphene-dynamic-widget-graphene_before_content .widget_text {
    position: relative;
    float: left;
    width: 28%;
    padding: 10px;
    margin: 10px;
    background: #99ccff;
    border: solid 3px #0000ff;
    border-radius: 10px;
    }

    and I can load the widgets in the right order (first, second, what) and that’s how they show up.

    culturalproduct

    #27308

    Thanks – W

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

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!