How to put recent posts and comments in round boxes or blocks

The image above displays the screenshot of my blog’s recent posts widget. The column on the left shows the demo of how my blog used to look before the changes. While the column on the right shows the demo of how my blog looks after the changes. Impressed? Me too.

I have just changed the cascading style sheet (css) file of my blog to get the desired results. More precisely, I have added a border property to the widget list class. Lets see how exactly we can do it ..

How to add border to recent post list :

  • Goto Admin Dashboard > Appearance > Editor.
  • Select the Stylesheet file. It must be style.css
  • Then press CTRL+F and Type .widget li
  • You will find something like this :

[code].widget li {
list-style-type: none;
margin: 5px;
padding: 5px;
}

.widget li:last-child {
border: 0px;
}[/code]

  • You have to just add the following code inside the block of .widget li and .widget li:last-child

[code]border: 1px solid #006666;
-moz-border-radius: 5px;
border-radius: 5px;[/code]

  • After adding that code you will get something like this :

[code].widget li {
list-style-type: none;
margin: 5px;
padding: 5px;
border: 1px solid #006666;
-moz-border-radius: 5px;
border-radius: 5px;
}

.widget li:last-child {
border: 1px solid #006666;
-moz-border-radius: 5px;
border-radius: 5px;
}[/code]

  • That’s it you are done. Save the file. And check out the changes on your blog.

These will work only on the lists which are in your ‘widgets’.

Note that this not only works on recent posts but also on other lists which belong to your widget class. For example: Recent comments, Categories, etc.

Leave a Reply