Adding a Padded Color Border to Images

If you are looking to add a colored border to your images, this tutorial will show you how. Keep in mind that there are a few areas within the stylesheet that define images, so you might have to apply this code to more than one area. Look for this code in the style.css file:

#contentleft p img {
border: none;
float: left;
margin: 0px 10px 10px 0px;
}

If you are looking to add 5px of padding to your image, and then wrapping it in a colored border, change your code to look like this:

#contentleft p img {
float: left;
border: none;
margin: 0px 10px 10px 0px;
padding: 5px;
border: 1px solid #000000;
}

The #000000 specifies what hex code you want to use for the color of the border that you want surrounding your image. If you want a thicker border, try using border: 2px instead.

Customizing the News Page

There are a number of developers who want to use WordPress as an aggregated news source - this is the number one reason I created the News Page. The News Page template is pretty easy to understand, and consequently easy to modify.

Each column in the News Page is defined in the stylesheet - here’s the breakdown of each column in the page_news.php file:

• News Section #1 is defined as <div id=”newspageleft”>
• News Section #2 is defined as <div id=”newspagemiddle”>
• News Section #3 is defined as <div id=”newspageright”>

By default, the code written for each of these three columns is the same - the code is calling to publish the excerpt of the latest post in category ID #1. I did it that way because on every WordPress install there will always be a category ID #1, and always an initial post.

However the beauty of the Revolution theme is how customizable it is, and how simple it is to change things around. I’ll break down each section to make it easier to customize. The following code defines the image that’s in each column:

<img src="<?php bloginfo('template_url'); ?>/images/np-1.jpg" alt="<?php bloginfo('name'); ?>" />

The code below is really the heart of the news page. This is where you can define which category you want to pull, and how many posts you want to show:

<?php $recent = new WP_Query("cat=1&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<b><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></b>
<?php the_excerpt(__('Read more'));?><div style="clear:both;"></div>
<?php endwhile; ?><br />

The code that says “cat=1″ is the category that is being pulled, where 1 is the category ID #, and then the “showposts=1″ is where you can define how many posts of that category you want to show.

Lastly, there is a list at the bottom of each column that currently shows the previous post titles of the category you are specifying. The code below acts in the same way as mentioned above, the only exception is that the post content isn’t shown:

<ul>
<?php $recent = new WP_Query("cat=1&showposts=5"); while($recent->have_posts()) : $recent->the_post();?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

How to Remove the Double Border

This mod is relatively easy, but nonetheless might be asked down the line. Open up your style.css file, and find the following piece of code:

#wrap {
background: #FFFFFF;
width: 920px;
margin: 10px auto 10px;
padding: 0px 20px 20px 20px;
border: double #C0C0C0;
}

Simply remove the line that defines the border for the #wrap container. Your new code should look like this:

#wrap {
background: #FFFFFF;
width: 920px;
margin: 10px auto 10px;
padding: 0px 20px 20px 20px;
}

Creating a Featured Page

When you create a static page in WordPress, your blog will look for the page.php file by default. Currently, that will display your content and that will look like the Sample Page. If you want something with a little more pizazz, then you can use the Featured Page template, and it will display content that will look like the Featued Page.

You may be asking yourself how you can create a Featured Page - this can be done easily, but needs a few steps in order for it to work. First, when you create the page, you will need to select the Featured Page template within your dashboard. Here’s a screenshot that will show you where to select that:

All of the coding for the Featured Page can be found in the page_featured.php file of the Revolution theme. In order to know how to customize certain parts of it, you should know what each section is, and where the information that is there comes from. Here’s a breakdown of the main sections of the Featured Page:

Section #1 - This is hardcoded text and can be found and modified within the page_featured.php file.

Section #2 - This is a dynamic WordPress call, and is currently set to display the previous 10 posts, sorted by descending order of date written.

Section #3 - This is the main content area of the page - whatever you type into the text editor while creating a page will show up in this location.

Section #4 - This is hardcoded text and can be found and modified within the sidebar_page.php file.

Using A Dynamic Header

The Revolution theme is currently using an image for the logo in the upper left hand section of the header. Some bloggers wish to use a dynamic call for the blog title and the blog description. With the help of this tutorial, changing the code from a static image to a dynamic call is really easy.

The first thing you need to do is add padding to the top of the #headerleft section inside the style.css file. Look for this piece of code towards the top of the file:

#headerleft {
width: 460px;
float: left;
font-size: 14px;
margin: 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

As you can see, that section currently has a top padding of 0px, which allows the logo.gif to stay at the top of the container. What you will want to do is change the top padding to 30px, so your code should look like this:

#headerleft {
width: 460px;
float: left;
font-size: 14px;
margin: 0px;
padding: 30px 0px 0px 0px;
overflow: hidden;
}

The other thing that you will need to change is the code for the #headerleft container which can be found within the header.php file. Look for this piece of code:

<div id="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>

You will want to replace that code with this:

<div id="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a><br />
<?php bloginfo('description'); ?>
</div>

At this point, all you need to do is simply upload your style.css and header.php files onto your server and replace the ones that are currently there. Refresh your screen, and voila, you now have a dynamic header!

« Previous Page