[Anonymous]

Anonymous

#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.

[Kenneth John Odle]

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.

[Kenneth John Odle]

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!

[Anonymous]

Anonymous

#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

[Anonymous]

Anonymous

#27305

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

[Kenneth John Odle]

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.

[Kenneth John Odle]

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.

[Anonymous]

Anonymous

#27308

Thanks – W