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.

  • Gah you clever clogs… Loved the "sweet lines bru" comment, touché 😉

  • Definitely going to try this over the weekend! You've made it seem super easy!

    Jodie xo // La Lune Song

  • I always save your CSS/making your blog look prettier tips, they're seriously so helpful- thanks for posting them! 🙂

    TanjaWhatsername

  • I'm just so glad they go down reasonably well. It always surprises me.

  • Yeesss. Thank you! I wondered if anyone would read that.

  • I love seeing tips like this – you write it in a way that's easy to follow which is most appreciated!

    Tessa / Bramble & Thorn

  • I love the idea of you sharing design tips. As a 'learn and do it myself' kind of girl, I always appreciate easy and straightforward tutorials. Some I find while googling literally seem in a foreign language. Great post!

    xoxo
    Kelly
    http://www.dreaminlace.com

  • I know what you mean. When I first looked at that site that explained how to do this I was like "wait, what… what where?" I like to be spoken to like it's my first day.

  • Excellent! I'm glad it's follow-able. That's what I'm shooting for.

  • LOVE IT. this is like the first design tutorial i've actually been able to follow lol.

  • Ahh and I see it's been implemented. Good stuff.

  • YA GUUURL! You a lifesaver 😉 xx

  • Thank you so much for this! Been wondering how to do this for ages but this was so easy to follow! xx

    Kay | What Kay Does

  • wow what a nifty little trick to know! thanks 🙂

    thisandthatplease.co.uk
    x

  • Thank you so much for this but how would you add these lines to your post title?

  • Hi! I was just wondering if you could tell me how to apply this to my post titles? I already have got the lining running straight over top, but can't seem to find anywhere the span part in part 2 is working. Thanks!

  • Hey Naomi, did you find out how to add them to the post title? I am struggling with the same thing!

  • Hey, you know I tried the other day and I actually couldn't figure it out. I'll try again and I'll let you know if I do. Sorry.

  • Thank you very much! I really appreciate it

  • Hm I've come to the realization that you have amazing tutorials, girl! But one question, how did you make all that code above appear in a box for readers to copy and paste?

  • I have been looking for a tutorial like this for so long. It's worked perfectly. thank you so much.

    Hayley \ cityandcode