Again, I recommend trying my "Bare Bones CSS Template" as it's a structured shell of all the elements for Gruze journals. This tutorial does not teach that structure, there are already box models and tutorials for that. This is a walkthrough of my process. I use the Bare Bones to speed up my designing process and so I don't forget an important section.

For instance, in my designing phase, I forgot moods all together. So for now, I've made a mental note of where I want them, I'm not going to go back into my design just to add that in. I think I'll put them on the bottom in the text area, centered.

Now that all my files are uploaded and I've put my snippet on, I'll put in my dummy example text. I like to include at least one of the following: Regular text, Thumb(s), Blockquote, Unordered List, Ordered List (In the preview it's unordered, will fix later), and Subheader.

I use the code <strong> for my subheader, as it's easier to remember than a new div and mostly unused, as people usually use <b> to bold their text.

I also create a new div <div class="center"> which I can wrap around any text or thumbnails I wish to have centered on the fly. I'd suggest creating ones for left and right floats, but we'll not worry about that for now.

Next, I start filling in my background images so I can see where everything is going to fit in. I chose .gr-box vs .gr because the .gr repeated my image on the top and that does not work with this design. .gr formats the entire document, rather than just the one section. Of course, you should be able to override conflicts by using !important but we'll get into that another time.

Position to the top and center and set repeat to no-repeat. I tiered my background styling as IE does not read the one line styling properly, and rather than redo everything for silly IE users, I just automatically do it that way anyways.

Next I put the bottom image on. Under .gr-body and set it to position bottom center and no-repeat. Right now it overlaps, I will likely need to set a min-height so this does not happen. Right now, i work top to bottom and just fill everything in as I go. Because if you fiddle around with one element too long, then add another that moves your first element, you'll end up doing more fiddling and might end up a bit frustrated at doing all the same work over again.

Throughout my skinning process I will refer to my mock up to compare and see where to go next. For this, it's really sloppy looking and I want to go ahead and work on the text area so I can get my mind wrapped around it. I take everything one step at a time. Looking at it as a whole, it's a big jumbled mess!

I put the 20% white bg fill on my text area and added a white border. This helps me see where everything is so I can then position it. I set it to position:relative and move it to where I want it. Put in the width and set the margin to auto. I love auto. It makes everything go bam, right to the center. Brilliant!

Adding in my white gradient bg for .gr-top and positioning it makes it so my text is covered by the gradient. This is no good. So, I set it to position:absolute and put in a z-index:0. The z-index deals with the layering of elements front to back. Default is 1. Making it zero pushes it backward.

At this point, my header title is still all off to the side and not formatted and looking ugly. So, I'll go to .gr-top h2 and add in the font elements, color and positioning and width. I changed the color from my design because it was just too light to be legible. I also decided to add some pretty text effects, because I love those.

I did the same for my .text adding fonts, padding, color. Here, I also decided to add in text shadow as well as a subtle box shadow which goes around the outline of the entire journal text without use of images. Looks slick. Gives it that extra dimension.

So, for the most part, the top half of my journal is done. I still have to fix my footer image, add in my mint green gradient at the bottom of the text area and do my date stamp, links, moods, blockquotes, lists, comment links, hover effects, thumbs and lastly, my credit.