FOR BETTER DESIGNS

In this tutorial I'll design a simple footer for my website. I must say this is one simple and easy for design footer. But everything starts somewhere, somehow and in future I'll show you more impressive and cool designs in the new templates I am planing.

But look at this video which I thing will be especially useful for the newbie WordPress theme users.

After you've watched this video you'll probably want to know how' Ive put this design in my web site. Well it's very easy actually.

You know I have this PHP in my WordPress to work:

<?php get_footer(); ?>

The next I have the file called footer.php, in this file is written this:

<div id="footer"><p>
Copyright &#169; 2009 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> powered by <a href="http://wordpress.com/">WordPress </a></p>

</div>

this footer have a class in my CSS style document which is called footer and here is the CSS I use for this:

This first is for my footer box with this image:

#footer{
background-image:url(images/footer/footer.jpg);
background-repeat:none;
clear: both;
float: left;
height:50px;
width: 950px;
padding-top:17px;
text-align:center;
}

and the next rows of CSS are for the text and his background and borders:

#footer p{
background: #eff5e7;
width: 400px;
height:10px;
padding-bottom: 10px;
border: 1px solid #bababa;
line-height:10px;
margin-left:auto;
margin-right:auto;
font-size:11px;
}

After this I have the design I did make in my video and in the next image:

I hope this tutorial will be in some use for you. If you have any suggesstions, questions or any replies feel free to comment.

Related Posts

1. Crop theme design in photoshop and add the images to your wordpress blog or web site.
2. Design theme for wordpress web site tutorial.
3. For better design: Template 1: Design a simple search box and search button tutorial.
4. Video tutorial: Design 404 Error page
5. Some minor design fixes for my new wordpress theme