Journals are like Ogres
They both have layers! And they both can make you cry. The deviantART journals have two different structures. The original 'Old School' layout where everything is named .journalbox, etc. And my preference, the newer gruze structure. I prefer the gruze expressly because it is chockful of layers. Kinda like cake or onions, but ogres makes sense too. You can still make a basic simple journal skin with the gruze structure and it has so many layers that you can use what they have instead adding more and more stuff on the user end.
Already, `
ginkgografix has made a very nice explanation comparing the old structure with the new. (see Related Resources) It is a recommended read and has an illustration that might help you envision this structure. However, there are more points to the gruze, that either weren't there when her tutorial was made or were relatively unknown. `
miontre has helped discover the usage and test these with me. And now, I'm pretty satisfied to share this knowledge. Copy & paste examples into your journal to test and play with.
First, we will take a look at the simplest break down of the gruze structure, the bare minimum you will need to know to make your journal.
.gr-box{} -- Contains entire journal
.gr-top{} -- Contains the title, journal date, top
.gr-body{} -- Contains the body elements (text and bottom and list)
.text{} -- Contains the text only
.bottom{} -- Bottom link for comments/previous link (prev no longer used)
.list{} -- Mood list
It is very simplified and comparable to the old structure. And it really isn't harder to learn. Let's talk a little about how you would use these. Let's code in a background and some basic structuring. The very first thing I always do is get rid of the default styles. I use the "*" code to effect all areas.
*{
background:none;
border:none;
padding:0;
margin:0;
}
This gives you a blank slate to work with. I also get rid of the elements I do not want. The gruze border, triangle and journal image (and space left behind from removing it.
.gr1, .gr2, .gr3, .tri, .gr-top h2 img, .indent{display:none;}
So now, the journal is completely blank. And looks rather blah. I'm going to demonstrate just something simple. A grey bg with light text. This will have no extras coded in, just a title, text and footer link. I'm doing this ultra skinny for sake of the preview. Really, you would want the widths to be about double. And fixed width is not necessary.
.gr-box{
background:#444444;
padding:0 24px;
margin:auto;
max-width:624px;
border:#999999 1px solid;
border-radius:3px;
}
.gr-top, .text, .bottom{
width:375px;
margin:auto;
border-left:#777777 1px solid;
border-right:#999999 1px solid;
padding:24px;
}
.gr-top h2 a{
color:#999999!important;
text-shadow:#222222 1px 1px 0;
}
.text, .commentslink, .gr-top span{
color:#999999;
}
Now, I'll be adding different shades of grey and green to display the different layers. The preview might get kind of odd looking. But it will demonstrate the positions and potential for each new layer. Since every layer can have a background, you can make some pretty complex designs. Keep in mind the above picture to compare. Those codes did not change at all, only added in more codes. I did them to look kind of like `
miontre's background borders he recently demonstrated. (see Related Resources) First, the new codes...
body{}
.negate-box-margin{}
.gr-body{}
.grf-indent{}
And with the styling added...
body{
background:#3c5400 url(http://fc02.deviantart.net/fs70/f/2012/337/0/0/subtlepatterns_diagmonds_inverted_by_gillianivy-d5myz76.png);
padding:8px;
border:#9aae2b 1px solid;
}
.negate-box-margin{
background:#565656 url(http://fc07.deviantart.net/fs71/f/2012/337/9/b/square_bg_by_gillianivy-d5myzrg.png);
padding:12px;
border:#9aae2b 1px solid;
}
.gr-body{
background:linear-gradient(to bottom, rgba(60,84,0,1) 0%,rgba(39,39,39,1) 23%,rgba(39,39,39,0) 100%);
border:#272727 1px solid;
margin-bottom:8px;
}
.grf-indent{
background:#272727;
margin:8px;
border:#9aae2b 1px solid;
}
As you see, it gives you two outer layers and two inner layers. The inner layers are both contained within the .gr-box but the .gr-top is not inside. So, it is separated. But .text and .bottom and .list (not shown, it is the moods) are all contained within those. So, the possibilities of what you can do are endless. Fake border images, like seen above. Layered images (pngs set to top|center|bottom and left|center|right that float over each other). Hidden watermarks (add in a semi transparent image with your signature)...
It takes your basic design into an advanced skin. You cannot do that with the old .journalbox structure. And chances are, as you continue to skin, you'll get better at it. So, learn the more advanced structure rather than mastering the old and then learning the new... I don't even remember the old structure now, and they cannot mix. The gruze cancels out some of the journalbox.
Related Resources
Do-It-Yourself Journal SkinDo-It-Yourself Journal Skin
Get into Journal skinning by learning how to create your own Journal skin in this tutorial!
Written by `miontre for dA Related Week in #projecteducate
Jump to resources
Heya everyone! 
In this tutorial, you'll be learning how to create your own Journal skin on deviantART. This tutorial takes a "Do-It-Yourself" or "Assemble-It-Yourself" type approach. I've pre-created a design, and it's up to you to put it together and customise it - with instructions, of course! 
Note that you need a Premium Membership to use Journal skins! 
This tutorial is aimed at anyone who is interested in starting to create Journal skins on dA using CSS. Those who don't know anything about CSS yet can follow along, and hopefully learn something along the way! Those who are beginners with CSS can learn how to turn a design into code, and how to use CSS to create a Jo
p.s. Tips
When coding the journal title, it has changed to a link now. So to override the default colors, you must declare your color important.
.gr-top h2 a{color:#ffffff!important;}
Limit the width of the text area so it is easier to read. Keep it centered in your skin by setting the margins to auto.
.text{max-width:675px; margin:auto;}
Same thing with the main journal container, when you have a fixed witdh and you don't want your skin to hug the left or right side of the browser, set the margin to auto.
.gr-box{width:1024px margin:auto;}
Show & Tell
I'd like to see your journals! I'm a bit of a geek about CSS (in case that is not plainly obvious). So, I like to talk about different ways to code things, since there is no 'right' way to do it. Please, comment and link with your creations and discuss how you have used layers in your skins. Any advice to offer fellow readers? Share it here. And ask me any CSS related questions. I don't mind troubleshooting , sometimes, just bouncing your thought off another person can fix the problem.
Credits
Patterns are from
subtlepatterns.com
Color Models and Transparency
No matter how experienced you are with CSS, you've most likely dealt with colors before. Did you know, however, that there are several other ways of using colors in CSS, apart from the most widely known hexadecimal model (i.e. #123ABC)? In this article, I'd like to introduce you to two alternate color models, as well as ways how to use them in your designs.
The RGB(A) model
The RGB model is vastly similar to the hexadecimal one. Colors are also split up into red, green and blue counterparts, but instead of by hex digits (00 through FF), they're defined by values ranging from 0 to 255. Here's what the syntax of an RGB color value looks like:
rgb(red, green, blue);
/* or */
rgba(red, green, blue, alpha);
You start with "rgb" and then place the values for red, green and blue in brackets behind it. In addition, you have the option of adding a fourth value for alpha (transparency) when using "rgba" at the beginning. You can use this syntax anywhere you would've used the hexadecimal model, i.e. in color, background-color, text-shadow or box-shadow properties.
Examples:
• rgb(0, 0, 0) — black
• rgb(255, 255, 255) — white
• rgb(255, 0, 0) — red
• rgba(0, 0, 0, 0.5) — 50% black
• rgba(0, 255, 0, 0.25) — 25% green
The HSL(A) model
The HSL model takes a completely different approach at defining colors. While it essentially has the same range of colors the RGB model has, it does not use a color's red, green and blue counterparts, but its hue, saturation and lightness values instead:
hsl(hue, saturation, lightness);
/* or */
hsla(hue, saturation, lightness, alpha);
Using hue, you start by defining the base color on the color wheel. A value of 0 represents full red, 120 represents green and 240 represents blue. At 360, you're back at red. Any values in between are mixtures of those three main colors. So if I was looking for a shade of purple, I'd go for a value between 240 and 360. Next, you specify the color's saturation, which is a value between 0 and 1. Zero achieves complete desaturation (which is a color-less shade of gray), while 1 makes it as vivid as possible. Finally, lightness stands for the color's brightness; once again a value between 0 and 1. Zero is pitch-black and 1 is total white, while every value in between results in a darker/brighter version of the chosen base color. When using "hsla", you can once again add an alpha value at the end.
Examples:
• hsl(anything, anything, 0) — black
• hsl(anything, anything, 1) — white
• hsl(0, 1, 0.5) — red
• hsla(120, 1, 0.5, 0.25) — 25% green
• hsla(240, 0.2, 0.4, 0.5) — 50% pale purple
Transparency
At this point, you might be asking yourself what the point of knowing these alternate color models is. The most important aspect is that the RGB and HSL models give you the possibility to specify alpha/transparency values. Transparency can be extremely helpful in a number of ways:
Transparency as a stylistic means
Half-transparent elements can create nice little details, and —when not overused— add some polish to a design. The possibilities are endless, but here's a really primitive example of a transparent-black text box [background-color: rgba(0,0,0,0.7);] on top of an image:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Sed a ipsum eget leo faucibus feugiat.
Increased flexibility
Transparency can also greatly increase color flexibility. Let's say we want to display text that is slightly darker than the background. On a white background (#FFFFFF), we might choose #CCCCCC as a text color. The result looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Proin convallis urna ac odio ultricies ac vestibulum magna pulvinar.
But what if that text ends up on a darker background? If the background color is darker than the text color, the text will actually appear brighter and our goal of having slightly darker text is destroyed. Or even worse, if the background color equals the text color, you won't be able to see anything at all anymore:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Proin convallis urna ac odio ultricies ac vestibulum magna pulvinar.
Here's where transparency comes in. If we give the text a transparent-black color [i.e. color: rgba(0,0,0,0.2);] instead of a fixed shade of gray, it will appear as intended on every possible background:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Proin convallis urna ac odio ultricies ac vestibulum magna pulvinar.
Bonus: "Guessing" colors
Finally, I'd like to mention an advantage specifically tied to the HSL model. When playing around with a design, you often find yourself tweaking a color again and again to find the perfect shade. You likely need Photoshop or something similar running alongside, because there's no way of knowing the changes you have to make to the red, green and blue counterparts if a color should appear slightly more vivid, for instance. The HSL model changes this. Once you've found a hue (base color) you like, you can simply change the other two values without having to worry about messing the color up. Want to have that orange a little more vivid? Increase its saturation. Want to make that blue a slight bit darker? Lower its lightness. This might sound somewhat complicated, but once you've gotten the hang of it, it's really convenient!
Conclusion
I hope this article has given you an insight into the variety of color models you can use in CSS, and how they might come in handy compared to the hexadecimal model. If you've got any questions, feel free to leave a comment! Happy color coding!
=jonarific
Sta.sh
Follow 
denotes US only contest
#
To contribute to the next installment of "Pimps & Whoas" please include it in the comments below with the appropriate links and information. If promoting groups, please include a description so people know why they should check it out! Also use devtags not icontags eg:#
@deviantART
Facebook
Tumblr
Google+
StumbleUpon
YouTube
LinkedIn
Have a suggestion, idea, or feedback? Leave a comment on this article!
Find a bug? 
I have a bit of a bad habit when it comes to reading books. I tend to read the last page before I get very far in, because I want to know if I'll be frustrated by the ending. That way, I save time by not reading the entire thing. Totally makes sense, right? 
Add Media
Style