Adding dividing line with text between widget areas

[Susan]

Working on the Executive Pro theme, my client has requesting diving lines between her home page featured widget areas, similar to this site: http://weareonyx.com/ (see "How it Works", and "Our latest products".)

Does anyone have a link to a tutorial to recreate this?

http://www.megan.graphicallydesigning.com

[Andrea Rennick]

testing reply

---

**forum signature**
If you need technical support for your theme please file a ticket.

The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

[nutsandbolts]

Susan, I'm going to email you since the forum refuses to let me respond for some reason.

And of course once I say that, it goes through. Must be something in my response. Let me try again:

They are using HTML like this:

<h3 class="cross-border"><span>how it works</span></h3>

Then they have the following in the stylesheet:

h3.cross-border {
font-weight: normal;
font-size: 21px;
color: #000;
background: url(images/bkg_product-collateral.gif) 0 50% repeat-x;
padding: 0 0 1px;
margin: 0 0 15px;
font-family: timesitalic;
text-transform: lowercase;
text-align: center;
}

h3.cross-border span {
display: inline-block;
background: #fff;
padding: 0 15px;
}

I think the easiest way to do it would be to add some full width widget areas before each section - maybe home top welcome, home middle welcome, etc. and stick a text widget in it.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Susan]

Thanks, Andrea! I will give that a go!

[Author]

Posts