Toggle Content Main Menu
Toggle Content Theme Chooser
Toggle Content Hi I'm John
Toggle Content Smart Phone App


Step1: Layout

Before making a theme, its always alot easier if you create a theme layout first, this way it can save you alot of time, and it can give you an idea what your theme will look like. Image below is the sample theme layout that came with this tutorial, I've outlined each section of the layout so you can see what a basic layout looks like (click on the image for closer view). If this is your first attempt on making themes, then try to make the layout as easy as possible, when you get better then can go into details. If you look at the image, I've pointed out some recommended sizes to use for header, blocks, footer, story. Those are just my opinion on sizing, of course you dont need to use the same size.

When making your layout, sizing is also an important part, if you plan to display your site at any resolution. Recommended max width is 770 pixel. This way even a viewer with 800x600 resolution can view site w/o a prob. Last thing about making your layout, make sure you have a header portion, footer, sideblock, and story box. After you got your layout done, we will start cutting up the layout section by section, starting with the header first. What I usually do after I have the original layout design, first I save that then I duplicate a copy of the layout and use that duplicate to copy and paste each section while I work on them. That way if I messed up somewhere, I always have the original as backup.

Step2: Header

Now that you got your theme layout, hopefully your using Photoshop with Image Ready, of course there are other software that does the same trick, such as Fireworks Mx, Dreamweaver Mx etc. Just in my opinion, Photoshop and Image Ready is easier to use. What we are going to do now is slicing the header. This can be tricky for newbies, I've included a picture below so you can get an idea what I'm talking about while I try to explain, bare with me, IM not a good teacher lol. Using my slicing tool in Image Ready, I've cut down the header to how I want to setup, clicking on the image below you can see in details how I sliced my header and the concept IM going to use for the header.

Of course you can slice up anyway you want to, does not have to be like mine. On the picture, notice I have a section that says stretch out point, that section is where I chose to have the header stretch out to 100%, so at any resolution the theme stays about the same. When slicing your stretch out point, make sure that section of the header can be repeated, meaning when that part of the image repeats itself will look the same in any width. That way when the theme is stretched it will look the same. Keep in mind that there are plenty of ways to do this, once you get the hang of it, try playing with it. On my example header, you can see I labeled all the area I am going to use, with Image Ready its so simple because it slices the images and put them together in HTML for you so you wouldn't need to do it yourself. Without Image Ready or any slicing software, you would need to slice manually, believe me, I've done it lol.

There is just so much you can do to a header, this sample theme is very basic so I wont go into details but once you slice up the header, you can decide on what you would like to do with the slices, as for this sample theme, as you can see I used only $ theuser variable and added javascript to show the date. Any variable you like to add and define, just add it under header function of the theme in theme.php. Inside the sample theme.php I've commented another option to use if you like instead of theuser or date display, just uncomment the topic_list variable then instead it will show you a list of topics on your site. In the near future I will go over on which variable can be used on header and how to use it.

The header.html stucture can be changed if you want as long as you keep the 2 tables at the very bottom of the header.html in this theme, those are for your blocks, without those you wont be able to see your blocks.

Header Html

The image above, I've highlighted where I changed the table width after image ready published the html. This way I can stretch out my theme at 100%. It is much easier if you name your images (atleast the ones your going to be adding things on, such as date display, topic_list, where I have my stretch point, I named it full, this way when I edit the theme with an editor, I would know right away which image is what.) I know its not fully detailed, and if your not sure what I am talking about, have your sample psd files next to you, open it up in image ready, that might help a little bit.

Step3: Blocks

The blocks are fairly simple, for this theme we basically use 3 sections, Top portion, mid portion, and bottom portion.

Creating blocks can get tricky sometimes depending on how you want your block to look. I'll try to point out some tips before you make your blocks. First remember that this will be the layout for all your sideblocks so sizing is important. Some blocks out there require a wider width than others so if the block width is too small it mite make your blocks look funny. For my nuke, all my blocks are no wider than 175 px width so for most my themes I always set width of 175 on the blocks. Of course you can set this to whatever you think will fit your nuke, this theme is set on 165 px. Now that we got the width set, we're going to split the block into 3 sections, Top-where the title of the block goes, Mid-this is where the contents of the block and height set to 100%, Bottom-footer of the block.

Top portion- Deciding where to cut the top portion of your block is important, depending on the design of your block, if you have curves or the shape of the top does not match the body of the block, make sure you end the top portion where the curves end, if this is your first time, I recommend to just make a rectangular block to start with.

Mid portion- The mid is where the contents are, this part is also important since its at 100% height you need to make sure that this portion of the block at no matter what height, it will look the same. Note, since we are stretching the mid portion of the block, you would only need 5px - 10 px of the height, you dont need that much, this way, you can save abit of loading time and size of the image. Please use image above as reference.

Bottom portion- This part is easy, same thing as top portion, basically where the mid portion ends thats where your bottom portion start point should be. Again, use the html and psd files as reference to get more of an idea, after explaining each section, I will go over the variables used in the theme.

Step4: Story Box

There are many ways to make your story box, most common way is top bar, story content, bottom bar. Like the header and this whole theme, everything is set to 100% width so it fits all resolution. Look at the image below to get a idea how this theme's story box is done. Even though this method is common but just by changing the image of the top bar and bottom bar makes a big difference.

Top Story Bar
You can make the top story bar anyway you like, for this theme I sliced the top bar into 3 pieces. The middle section where its set to 100% width, thats where I have my story title variable.

Story content
The story content of this theme I used Css style sheet and added class to wrap the content instead of using images, although you can use images to wrap content, using css style sheet looks almost the same, but alot faster to load. Please refer to style.css on how to do so for this section.

Bottom Bar
This part is easy, you can either slice this or leave it as one image, up to you, in this theme I sliced the bottom bar into 2 pieces, one at normal image size and the other set at width of 100%.

Step5: Footer

The footer is almost the same as the header, the important parts are the stretch out point ( make sure when it stretches it looks the same on any width), also the footer message portion. Click on the image below and see how this footer was sliced. Unlike the header of this theme using 100% for stretch out point, I've used 2 stretch out point on the footer, a left side and a right side with 50% on each. By doing it this way, the footer message portion would end up in the center at any resolution. You can also add navigation on the footer as well if you like, for this sample I just added the footer message variable to keep it simple. Now you should have the whole theme done, I will try to explain how to put them together and the variables used also the style.css on the last step.

Step6: Theme.php / Style.css

Putting your theme together should not be too hard, if this is your first time, I recommend using the sample theme structure, play with it till you get the hang of it then you can make a different structure and setup. I will try to explain showing images and explain each part, you can click on these images to get a closer look. Open up your theme.php in the sample theme.

Image-1-bg color and opentable

The 4 bg color is the main background colors you want for your theme. The text colors are used when there are texts thats not defined by a font class. Only important part on this section is that you dont want to have the bgcolors and the text colors the same color, or else you wont be able to see the text.

The opentable function is almost used in every module, this is used to wrap content up with a box. On this theme I just gave a td class in style.css to define my box style. Notice on opentable function at the end where it says td class extra, keep that in mind for now.

Function Header

The header function in this theme I used theuser variable, in the image above you can see how theuser variable is used. By using (if), this is what how it can tell if its a guest or a user when the visitor enters your site. Open up the header.html at the same time, you will see where I named my user.gif thats where I have the variable theuser in that td section. This is done by giving the variable (theuser) define it in theme.php. Its your choice where or even to use this variable or not, to play with it you can use (topic_list) variable if you like just to see how this works, if you want to use (topic_list) variable, simply uncomment the variable and in the header.html where I have (theuser) change that to (topic_list) just to see what it looks like. There are alot of variables you can use, in the near future I will show you a list of variables to use and how to use.

Function Footer

The footer function is pretty simple, I just used footer message variable, the image above you can see how its defined, I also moved the banner function into the footer, most themes have it at the header function, you can do that as well. I have my banner function if you have banner ads on site it will opentable then show your banners, in my opinion it looks better that way, having it wrapped in a table.

The next 2 would be the themeindex (story box) and the article function. In general, most themes have the same functions for these 2. You can open up the storyhome.html and storypage.html to see what I did with the story box.

Function themesidebox is the last one on the theme.php which is the easiest, only using (title) variable so not much explaining here. Moving on to the last and final, style.css

Style.css style sheet
The style sheet can make a big difference in looks on your theme, open up the style.css in the sample theme, you can see the classes I used for this theme. You can give it any class and any colors you like for any sections of the theme, The one I will point out is the (td.extra) class, that is what I used for opentable and story page. Tip: for this class, I used a background color that is close to the main background color of the theme, but not exact, this way you can still see it when the main background is showing. Also for the borders, you can have all 4 showing same color, just in my opinion for the right and bottom I used 1 color and top, left I used another color. This way it kinda have a 3d feeling in it. The scroll bars on each class (most important under the body section which is the last 2 lines in the style.css) again in my opinion, I use something thats close to the themes colors, you can use the scroll bar generator on my community to see what the colors will come out like.

Thats it for now, I know this tutorial is not so detailed and I dont explain too well, my advice is just open up all the files thats given and play around with them, also look for commented lines inside the htmls and the theme.php. The amount of time I have its hard to make a full detailed tutorial, plus there are so many ways on making a theme I cant cover all lol. Feel free to post on my forum to ask any questions about themes, or if you need help on certain part, I will try to help out when I can, hope this tutorial can get you some where, enjoy!


Get your residency on the net, with the Future in Web Creations.
Future Web Creations!
Copy Written 2000 © by Future Web Creations

Interactive software released under GNU GPL, Code Credits, Privacy Policy
x x x