I’ve been asked how to edit the CSS file for the Featured Posts plugin in order to change the look and feel. Since I believe WordPress plugins should be simple enough for non-techies to understand, I’ll go ahead and outline exactly what each selector does and how you can change what the plugin looks like.
First, let’s look at what the Featured Posts plugin outputs as HTML when you enable it:
<div class="featuredposts"><img src="http://example.org/img.jpg" class="featuredimg" alt="" width="233" height="175" /><h2><a href="http://example.org/?p=1" rel="bookmark" title="Hello world!">Hello world!</a></h2>This is where the excerpt or custom description appears.<br /><br /><a href="http://example.org/?p=1" rel="bookmark" title="Hello world!">Read the story »</a></div>
This probably looks confusing to someone who doesn’t have much experience with HTML. But don’t worry! I’ll go through what is happening.
<div class="featuredposts"> – This is just saying for the browser to add a layer with the class name “featuredposts”. Everything coming after this and before the final </div> is located inside the layer. If you wish to edit any of the layers properties, you need to change the div.featuredposts selector inside the featured-posts.css file.
What you can change:
What’s entered as default:
margin– this is the whitespace between the layer and the ones next to it.padding– this is the whitespace inside the layer. How much room should be between the content and the border of the layer?width– how wide should the layer be?height– how tall should the layer be?font-size– what size of text should be used for all content inside the layer?background– want a different color or want to add an image as the background?color– this is the texts color.
Common properties you may add:
line-height– the distance between each line.border– what do you want the border to look like?position– make the position absolute and edit a few other properties to force the layer to display anywhere on the page, regardless of where it is on the HTML file.
Actually, you can change just about anything. If you have an idea, there is probably a way to do it. There are many CSS properties you can add, these are just the most common.
<img src="http://example.org/img.jpg" class="featuredimg" alt="" width="233" height="175" /> – this is what displays the image (if you wish to have one displayed). As you can see, it has a class titled “featuredimg” which is used as a CSS selector. alt="" is the default text someone sees when the image does not display in their browser (in the future this will probably be changed to display the title of the post instead of being blank). width="233" is the width of the image. This is used for two reasons: 1) some versions of HTML require it to be used. 2) it helps the plugin resize the image if you set a width within the settings page which isn’t equal to the actual image size or the thumbnail size you specified in your WordPress settings. height="175" is the same as width, but for the height (obviously).
You can change how the image is displayed by editing img.featuredimg.
What you can change:
What’s entered as default:
float– this is the direction of where the image will be placed. left means the image will display on the left side of the layer.margin– this is the distance from the image to the text and border.
Common properties you may add:
padding– you may feel more comfortable using padding instead of margin.border– some images look better with a border.background– by using background you can add a drop shadow easily.
<h2><a href="http://example.org/?p=1" rel="bookmark" title="Hello world!">Hello world!</a></h2> – this actually contains two different CSS selectors inside the CSS file.
The header (title of the post) is controlled by div.featuredposts h2
What you can change:
What’s entered as default:
margin-top– this is the distance between the border of the layer and the title.font-size– the size the font will be displayed in.
Common properties you may add:
margin– you may want to add a margin for the sides or bottom. In that case, you may wish to delete the margin-top property.padding– you may feel more comfortable using the padding property instead of margin. Or, you may want both depending on your purpose.font-family– you may want the title to display as a different font than the other h2s on your page.font-weight– you can make the font bold or unbold it.text-decoration– you can italicize or underline the text.border– place a border on one sides, two sides, three sides, or all four.background– some people like placing icons by the title or changing the background color.
How the title link is displayed is controlled by div.featuredposts h2>a
What you can change:
What’s entered as default:
color– change the color the title is displayed in.
Common properties you may add:
text-decoration– italicize or underline the text.border– border-bottom is becoming more popular as a replacement for underline because it is more customizable.padding– placing a padding along with a border-bottom allows for more customization.background– you can even add a background as an alternative to the underline or border.
That’s it! That’s all the selectors added within the CSS file. As you can see, you can do pretty much anything you wish with a little knowledge of CSS.
Wait! There is a few things I want to add.
Even though this is all the default selectors, you can add even more. A common selector added is div.featuredposts h2>a:hover. This will change how the title link is displayed when your mouse pointer ‘hovers’ over it. The most common change is taking away or adding an underline, but with enough imagination you can pull something incredible off.
This article is already over a thousand words, so I’m not going to go into details on what values each property can have. But, I will point you to a nice tutorial site to help you out: w3schools.
Written: Jun 15, 2009
0 Responses to "How to Edit the Featured Posts CSS File"
No comments yet.
Sorry, the comment form is closed at this time.
