FOR BETTER DESIGNS » blogs

Photo of the day: Taking a Rest and the story behind it.

Ali Chorov — Mon, 26 Apr 2010 11:46:06 +0000

I was away for some time because I was in need to take a rest. So I did take a holiday and go to the mountain with a friend to relax and take some photographs. It was a nice little trip and a surprise for me was that there was still almost like a winter time, although the spring did came long time ago here. It was a bit cloudy, cold with wind and I was staying in the car most of the time until I’ve looked at a herd of horses coming from the top of the hill, they were beautiful and I was having no other choice except to take my camera and to make some photographs.

After the horses came more close to me they started to watch me curiously, but in a while they moved on to their daily routines.

While the beautiful horse with his cool funky hair was still looking at me,

The mare staying quietly started to feed herself,

Suddenly the male horse feel like bored from me (because I did take a million of shots of him ) and came close to the mare,they were in this position for some time, close to each other, looking like almost in love,

but in a while they started to fight, and another horse came too.

after that they scattered around running, it was quiet dangerous to be so close while they were fighting, so I was unable to take any photos of their fight, Sorry

So after the fight the male was looking tired. He retired and isolate himself to take his rest Alone.

I was more than lucky to take this beautiful photograph of him and the background fits perfectly.

I am happy with the photo and hope you like it too.

Have a nice day.

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.

Design theme for wordpress web site tutorial.

Ali Chorov — Mon, 01 Feb 2010 09:01:03 +0000

I am continuing with my works on this wordpress blog again. I have made a little pause, having some other stuff to do and now I am back with new ideas.

It take some time for this tutorial to be done, the reason is I make the whole design in 1 tutorial this time. As I said I have promised I’ll made a change with my tutorials and that’s it. You should not wait for tutorials to come 1 by 1 but I decided to make it in on big tutorial.

So here it is: 2 videos, 5 minutes each will give you a brief explanation of how this theme was designed. It’s called Fresh green. Later on a new post I will post this theme for free download, but until then you can watch this tutorial, and why not try to make theme like this for wordpress too.

The best way for learning is practice, so why not try. Hope you find this tutorial useful…

First of all we should made the design for our theme in Photoshop. For this I have made this big tutorial in 2 parts, where you can see how I have designed this theme:

Part 1

Part 2

After your design is ready, the hard work comes…

Yes that was the fun part, next you should crop the theme, I have already make a tutorial for this and you can find it here: Crop Theme tutorial

In short. First you should crop the header background image. The search box image and search button, the post and sidebar background images. Also the footer and so on…

All this you can find in my earlier tutorial there.

After you crop the theme you should begin to work on the CSS and HTML. You can find all my tutorials which can help you about this here: Design WordPress Theme Tutorials

In short, you can begin with the header. Let me show you what’s new I have add in this theme:

For the header:

My old header was 1 div with fixed width and height where my logo and search box placed. In the new header I was having the need to add a background image. So I make a new div called Header wrapper where I placed the old Header div.

The Header wrapper CSS is like this:

#headerwrapper{
background: #9daa74;
width: 100%;
height:134px;
}

The header CSS is this:

#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
width: 1200px;
height:134px;
margin-left:auto;
margin-right:auto;
}

The purpose of this is to make our header background in the center and the Header wrapper width to be infinite. In this way my header background will be always in the center and the wrapper green color will be at 100% of your browser window always no matter if you resize it or zoom in zoom out the page.

The search box

The searchbox is made with the same technique as in my Design a simple search box and search button tutorial. The only difference is the image I am using are other.

The navigation.

It’s almost the same as the old one except I use another image which duplicate itself and the width is at 100% also, so only the CSS is a little bit different:

#menupages{
width: 100%;
padding-top:3px;
height:31px;
background-image:url(images/navigation_img.jpg);
background-repeat:repeat-x;
border-bottom:3px solid #cebb95;
font-size:11px;
font-weight: bold;
margin-left:auto;
margin-right:auto;
}

#menupages li{
display: inline;
margin-right:1px;
color:#000;
height:30px;
width: 75px;
}

#menupages li a{
color:#000000;
display: inline;
float:left;
height:25px;
width: 75px;
line-height:0px;
padding:5px 5px;
text-transform:uppercase;
}

#menupages li a:hover, {
display:block;
background-color:#eeeeee;
color:#808b60;
}

#menupages li.current-cat a {
background:#79939a;
}

The posts area is much different from my first theme.

Every 1 of my posts have a rounded corners at the top and at the bottom. For that purpose I have made a new divs which i have placed in all of my pages like this:

All the divs like content, tags and php which we need for our post to work is here

and at the end of this code is this:

And Here is the CSS for this:

.posttopimage{
height:13px;
width:801px;
float:left;
background-image:url(images/post/post_img_top.jpg);
background-repeat:no-repeat;
}

.postdownimage{
height:13px;
width:801px;
float:left;
background-image:url(images/post/post_img_bottom.jpg);
background-repeat:no-repeat;
margin-bottom:7px;
}

The side bar is made with the same technique.

The last thing I want to mention in this tutorial is the footer. I wanted to make a 3 column footer for this theme, which I have made using tutorial. The tutorial for this you can find here: Tutorial: Add 3 Centered Columns to WordPress Footer and I just changed the CSS to fit my needs.

Well that’s all about this theme. In my next post I will give you this nice theme for free download. I will modify it a little bit. I hope you like it and feel free to share this post, to comment and ask questions, give suggestions, and tell me your critique.

You can download the the free PSD for this theme here: Fresh Green Theme PSD (43)

For better designs second theme.

Ali Chorov — Thu, 24 Dec 2009 12:57:10 +0000

Second WordPress theme from me.

The last few days I have worked on the new theme of this web site. I have choose this light soft colors green and very lightly orange almost yellow which I think are looking very good. The colors are good for the eyes and the rounded corners of the theme give it a very soft and beautiful look.

I will make a video tutorial in next few days about how I’ve done it and I will post it here for you. I’ll make a little bit of change with my tutorials. I’ll make them a little bit different from now, since I have explained the basics in my earlier tutorials, now I can skip some tips you already know.

In my next video tutorial I’ll show you: Design of the theme in Photoshop.

In another posts I’ll explain about my work with the template here and the new things I have. You can also wait for my new categories I will add here and new Inspirational posts. Hope you will like all this.

Here is the preview from my new theme:

A preview image and free download of the old theme you can find here: Simple Elegant theme

You can compare the 2 themes and find which one you like more. I found the new one to look much much better and it will remain like that for a month then I’ll design a new one which will be better. I’ll also make some improvements to my current theme and I’ll add new features to it. I’ll explain everything when I done it.

Thanks for reading and I hope you like all this.

For better designs theme 1: Simple elegant. Free download

Ali Chorov — Sat, 05 Dec 2009 23:10:15 +0000

For better design theme 1: Simple elegant is now available for free download.

This one was simple as I said. Next themes will be more professional and cool looking. Here is the preview of this one:

Download theme file now:

For better designs: Simple elegant theme (99)

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

Adding a new plugin ”Twitter badge” to this web page.

Ali Chorov — Fri, 30 Oct 2009 12:21:14 +0000

As I promised I would tell you everything I am doing to improve this blog. Today I get decision to add a Twitter badge plugin to this web site. It’s actually very easy and almost everyone knows how to add this, it even have some instructions, but let me give you some little tips about it.

The little badge look good as it’s original colors and it is in very good place: usually on the right side of the page. But you can customise it a little bit. I am suggesting this: I will change the color of the badge similar to some of the colors from my web site.

I’ll use this color now: #628088 because I thing it looks good with the design. There have an option to change the badge position from the top. I thing I will not change this value a lot, maybe with 5–7 px will be good. And there have an option to stay in Let/Right. I always prefer to stay in my right side. It’s easy to click on it and easy to read it.

After that I should put the code of this badge right before the “BODY” end tag ()

Ok let’s see what will happen.

Tip: something that I should tell you about: When I activated the pluging from my Plugins settings and then pasted the new code, I get this error: Cannot modify header information

The solutions is to deactivate the plugin from your WordPress admin panel — Plugins and just paste the code you have in your page before the “BODY” end tag ()

It will be still there and still working. If you get such error you can try that, it helps to me and I hope it will helps to you too.

It’s here, looks good and it works. Hope this tips are in some use for you and hope you like this. Feel free to post any replies.

Top 35 web sites where you can find your inspiration.

Ali Chorov — Thu, 29 Oct 2009 10:29:43 +0000

Every web designer want to improve himself and everyone want to be from the best. And everyone needs some inspiration sometimes. inspiration
In this article I’ll show you some of the best sites for web design inspirations. I don’t mind if you know more and better than this here, but this are my Top 35 when I need inspiration. It’s always nice to know what’s the others view on the design and you can always get some new ideas from what the other people are doing. I don’t mean to copy it, but just to get some ideas. And everyone needs that sometimes.

Here is my list, I hope it will be in some use for you.

1. http://creattica.com — Design inspiration gallery.

2. http://www.smashingmagazine.com — Almost everybody know this web site. Smashing magazine has great lists of inspirational designs.

3. http://dzineblog.com — Inspirations and resources

4. http://www.beautifully-webdesign.net — Web design inspiration gallery with start base of thumbnails.

5. http://www.thebestdesigns.com — The best in web design

6. http://bestwebgallery.com — A wide range of quality websites designs (Flash & CSS)

7. http://www.bannerblog.com.au — Banner Blog — Banner Blog started in June 2005 to showcase online advertising, much of which goes unnoticed. It was also seen as a good opportunity to pimp our own work too!

8. http://coolwebsites.dk –A gallery of the coolest websites.

9. http://www.coolhomepages.com — The most popular portal to sites with exceptional website design.

10. http://cssbased.com — CSS Based is a project providing web designers a gallery of well designed CSS-based websites from all around the world.

11. http://www.cssbeauty.com/gallery — A gallery of beautiful designs on the CSS Beauty resources site.

12. http://csscollection.com — Gallery of naked sites, shed your tables and run free.

13. http://www.cssdrive.com - Categorised CSS gallery with examples.

14. http://www.csselite.com — One of the best CSS web site design galleries out there.

15. http://www.cssglance.com — CssGlance is the first Italian website focused on providing its audience with a database of well designed and innovative CSS based websites from all around the world.

16. http://cssvault.com - Inspiring creativity

17. http://cssremix.com - A fresh blend of the best CSS Designs in Web world.

18. http://www.csstux.com — The best dressed sites on the web.

19. http://www.css-website.com — Css Website is an innovative gallery of simple websites. Its purpose is to showcase designer’s work and to expand the CSS design community. We propose a classification by color and contents for a better usability.

20. http://www.designineurope.eu –A gallery of the most beautiful web sites in Europe.

21. http://www.designlicks.com - A showcase of some of the best web designs from around the world.

22. http://www.designmeltdown.com — Great designs listed beside many great articles for better designs. Great resource for any web designer…

23. http://www.digitalthread.com — Take a look at only the best of the best web site design firms.

24. http://www.flickr.com/photos/splat/sets/981332 — A set of web design sites to get inspiration from on Flickr

25. http://www.inspirationking.com - A site organising the best web site designs in the world.

26. http://www.plasticpilots.com — Plasticpilots.com assigns awards to web sites featuring excellent design.

27. http://www.screenalicious.com — One of the biggest web design inspirational galleries out there.

28. http://styleboost.com — Showcasing outstanding web sites.

29. http://stylecrunch.com — StyleCrunch is a css and standards websites gallery, you can find the best sites in the www, best design, best coded and what engine used.

30. http://www.unmatchedstyle.com — Web design and CSS inspiration gallery in blog format.

31. http://www.w3csites.com — W3C Sites is a collection of web sites created by designers that conform with the W3C standards.

32. http://www.webcreme.com — Best of the best web designs featured in this web design inspiration blog.

33. http://www.welldonesites.com — Web design CSS gallery using Web 2.0.

34. http://zeniltuo.com — Inspiration journey, All website galleries in one page

35. http://www.designersource.net — Web design showcase

I hope you’ll find your inspration in some of this web sites. Thanks for reading this. Have a nice day and I’ll wait for your comments.

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.