FOR BETTER DESIGNS » html

Adding nice looking blockquotes for your posts using css

Ali Chorov — Wed, 11 Nov 2009 13:00:38 +0000

In this post I want to give you this little tip I decided to use here in my blog. This is a blockquotes which are stylised with CSS and they can make your blog to look much nice.

For example you have some code HTML, CSS or whatever in your post and you want to make some border around it and maybe different background color.

Here is the code:

Your text here

You see you can change the size of the border, the padding and background color and you can add your text. It will look exactly like mine. You can change this colors off course.

Hope this little tip will be in some good use for you.

If any question and comments I am here.

Some minor design fixes for my new wordpress theme

Ali Chorov — Sun, 08 Nov 2009 17:44:02 +0000

In this tutorial I’ll make some minor design fixes to my page. First I’ll add some border to my posts then some icons to my sidebar. Watch the video to see how I have plan my little design fixes and drawing a small arrow pixel icon.

So after i have made this little plans I show in the video let me tell you what I have changed in my design.

First I added 1 px border to the posts in my CSS:

.post{padding: 5px 5px 5px 5px;min-height:100px;

width:600px;

float:left;

background:#eeeeee;

margin-top:7px;

border:1px dashed #ced8d9; — 1px border all around my post is here

border-bottom:3px solid #83b639;

}

Next I added a 1px dotted border bottom for all my lists in the sidebar and the arrow image from CSS again:

.sidebar ul ul li{padding: 0; line-height: 24px;border-bottom: 1px dotted #888888; — dotted border

text-decoration:none;

background-image:url(images/sidebar/arrow.jpg); — and the arrow image

background-repeat:no-repeat; — no repeat is important here

padding-left:10px;

}

After this is done, I added the folder icon also in my CSS:

.sidebar ul li h2{ height:25px;font-family: Georgia, Sans-serif;

font-size: 15px;

padding-left:25px;

text-decoration:none;

background-image:url(images/sidebar/folder.jpg); — the folder icon image is here

background-repeat:no-repeat;

}

Well that’s all, I hope you’ve liked this tutorial and you learned some useful thing here.

I’ll wait for your comments If any. Stay with us folks next time I am planing to design 404 web page.

Text here

Crop theme design in photoshop and add the images to your wordpress blog or web site.

Ali Chorov — Fri, 16 Oct 2009 20:11:36 +0000

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:

#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:

here I have all the posts and sidebar…

I should make a new div called

and I’ll put the container div inside it.

here I have all the posts and sidebar..

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:

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

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.

— this is my sidebar

— this is my sidebar top image

— this is my sidebar bottom image

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.

here I have all the posts and sidebar…