FOR BETTER DESIGNS » theme

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.

No related posts found

For better designs theme 2: Fresh green. Free download

Ali Chorov — Tue, 02 Feb 2010 12:45:53 +0000

My second WordPress theme is called Fresh green and it’s now free for download. The 1st one you can find here: Simple elegant And all my themes will be in category themes of this site.

My next theme is also ready and I will start to work on it immediately after this post. it’s nice fresh and looks just cool. I have a lot of ideas to come after this theme.

The next theme will be the original for this web site and I am stoping with making video tutorials for designing themes. If I’ll make a tutorial they’ll be of another kind.This not means I’ll stop making themes, I will and I will just post them for free download here. But this will be in future, this web site will be transformed in a lot of ways, just as I promies..

Now here is the free Fresh green theme: Fresh Green Theme free download (117)

No related posts found

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 (134)

No related posts found

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 (176)

No related posts found

For better design: Template 1: Design a simple search box and search button tutorial.

Ali Chorov — Wed, 30 Sep 2009 22:19:18 +0000

Begining.

My idea to change the design of this WordPress blog begins now. In this 1st tutorial I’ll design a search box. First I’ll begin with the design in Photoshop. Look at the video below to see my design. Hope it will be in use for you.

Part1 Design the simple search box and search button:

Part 2 place the image to the template:

OK so after I have the design, I should crop this images and save them as 3 separate files.
1. Search box image
2. Search button image
3. Search button hover image.
Now it’s time to upload the images to my image folder in my server. Usually in /themes/”themename”/images… The first thing I should do now for this images to work is to make CSS class in my HTML file.

So this part 2 is about that. Let’s begin!

1st: the class of my search form in called : searchform2
and the class of my search button is called: searchsubmit

It’s so easy because all I should do is to add the path to the images I have, also the size of the images,

Used CSS

Here is the CSS I am using:
for search form:

.searchform2{
height:17px;
float:left;
width:159px;
background-image:url(images/searchbox.jpg);
background-repeat:no-repeat;
border:0px;
padding:11px 0px 11px 11px;
color:#628088;
margin-left:19px;
}

and for search submit (thisi s my button):

.searchsubmit{
float:left;
height:28px;
width:28px;
cursor:pointer;
background-image:url(images/searchbutton.jpg);
background-repeat:no-repeat;
border:0px;
margin-top:5px;
}
.searchsubmit:hover{
float:left;
height:28px;
width:28px;
cursor:pointer;
background-image:url(images/searchbutton_hover.jpg);
background-repeat:no-repeat;
height:28px;
width:28px;
border:0px;
margin-top:5px;
}

And I’ll upload everything to my server. So this is all I need for my images to appear. Off course this CSS style is for my template
and this is what sweat my needs. But this is the way how it works

The next thing I should do is in my HTML file. In this way if, you have tried to do this, you’ll notice that over our image of the button there have some text that appear ugly there!

By default the word: search, so if your button is like mine. It is just an image, you can remove from here in the HTML:

value=”Search” should be empty like the example:

and after that I am done with the design of the searchbox. Now If you have followed this tutorial, you can do all kind of designs for your search boxes. This is basically how everything with CSS work, there have just different techniques and you need a LOT of practice. Hope you’ve learned something here. Bye

No related posts found

For better design web site… What is all about ?

Ali Chorov — Sat, 15 Aug 2009 13:43:43 +0000

What is this web site all about?

You probably thing of that: What is this web site all about. Well I am ADK and this is my blog for improving my and your design skills. I am a web developer and graphics designer.

About me

Since I graduated a year ago I like to work on different projects on Internet as a freelancer. Am I successful? Answer is: Yes and No! Usually I have been hired from different clients to make some designs and flash animations, and some other…

And after I do, I take a holiday. LOL Being a freelancer is a nice thing, especially for me: I design fast, making nice designs, most of the people like my color schemes and my style and it looks I’ve got some talent also I like what I do, so I am in some way successful.

Confession

But I know 1 thing: I am not a professional! It’s because: I make mistakes, usually because working too fast I miss some things and also I thing my designs can look more professional. And for that I know, every one can get better, but it needs some practice. That’s why I have made this blog. I want to improve my skills in designs and also yours!

About this blog:

In this Blog I’ll post links to the most useful resources around the web related to all kind of designs. Also you see for now this Blog don’t have very cool design.( See the image in top of this post from Aug 15, 2009) It’s nice and clean, but it’s too simple. This is on purpose! I have the idea to improve it and for every thing I improve in it, I’ll post a tutorial of how I am doing it.

This will be for all of my reader who want to know HOW… So be welcome and for everything you want to ask, feel free to post a comment, I also appreciate new ideas and critique.

No related posts found

FOR BETTER DESIGNS » theme

My progress on wordrepss theme design.

Related Posts

For better designs theme 2: Fresh green. Free download

Related Posts

Design theme for wordpress web site tutorial.

Part 1

Part 2

Related Posts

For better designs theme 1: Simple elegant. Free download

Related Posts

For better design: Template 1: Design a simple search box and search button tutorial.

Begining.

Part1 Design the simple search box and search button:

Part 2 place the image to the template:

Used CSS

Related Posts

For better design web site… What is all about ?

About me

Confession

About this blog:

Related Posts