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.