7 Random CSS Bits to Help You Improve Your Blog’s Layout

October 29, 2013 by Daniel Sharkov|

As we all know design is among the most important elements to every blog. The simple truth is that
not many people will start reading your posts (as informative as they might be) if your blog’s layout takes them back to the 90s (even though they might be nostalgic about that time).

Since the day I started blogging, I began looking for ways to customize my blog and make it look unique. And namely thanks to that desire to stand apart in terms of design, over the years I’ve been able to learn a lot about HTML and CSS.

Yes, some of you might find today’s post a little more technical
and indeed it is different from what I normally share. Although some of the techniques you will see are a little more advanced, with a bit of basic CSS knowledge you will be able to get the hang of them.

But why do you need them?

Of course the tips and tricks you will see
won’t help you dramatically improve the looks of your blog. However as we all know often times getting the small details right is all that matters.

And without further ado, below I have shared with you a list of seven CSS techniques that will hopefully help you further optimize your blog and make it more appealing and engaging to your visitors.

1. Changing Text Highlight Color when Selected

Did you know that you can actually change the color of selected text?

One of the key elements to design is consistency in terms of colors. You should always strive to achieve a harmony between the main colors of your theme. And you might say that it’s taking things to extremes, but why not also change the color of selected text to fit your blog’s layout?

But then again who wants that boring blue anyway!

::-moz-selection{ /* Firefox browser compatibility */
background-color:#afd171;
color:#fff /* Color of the letters when selected */}

::selection{
background-color:#afd171;
color:#fff}

2. Using the :before and :after Pseudo Elements

A few months ago I didn’t know about those two elements and their purpose. Now after having discovered them, I owe a lot of my blog’s design features to them.

Namely with the help of :before and :after pseudo elements I’ve been able to include elements like the small envelope on my opt-in forms, the deep shadows that you can see under widgets, blog posts and comments, the arrow that you can see under the “Hire Me” tab and a few more.

What those two elements let you to do is straightforward – they allow you to add content either before or after a specific element. That element can be anything – a character, a sentence, a whole text or an image.

As an example let’s take a look at the envelope for my opt-in:

#text-4 .widget-wrap:after {
content: url("/wp-content/uploads/2013/01/XS-Envelope.png");
float: right;
margin: -307px 277px 0;
}

We reference the image using the content property. Then (at least the way I do it) it is all about testing the proper positioning by leveraging the float and margin properties. Sometimes in order to place the element properly, instead of float, you will need to use the position property with the value absolute like for the arrow below the Hire Me tab on this blog:

#menu-item-5761:after {
content: url("/wp-content/uploads/2013/01/Arrow1.png");
margin: 0 -57px;
position: absolute;
}

NOTE:
You either use position:absolute or float:left or right. Not the two at the same time.

3. Selecting and Customizing Specific Elements WITHOUT a Class

Have you ever wanted to add different styling, exactly to the fourth element of a list… or maybe to every odd or every third element?

If there’s a class for each of those elements that would all be a piece of cake, but think about a situation where there isn’t one.

See how my Popular Articles sidebar widget has
a different color for each displayed article?

That’s one place where you can apply the trick I will be talking about in a second. It’s the same approach that I’ve used in the Stay Tuned widget – the background of each tab corresponds to the color of the social network I’ve placed.

So how do you get that effect?

You use the nth-child pseudo element.

Here’s a very basic example of the element’s usage:

ul li:nth-child(2n+2) {
background:#000;
}

By applying the above code, you are forcing every second, fourth, sixth, eighth, etc. list element in an unordered list to have its background changed to black. Rather than a formula you can also insert
even or
odd (thus obviously selecting odd and even elements in the list) between the brackets, as well as
a plain number .

.wpp-list li:nth-child(1) {
background: none repeat scroll 0 0 #FFC8C8;
border: 1px solid #F2B3B3;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

By placing the number one in the brackets, we’re referencing to the first li element that is located under the wpp-list class. What I’ve done is I changed the background color to a white-reddish one, added a border and made the top left and right edges round with the border-radius property.

.wpp-list li:nth-child(2) {
background: none repeat scroll 0 0 #FFE3AF;
border: 1px solid #EED29E;
}

I don’t need the border-radius anymore and I’ve only changed the background to a light-yellowish this time and added a border that is a little darker than the background color.

That’s pretty much it. The same steps are repeated for the rest of the elements (by changing the number in the brackets) in order to achieve the rainbow-like looks.

4. Adding a Custom Image for Bullet Points

The big dot that goes in front of bullet points isn’t the most original thing ever, is it?

Well
here is how I changed mine to a custom-made arrow that also suits my blog’s color-theme:

ul li {
background: url("Your Arrow’s URL") no-repeat scroll 0 4px transparent;
font-size: 15px;
list-style-type: none;
margin: 5px 0 0 20px;
padding: 0 0 0 28px;
}

Before you add the image, you first need to remove the standard dot. That is done by setting the list-style-type property to none . The margin and padding values in the example can serve
as a starting point. You can use the values after no-repeat scroll to better position the arrow.

5. Creating In-Post Sticky Notes

Ever wondered how I create those orange-yellow sticky notes in my posts?

Well that’s actually a very simple process.
You first need to come up with a class name and add that class name along with some layout properties in your theme’s stylesheet. Here is the CSS that I use for my sticky notes:

.post-note {
background: none repeat scroll 0 0 #FFEFA3;
border: 1px solid #F4CC80;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px
box-shadow: 0 0 21px #F9D88C inset;
padding: 11px;
}

Then whenever you want to use the sticky note to highlight some important text,
you simply wrap that text around either a p or a div element and add the class name that you’ve chosen.

6. Including Different Properites for Internet Explorer

You don’t have to be into designing for a long time to know that Internet Explorer is almost always the hardest browser to optimize your design for.

There are different elements and values that Internet Explorer renders differently than other browsers. And although sometimes you can make a compromise to make it fit on all browsers, there are those cases when you need specific properties for Internet Explorer.

The following lines of code will instruct your blog to render different properties on different IE versions:

.sidebar {
width: 200px; /* standard */
width: 205px9; /* IE 8 and below */
*width: 204px; /* IE 7 and below */
_width: 198px; /* IE 6 */ }

7. Media Queries for Better Mobile Experience

Media queries are probably the simplest way to make a responsive theme that works well on all kinds of mobile devices.

The idea behind media queries is simple.

You basically wrap around CSS classes and properties around a media query, which can be set based on a maximum or minimum width of the screen, based on the aspect ratio of the screen and also based on the orientation of the screen – portrait or landscape.

My current theme uses only the maximum width setting which looks like this:

@media only screen and (max-width: 800px) {
.class1{}
.class2{}
}

The following code will change the class names class1 and class2 to whatever properties you include in the curly brackets and that will work for all resolutions that have a smaller width than 800 pixels. You can add another query where the max-width is 640 pixels. That way the max-width: 800px will only work down to 640 pixels. Then the max-width: 640px will take effect.

@media only screen and (max-width: 800px) {
#title-area{padding:10px 0 0}
#header .widget-area{width:35%!important}
#content{float:left}
#menu-categories{height:48px}
}

@media only screen and (max-width: 640px) {
#title-area{padding:2px 0 0}
#header .widget-area{width:25%!important}
#content{float:none}
#menu-categories{height:22px}
}

The properties you have set in the first media query with a max-width of 800 pixels will only work for resolutions width a width of 800 and lower, but not lower than 640 pixels, because you have specified a second media query to deal with values lower than 640 pixels.

In Conclusion

Those are what I believe the seven most useful CSS techniques. I really hope you found use for some (or hopefully all) of them!

Now I’d like to hear your thoughts!

Are you the DIY kind of guy or do you prefer leaving customizations to the experts? Have you tried some of the techniques in the post yourself? What else can you add to the list?

Please take a minute to share!

Share on Google Plus

About Unknown