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:
and I have added the following CSS for this:
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:
I should make a new div called
and I’ll put the container div inside it.
and his CSS is:
Above this for the rounded corners I’ll add this div:
with the following CSS:
and for the rounded corners in the bottom again I am adding a div
For the sidebar the same technique, but this time I’ll put the divs inside the sidebar box.
and here are the CSS I have used for this:
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.