jump to navigation

Style your WordPress Posts with Rounded Borders August 5, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

Usually I download ready-made themes from the official repository , these themes are SEO optimized and the colors are matched very nicely . Basic knowledge of CSS is required to make some minor modifications and adapt the theme to  personal needs .  The CSS3 standard has many new modules , one of the most exciting is the borders and background module . This  module is the coolest property in CSS3 and it’s really easy to apply on your website . It allows you to round the corners of a page element without the use of images or ugly tables . The word radius ( border-radius) refers to the radius of an imaginary circle with the origin at one of the corners of an element , imagine four of these circles on the corners of an page element .

Unfortunately older browsers doesn’t support the CSS3 standard , so this article is useful for the latest browsers (IE9 , Monzilla4+ , Chrome ) . CSS compatibility and IE browser ? read this article .

This article will present a practical example how to adapt the twentyten theme and display the posted articles with a background-color and rounded borders  . I’ ll skip the process of creating a child theme from twentyten , as it’s the most recommended way of modifying a theme . If you need a refresh on creating child themes , read this article .

Each element on the web-page ( that is styled by CSS )  is referenced by a name , so we have to locate the element from which we will change it’s properties and find out its name . Chrome has a handy web-development tool build in that can be accessed by CTL + Shift + i  . Open the web-page in Chrome and enable the web-development tool .

We have found that the post element area is referenced by the name of   ” .entry-summary ”  .
Open the style.css file of the twentyten theme ( Web_Root/WordPress-Installation/wp-content/themes/twentyten/) , locate the selector name  ” .entry-content”  and append the following code  .

.entry-summary {
clear: both;
padding: 25px 30px 10px 30px ;
background-color: #e1d8b9;
border-radius: 100px/100px; /*-- IE9+, FF 4+*/
-webkit-border-radius: 100px/100px; /* only for older browser Chrome 5*/
-moz-border-raius: 100px/100px; /*--only for older browser FF 4- */

Don’t forget to store the modified css file . That’s it , simple ……
If you only need to apply styles on specific articles , use this plug-in ( WP Post Styling ) . This plugin simply provides a custom field on your WordPress interface where you can add custom styles to be applied only on that page or post. Useful for being able to publish articles with a unique look .

Older IE browsers ( IE7 – IE8 ) :

None of the IEs support border-radius , not even IE8 . When Microsoft released IE8 , it’s almost as if they tried to catch up with browsers that were out when they released IE7 . Don’t get me wrong , they fixed a lot and I wouldn’t trade even something small like display: table-cell for border-radius . Fortunately, IE9 has some CSS3 support , but still we’ll have to use a border-radius hack in all IEs . Although this hack is pretty fussy, I’ve gathered a couple guidelines that  help me when debugging  any problems I may have .

First download the border-radius.htc  file  from google.code  and upload it to your server . Then wherever you need a border radius , apply this CSS :

.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px ;

Any element with this hack needs to have position , so unless it already has a position, attach position: relative .  Don’t even think about combining this with another IE hack, such as a box-shadow filter  .  It also has issues with elements that don’t ‘have layout’. Attach zoom: 1; to get around this.



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s