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