I really like this video, look what the positive and good things do to water. It’s just amazing and beautiful and what the bad things do with it. It’s really awesome, I have watched at this movie somewehere a year ago and it really changed the way I see some things.

I believe it’s really important to say good things to peoples and encourage them to do good. This leads to happiness for people surely, and this how the water reacts to bad things is also a prove for that. Hope you like this:

No related posts.

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.

In this tutorial I’ll crop the template and add the images to this web site… After you watch the video you can read, the explanation below it.

As you see in the video I didn’t give any explanations of what I do, but there is not really so much to explain in it. The video is only for those of you who want to see how to crop the images for your web site like I do. And I hope this will help you a little bit, I don’t use slice as you see, when I have the template I just crop the images and then upload to the server.

The next thing I do is to add some divs to the HTML like this:

I am showing you this image also because I am planing to change the theme of this blog in future. I am planing to design, more templates and to make new design tutorials and again I will show you how to convert them from PSD to HTML like I did with this one. I hope this will be in some use for you and you will like it. But this in future, let’s continue with this tutorial.

First the rounded corners for the navigation, I have added this div above the menu pages I have:

<div id=“navigationimage_top”></div>

and I have added the following CSS for this:

#navigationimage_top {
background-image:url(images/roundedcorners/navigation_topimage.jpg);
background-repeat:no-repeat;
height:7px;
width: 900px;
float:left;
margin-left:25px;
}

Next for the container, I want it with rounded corners too, so here’s what I have added:

First I have this div in my HTML:

<div id=“container”> here I have all the posts and sidebar…</div>

I should make a new div called

<div id=“bigcontainer”>

and I’ll put the container div inside it.

<div id=“container”> here I have all the posts and sidebar.. </div>

and his CSS is:

#bigcontainer {
float: left;
min-height:400px;
width: 940px;
padding-left:10px;
background-image:url(images/roundedcorners/content_middleimage.jpg);
background-repeat:repeat-y;
}

Above this for the rounded corners I’ll add this div:

<div id=“bigcontainer_top_image”></div>

with the following CSS:

#bigcontainer_top_image { float: left;
height:12px;
width: 950px;
background-image:url(images/roundedcorners/content_topimage.jpg);
background-repeat:none;
}

and for the rounded corners in the bottom again I am adding a div

<div id=“bigcontainer_bottom_image”></div>

with CSS:

#bigcontainer_bottom_image {
float: left;
height:13px;
width: 950px;
background-image:url(images/roundedcorners/content_bottomimage.jpg);
background-repeat:none;
}

For the sidebar the same technique, but this time I’ll put the divs inside the sidebar box.

<div id=“sidebar_box”> — this is my sidebar
<div id=“sidebar_box_top_image”></div> — this is my sidebar top image
<?php get_sidebar(); ?>
<div id=“sidebar_box_bottom_image”></div> — this is my sidebar bottom image
</div>

and here are the CSS I have used for this:

#sidebar_box_top_image {
background-image:url(images/roundedcorners/sidebar_top_image.jpg);
background-repeat:none;
height:34px;
width: 280px;
float:right;
}

#sidebar_box{
background-image:url(images/roundedcorners/sidebar_middle_image.jpg);
background-repeat:repeat-y;
min-height:200px;
width: 270px;
float:right;
padding-left: 10px;
}

#sidebar_box_bottom_image {
background-image:url(images/roundedcorners/sidebar_bottom_image.jpg);
background-repeat:none;
height:15px;
width: 280px;
float:right;
}

I have made a decision not to use the rounded corners for my posts, but the technique is the same. I hope you’ll learn something from this post and you can use this technique too. Off course there will be differences  from template to template but the important thing is to understand the idea.

This is all I have done for the template.

If you need help or if you have some suggestions, questions everything it will be nice to hear your opinions. I’ll wait for your replies.

Related posts:

1. Design theme for wordpress web site tutorial.
2. Some minor design fixes for my new wordpress theme
3. Seperate the posts in your wordpress theme

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:

1. Crop theme design in photoshop and add the images to your wordpress blog or web site.
2. For better designs second theme.
3. Design theme for wordpress web site tutorial.

Begining.

My idea to change the design of this WordPress blog begins now. In this 1st tutorial I’ll design a search box. First I’ll begin with the design in Photoshop. Look at the video below to see my design. Hope it will be in use for you.

Part1 Design the simple search box and search button:

Related posts:

1. Design theme for wordpress web site tutorial.
2. Design simple footer design for your web site in photoshop.
3. Crop theme design in photoshop and add the images to your wordpress blog or web site.