Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

Submitted on
April 28, 2011
Image Size
2.4 MB
Resolution
1200×2911
Link
Thumb
Embed

Stats

Views
5,248
Favourites
262 (who?)
Comments
48
Downloads
150
×
Designing a Journal Part Two by GillianIvy Designing a Journal Part Two by GillianIvy
Okay, may I first apologize for this being so much text to look at! However, I did make it bigger so more legible!
Journal skin is now available:




Live View Watch the design in action at this stage of coding. A lot of it looks pretty wonky.

And I had to change the positioning one it loaded, as it looked different than the preview and even from the Design view. The Design view looks entirely wrong right now. I might suggest a script that removes the design view on the fly.


[look, I'm featured!]

For an excellent Gruze model, check out `ginkgografix's "Old Vs Gruze Journals"





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.




You may download my resource files from my SkyDrive to look at the inner workings. I've included the PSD file and everything you've seen.

[link]
[images]
[link]
[psd]

Join me at :iconecssercise: where I'll be mentoring students one on one. The group has just started, so not ready yet, but devWatch it to keep updated when students will be accepted.
Add a Comment:
 
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 4, 2013  Hobbyist Digital Artist
Sorry, but how do you make the title of a journal go under the heading picture?
Thanks ^^;
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 5, 2013  Hobbyist General Artist
There's several ways to do this. The easiest would be to make the top sections which are above the title be where you put the bg image. If you want it as a link, however, then you have to move things around and it gets a little tricky. Because then, you would have the image link in the header and have to adjust the position of the title.

Can you send me a link to your journal you're working on? I could also look at codes for you. ?Just note me the code or link to one.
Reply
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 5, 2013  Hobbyist Digital Artist
Oh, awesome! Here's a link: [link]
I've also broken it up into three sections, the top middle and footer. Thanks :)
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 6, 2013  Hobbyist General Artist
So, how is it going? Are you still needing help with this?
Reply
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 6, 2013  Hobbyist Digital Artist
A bit, I'm not fully understanding how to do it. My knowledge in CSS is very limited ^^;
Do you have any examples or tutorials regarding how to do something like this? I've searched everywhere and can't seem to find one.
If not, I'll just keep practicing.
Just to clarify, you're saying that the section of CSS code that makes up the title needs to be moved underneath the image I want above?
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 6, 2013  Hobbyist General Artist
Positioning the title section (.gr-top{}) by moving it down may be the easiest way.

example:

.gr-box{
background:url(yourimg.jpg);
}
.gr-top{
position:relative;
top:200px;
}

That would move the title section (timestamp and all) down by 200 pixels. Of course, you would adjust for the size of your image. But that is the basic of it.

I don't know of any tutorials that deal with positioning per se. I had written something about it a long time ago for when I was a mentor at ~eCSSercise, but that group is closed now. It was an awful lot of work for mentors to maintain classes.
Reply
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 6, 2013  Hobbyist Digital Artist
Also, I seem to understand the way to get the image above the title, but how do you make the title go on top of the image (if you have a special box for the title to go in on the image)? Is it done the same way, or does that involve different coding?
Sorry, and thank you ^^;
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 7, 2013  Hobbyist General Artist
You can put the image on the background of your title either on

.gr-top{}

or

.gr-top h2{}

instead of as the journal bg. This way it would be able to be on top of the image. Better as the gr-top, since you would need to make it the size of your image. Keep in mind that each section can have an image on it, so you can make layers. Have you seen the box models made by `ginkgografix? It is slightly out of date, but it shows nicely which 'layers' are inside of each other: [link]
Reply
(1 Reply)
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 6, 2013  Hobbyist Digital Artist
Hmm, I've added that code to my current code, and I can't seem to make it work. The picture won't show up at all :(
I'm doing something wrong I'm sure, so I'll go look up a tutorial on which part of code is which and try it out again~
Thanks for all of the help, I'll let you know if I figure it out :)
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 7, 2013  Hobbyist General Artist
Are you using old school (.journalbox, etc) or Gruze (.gr-box)? You cannot mix the two. My example is Gruze. Also, you would need to edit what I wrote, not copy directly.
Reply
(1 Reply)
Add a Comment: