FOR BETTER DESIGNS » css

My progress on wordrepss theme design.

Ali Chorov — Mon, 08 Feb 2010 13:25:02 +0000

In the past 4–5 months I was working on this blog from time to time, as some of you may know, I prommised that I will build this blog from nothing and I will make a post and tutorials for everything I am doing here. Since now the design have been changed 3 times. At the beginning it was just a white space with only texts and no CSS or any images.

In the next image you can see the 3 themes I have designed and used here from the begining. They were just for learning me and my readers who need this basic info of designing and using themes for wordpress.

So after all this is the final theme. It will remain like this until I get bored with it. In the future you can expect a lot of posts here. Generally articles about design, some tutorials about my work, posts for inspiration, sharing artwork and useful information mostly about design.

It take me some time to understand everything about Wordress, but now I can do a theme and use it here for 2–3 days. I am sure that if you looked at my tutorials you surely learned something. See ya in my next posts.

Feel free to ask me anything, I am here to answer you questions always.

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

Some little css tips you can use in your blog

Ali Chorov — Wed, 21 Oct 2009 10:53:13 +0000

Today I want to share with you some little CSS tips which I am sure you will like if you don’t know them. This are 2 tips which will make your site to look a little bit better in some way. If you have noticed all the images in my blog now have this not so good looking 1-2px border around them. To remove this border I should put a rule in my css file which is:

a img{ border:none; }

Before: After:

This will remove border from all the images in your web site If you need that. For example in my case I want it removed.

Next little tip is about change the text highlight color in your posts. But I’ll show you the tips only for Firefox, Safari and Opera. You should put this code in your css style document:

::-moz-selection{ /* Firefox */
background:#d6e0c8;
color:#000;
}

::selection{ /* Safari and Opera */
background:#d6e0c8
color:#000;
}

And after all I have this:

I hope you have litked this little tips and you’ll use them in your web sites too.

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…