|
blocks.gif
blocks.gif
blocks.gif
blocks.gif
blocks.gif
|
 |
|
|
|
|
|
|
 |
 |
 |
|
| |
 |
Step3: 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. |
|
|
|
 |
 |
 |
|
|
|
blocks.gif
blocks.gif
blocks.gif
blocks.gif
blocks.gif
|
