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

No related posts found

In this video tutorial I will show you how I’ll make a rounded corners template for my blog. In the video I have a screen shot from this web site and I’ll re-design it in photoshop, giving it rounded corners.

My personal opinion is that the video is not for completely newbie users of Photoshop maybe because I am doing the things too fast. But yes they can watch and they can learn something. I am just sorry I’ll not explain every single thing I am doing. But the main idea here is to give you some inspiration and ideas for designing. Not so much about how to use Photoshop in this video exactly.

After all I’ll give some little tips in the video of what I am doing but not about everything. Before watching the video I hope you’ll read this rows here also, so you’ll know what I am doing and not wondering about everything what happens in the screen below.

Here in a few words: I’ll move every part from the screen shot I have in a separate layer. After that I’ll begin to design, Every single part of the design I make, I will do it on a new layer below the screen layer of that section. I hope you will get the idea.

I am using mostly rounded rectangle tool and I’ll draw mostly with it. I’ll also give some layer styles to my shapes after that. So that’s basically everything I’ll do. Enjoy this tutorial

Related Posts

No related posts found