Are you less than thrilled with the boring-looking posts and pages on your site?
You know – the plain white background and the black text, with the only break in the monotony being a slightly larger heading every now and then?
Then you, my friend, are not alone. There are literally millions of sites out there that have a great-looking overall design (think stunning header, eye-catching sidebar and lovely layout), but that fall flat as soon as it comes to the interior part of the page. Otherwise known as the part that you, the site owner, are updating on a daily or weekly basis. The part that you desperately wish you could bring “up to speed” with the rest of your site.
It’s a sad state of affairs, and it’s enough to frustrate any blogger or online business owner.
But the good news is, injecting some visual chutzpah into your site is easier than you think.
All you need is a bit of CSS to give your posts and pages an instant facelift.
And you don’t need to actually “know” CSS to do it.
Instead, I’m going to give you a single chunk of code that you can copy, paste, and tweak to your heart’s content – to get the exact look you want for your very own “feature box”!
Plus, this tip works no matter WHAT kind of blog or site you have (read: even if you haven’t moved to WordPress yet).
So, let’s get to it!
To begin, choose a page or post on your site that has a section of text you particularly want to draw attention to. Maybe it’s a really important paragraph, or a recipe you’re posting, or a headline that you don’t want people to miss when they scan down the page. That’s the chunk of text that we’re going to turn into a cool-looking “feature box”.
Now go into edit mode for the page or post, so that you can make changes to it. Check that you’re editing your page or post in HTML mode (not Visual mode). On WordPress sites, the “HTML” tab is located at the top right of the area you type your content in. You click it to switch to HTML mode.
When you switch to HTML mode, you’ll probably see a bunch of weird-looking code on your screen. It may be stuff you’ve never seen before – but don’t freak out. You’re exactly where you’re supposed to be.
Now look through the code to find the section of text that you want to turn into a feature box. You’ll probably find that the text in question is surrounded with some HTML tags, like this:
<p>This is your text you want to pretty up</p>
<h3>This is your text you want to pretty up</h3>
What you’re going to do here is add some CSS code to the opening HTML tag for the chunk of text in question.
The opening HTML tag is the one that comes first. So, in the examples above, it’s the initial
<p> tag (in the first example), or the initial
<h3> tag (in the second example.
The CSS code we’re going to add to this opening HTML tag will tell people’s computers to display the text in a new, fun way – thereby creating your feature box.
(If you don’t see any HTML tags surrounding your chunk of text, don’t worry – you can add them yourself in a jiffy. I’ll tell you how in a minute).
But before I tell you about the five cool design elements you can apply to your chunk of text to change it into a sexy feature box, let’s take a quick look at how your code will look by the time you’re done with it. When you’re finished, you’ll have something that looks more or less like this:
<p style="width:400px; border:3px dashed #000000; background-color:#31bfc7; color:#ffffff; font-size:20px; font-style:italic; text-align:center; padding:10px;">This is your text you want to pretty up</p>
…which will result in a feature box on your post or page that looks like this:
Now for the really cool part: If you scan through the code above, you’ll likely notice that a lot of the words make sense to you, even if you’ve never touched a bit of HTML or CSS in your life. See? This is easier than you thought it’d be!
But what if you don’t like my blue box with the black dashed border?
No offense taken! Your feature box doesn’t have to look anything like mine does (and in fact, it should really mesh with the overall look and feel of your blog or site, so that it doesn’t clash horribly).
Let’s walk through the process of deciding how you want to dress up your chunk of text – and then I’ll show you exactly how to do it, by tweaking the chunk of code we’ve already looked at.
Step 1: Choose your design elements for your feature box
Grab a pen and paper as you read through the 8 design elements below, and write down the characteristics you want YOUR feature box to have.
Feature box width
You may want your block of text to span the whole width of the page, but you may also want it to be not quite so wide. So, defining a width for your feature box is a good place to start. You’ll be defining your feature box width in pixels (“px” for short), and you can set it to whatever you want. A good width for a block of text would be something around 300 pixels or so, I’d say.
Border style, width, and color
A lot of the look of your block of text will be determined by the style of border that you choose (if you want one, that is). You can set the border style to dashed, double, solid, or dotted. The width you set for your border will also be defined in pixels, or “px”. A border that measures 1px wide will be super thin, whereas a border that measures 20px wide will be really thick.
You can also set the color of your border. A bright red border would be really attention-grabbing, for example. Or, you may prefer to pull in a color from some other part of your blog or site design, for a nice, cohesive look.
You can mix these border elements together in whatever way you want. So, you could have a border that’s dotted, 1px wide, and bright blue – or you could have a border that’s double, 30px wide, and light grey. It’s totally up to you.
This one’s super easy: just pick a background color for the box, and you’re good to go. This is the color that will “fill in” the box, and that your text will sit on top of. You’ll need to define the color by its hex code, which you can grab from this cheesy but useful site. Or you could check out this recent Backpacker post to find out how to extract the secret hex code for your favorite color.
Depending on the background color you chose for your feature box, you may want to change the color of the font for the text that sits on top of it. There should a good amount of contrast between the background color and the font color, or else the font color won’t be readable. For example, a black background with a white font over top of it works, whereas a black background with a dark brown font over top of it will be illegible. And by the same token, you’ll want to avoid pairing two super loud colors. A neon green background with neon pink text over top of it will be pretty puke-worthy.
Want to make the text in your feature box bigger than the rest of your text on your post or page? No problem! All you have to do is choose the pixel height you want the letters to be. To give you an idea of font sizes, a 10px font is pretty small, whereas a 50px font would be huge.
Feel like throwing some bold type or some italics into your feature box? Can do! You can set this bit in the code to “bold” or “italic” to get that goodness going.
The text in your feature box will automatically align to the left side of the box, but maybe you want it centered or right-aligned. Your options for this particular chunk of the code are going to be “left”, “right”, and “center”.
Without any padding added to your feature box, you’re going to end up with the text butting up against the edges of your border. It’s not a very slick look, so you’ll probably want to add some padding to give the text some breathing room. Padding is also measured in pixels (or “px”), so all you have to do is specify the number of pixels that you want there to be between the edge of the text and the border that surrounds it. The more pixels of padding you specify, the more space there will be around the text, and the more breathing room it will have.
Step 2: Prep your HTML
Ok – so you’ve written down the characteristics you want your feature box to have. Now it’s time to plug them into the code for your page or post.
If the chunk of text that you want to turn into a feature box is surrounded by HTML tags (anything inside pointy brackets, like this:
<>), then you’re good to go. You may skip directly to step 3 below.
If the chunk of text that you want to turn into a feature box is NOT surrounded by HTML tags,then you need to add some. The easiest way to do this is to surround your text with
So if your chunk of text looks like this (not the lack of surrounding HTML tags):
Oat cake cheesecake applicake halvah marshmallow sugar plum chupa chups tart. Lemon drops candy canes jelly jelly beans sugar plum pudding oat cake. Tootsie roll candy dessert jelly-o bonbon jelly beans cake biscuit jujubes. Biscuit toffee jelly wafer powder. Sesame snaps marzipan cake jelly candy canes. Chocolate bar chocolate topping tart. Wypas bonbon tiramisu tiramisu. Pastry toffee candy tart fruitcake lollipop wafer chocolate cake. Gingerbread wypas oat cake soufflé chupa chups lemon drops gingerbread. Tootsie roll faworki liquorice.
…then you’ll want to add div tags around it, like this:
<div>Oat cake cheesecake applicake halvah marshmallow sugar plum chupa chups tart. Lemon drops candy canes jelly jelly beans sugar plum pudding oat cake. Tootsie roll candy dessert jelly-o bonbon jelly beans cake biscuit jujubes. Biscuit toffee jelly wafer powder. Sesame snaps marzipan cake jelly candy canes. Chocolate bar chocolate topping tart. Wypas bonbon tiramisu tiramisu. Pastry toffee candy tart fruitcake lollipop wafer chocolate cake. Gingerbread wypas oat cake soufflé chupa chups lemon drops gingerbread. Tootsie roll faworki liquorice.
*Note that the closing div tag has a slash at the beginning. This is very important.
Step 3: Copy and paste
Now you’re ready to paste in the code that will let you create the desired effect for your feature box.
Go back to your chunk of text, which should now be surrounded by opening and closing HTML tags, and add a space at the end of the opening HTML tag, just before the first closing pointy bracket.
Immediately after the space, paste in the following:
style="width:400px; border:3px dashed #000000; background-color:#31BFC7; color:#FFFFFF; padding:10px;"
Once you’ve done this, you’ll end up with something like this:
<p style="width:400px; border:3px dashed #000000; background-color:#31bfc7; color:#ffffff; font-size: 50px; font-style:bold; text-align:center; padding:10px;">This is the text you want to pretty up</p>
Or if you added your own HTML tags in step 2, like this:
<div style="width:400px; border:3px dashed #000000; background-color:#31bfc7; color:#ffffff; font-size: 50px; font-style:bold; text-align: center; padding:10px;">This is the text you want to pretty up</div>
Step 4: Tweak
Now all you have to do is plug in your desired design characteristics to get the effect you want!
Here are the values to change in your code, using the example from immediately above:
- The “width” value (change the “400″ to whatever you want the width of your feature box to be)
- After “border”, the “px” value (this will control the border width)
- The “dashed” value (you can change this to “solid”, “double”, or “dotted”)
- After that, the six-character hex code (this controls the color of your border)
- After “background-color”, the six-character hex code (this will be the background color of your feature box)
- After “color”, the six-character hex code (this will be the color of your font inside the box)
- After “font-size”, the pixel value for how big you want your font to be
- After “font-style”, the value of “italic” or “bold” (If you want to specify this at all)
- After “text-align”, the value of “left”, “right”, or “center”
- After “padding”, the “px” value (this will control the amount of padding between the text and the edge of the box or border)
To tweak these values in the code, you will literally just delete the numbers, hex codes, and other values in the sample code I gave you, and replace them with your own stuff.
So, if you want to change the border color to white, you’ll change the “#000000″ to “#FFFFFF”. Or if you want to give the feature box more padding, you’ll change the “10px” padding value to “30px”.
You can leave out any of these CSS elements, too. So if you want a solid-colored box without a border, just delete the CSS code that talks about the border. Or if you don’t want to set a background color for your feature box, you can just leave out that part in the CSS, and the box will automatically have the same background color as the page it’s on.
The important thing is that each individual element (width, border, background color, color, and padding) is followed by a semicolon, and that the whole collection of CSS “style rules” is surrounded by a pair of quotation marks inside the opening HTML tag. This will keep the structure of your code up to snuff, so that people’s computers know how to interpret it.
And finally, while we’re at it, here are some other examples of different-looking feature boxes to get your creative juices flowing:
Step 5: Preview and publish your page or post!
Once you’ve got your code tweaked with the values of your choosing, you’re ready to check out your handiwork!
I recommend starting by previewing your page or post (before you publish it with your fancy new feature box on it). That way, you can see if you like how it looks, and if you don’t, you can go back and edit the code by changing the border width, or the padding, or whatever.
Once you love how it’s looking, hit “publish” on your post or page, and you’re done!
Final geeky remarks
You can put as many feature boxes as you want on your site. If you want to use the same feature box design and apply it to another chunk of text on your site, no problem: you can do that. Just copy and paste the code. Or, you could try a couple of different styles: one to use for your really important paragraphs, and one to use for your headings. The sky’s the limit with this one.
Want to make feature boxes that look even more awesome? There’s WAY more you can do with this stuff! (Think fancy fonts, background images, gradients, drop shadow effects, and more).
For example, check out this feature box, below – which uses a cute pink chevron background image:
If you like the looks of that, and you’re kind of digging this coding thing (who knew, right?!), my online course, The Girl’s Guide to Web Design, could be JUST what the doctor ordered!
You’ll learn the REAL ins and outs of CSS, so that you can customize every last element of your blog or site with background images, fancy fonts, and TONS more.
I’d love to have you on board as a student. Click here for more info on the course.