CSS: HOW TO ADD LINES TO EITHER SIDE OF A HEADING

We're going to get a little technical today. Don't worry, not too technical... a healthy level of technical. A short while ago Brittany tweeted asking how create a heading on one's blog with lines on either side - something like what you'd see on the sidebar headings on Vivannadoesmakeup or Gh0stparties. I've wondered how to do this myself for ages and never found an answer when eugooglizing. When I saw Brittany's tweet I decided “Imma figure this biatch out once and for all.” So I went back on the hunt.

After some digging I found this site, which turned out to be an absolute godsend. However, I was somewhat confused when I first saw their explanation as I feel like it could have used a little more detail for us non-web-designers. So I'll to run you through the process step by step. I have to explain the way I did it for blogger because, well, that's what I use, but I'm sure you can apply the same principals to Wordpress.

Essentially what you're doing with this method is creating a line (or border) straight through the center of your title using some CSS styling. Then by tinkering with your HTML you're placing a block behind your text that will (thanks to your CSS) match your background.

Part 1:
Assuming you want to add this styling element to your sidebar titles this is what you need to do. Go to your blogger dashboard, click on the “template” tab, then click the “customize” button. After that click “advanced” and then “add CSS.”

Then paste in this code into your CSS box (which is more or less the first example on that site):

.sidebar h2 {
  position: relative;
  text-align: center;
}

.sidebar h2 span {
  background: #fff;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

.sidebar h2:before {
  background: #ddd;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
    top: 50%;
  width: 100%;
}

.sidebar h2:before {
  left: 0;
}

At this point you'll see a line straight through your text. We'll remedy that next.

*Note: if the background colour of your blog isn't white you'll need to change the 6th line of code (background: #fff;) to reflect your background colour.

Part 2:
Now you need to head over to the “Template” tab and click “Edit HTML.” Please, for the love of God, back up your template before you do anything... always (even adding CSS). This is the part where we add the block behind your text. What you need to do is search your code for the title of every gadget individually and add a span around it.

Search for this under each gadget:

<h2><data:title/></h2> 

And change it to this:

<h2><span><data:title/></span></h2>

If you've used a gadget with an open source code it may appear like this instead:

<h2 class='title'><data:title/></h2>

You just have to add the span like this:

<h2><span><data:title/></span></h2>

And that's it. That should have done the job. I hope that wasn't too hard. I get a bit nervous posting stuff like this because, like I said, I'm not a web designer. Still, I thought it might be worth sharing this how-to because it's a handy one to have under your belt.

Side story: The real lol (not) is that after I figured out how to do this I was feeling all proud and pleased with myself so I told me techy friend about it and he said “you know I sent you an email about how to do that months ago right?” Nope. No I did not remember that.