Wise Startup Blog

I’ve only been using CSS for less than a year, but I think my knowledge has grown tremendously, especially over the past couple of months as I have gone through pretty much every WordPress template known to man, and now have a custom Premium WordPress template, available to download for free.

With my latest theme, I’ve applied all of my favorite CSS tips and tricks, and wanted to share them with you, as they’ve been a great help to my career as a part-time blogger.

3 CSS Tips That Will Change Your Life

1. Borders

Like all good designers, I like things to be organized. There’s nothing worse than not knowing where your sidebar begins, and your content ends. Plus, the header needs a separator as well, which is provided by the nice block at the top of the page.

Here’s how we do it

We put a border on the top of the #page element, using this code:

border-top: 4px solid #F1F1F1;

Then, on the sidebar elements, we put another top border:

border-top: 1px solid #DBDBDB;

2. Menu Hover

There’s nothing that adds a premium feel to your site more than mouse-over elements, and after a couple of hours of work I was able to duplicate what so many other sites have.

Use this code:

#page-bar a, #page-bar a:visited {
padding: 12px 10px;
margin: 0px;
font-weight:bold;
color:#FFF;
display:block;

}

#page-bar a:hover, #page-bar a:active, #page-bar a:focus {
padding: 7px 10px;
text-decoration: none;
border-top: 5px solid #DE6A23;
color: #DE6A23;
}

3. Link Block Hover

Improving the user experience and making your site look polished, are the link blocks that highlight when you hover over them. To give the elements this effect, use this code:

#sidebar-recent li a {
display: block;
padding: 4px;
}

#sidebar-recent li a:hover {
background: #f0f0f0;
padding: 4px;
}