Deviation Actions

kuschelirmel-stock's avatar

Gruze Style Journal CSS - a guide

Blue Square Bullet About this Guide:
I always forget which of all of these classes I'm supposed to be using in which way and because of that, I made myself a little visual reference - of course highly inspired and based on both Gruze Journal Structure by ~XorX and the old-journal-style visual guide by `thespook
I thought others may have the same problem, especially if you're not doing a journal a week. Also, I still remember vividly the intimidation I felt when first confronted with the gruze style, so here we are. Hopefully basic and simple. Though definitely just a short reference for now - maybe I can actually get around to doing a gruze-style journal css how-to, like the ones I did for the old style (part 1 & part 2), though I suppose part 2 is still somewhat up-to-date as it deals only with additional costum divs etc. Still, I'd like to revisit both. Let's keep our fingers crossed that I will have the time and energy to do so.

Silver Square Bullet For clarification:
I know it's not a beginner's tutorial - you need some understanding of HMTL & CSS to be able to work with this. But then I think not everything always has to be on a beginner level, especially not with so many css providers on dA. Plus I was looking for a visual guide and didn't find one I liked for myself (not to say there is none out there, just that probably my brain works differently) so I decided to draw one. The rest kinda developed from there.

Purple Square Bullet A special Thank You goes to our CSS Fairie ^ginkgografix who is a precious (and sparkling!) gem :aww: She pointed out a class I missed (.timestamp). The guide is updated now.

Blue Square Bullet Additional Material:
For a skeleton journal css with all the main classes in and some comments, please visit this deviation:
Skeleton Journal With Comments/*--------------------------------------------------------------------
Blank Journal (gets rid of all tiny images and preset backgrounds, borders, margins & paddings)
* {background: transparent; border: none; margin: 0; padding: 0;}
.gr-top img, .gr1, .gr2, .gr3, .tri {display: none;}
a {font-weight:normal;}
a.external {text-decoration:none!important;}
a.external:after{display: none!important;}
Journal Design overall (you can put font, background colour, border etc for the whole journal in gr-box -- the other tags are optional to style, but as they work with the menu it makes sense to include them)
.gr-box {}
a {}
a:hover {}
blockquote {}
h1 {}
h2 {}
h3 {}
h4 {}
ul {}
ul li {}
ol {}
ol li {}

Blue Square Bullet More Journal CSS related stuff can be found in this gallery.
Underwater CSS by kuschelirmel-stock Light into the Dark CSS by kuschelirmel-stock Skull and Roses - Free CSS by kuschelirmel-stock 

Red Square Bullet Do not redistribute this guide! Link people here if you want to share! Thank you & happy coding!
Image details
Image size
1200x3000px 679.93 KB
© 2014 - 2021 kuschelirmel-stock
Join the community to add your comment. Already a deviant? Log In
RazorToshiba's avatar
This is exactly what i was looking for, I'm learning CSS right now in college and wanted to test my skills with existing code, so i figured, why not make a journal skin! problem was, i had NO IDEA what the class names were, and this is just what i needed!
kuschelirmel-stock's avatar
:heart: Glad I could help! I'd love to see what you create, too!
ObscuroArcanum's avatar
Thankyou so much for posting this. This guide, together with your skeleton journal skin
helped me figure out how to begin making my own skin. :huggle:
kuschelirmel-stock's avatar
great to hear that :heart:
and it looks good with the black & blue :love:
ObscuroArcanum's avatar
Thanks very much! :huggle:
It mightn't be the most technical skin, or even the best looking one out there
but I couldn't be happier with how it turned out! :love:
dholms's avatar
man i wish i could take a class on this that YOU taught.
i would really like to understand all this better and believe i have the capacity to learn it IF only i had the dang time!
but thanks for this Jas!!
kuschelirmel-stock's avatar
GinkgoWerkstatt's avatar
For someone who is new to coding this might be too much and a little confusing, as you don't really need to work with  .grf-indent, .ppp and all those classes - at least i haven't done so far for any journal i did.  Of course the more you add the more handy they are.
Personally i always have a problem with tutorials with a lot of text and less/no images. Especially with the boxes (even if all correct) it would totally confuse me. But that is just me :D

What you might want to add here and to the skeleton journal is .timestamp, with that class you can address the date/time element directly and it might be easier to remember than .gr-top span. Or maybe even helps to find it quicker in your CSS code later.
kuschelirmel-stock's avatar
I realized that it wouldn't be good for beginners when writing the stuff at the bottom*; it's not so much a tutorial as just a small guide. It's meant for people like me who do a journal every year or so and would like to do more but each time you go doing something like that when you haven't done it in ages it feels like you start from scratch or close enough to be discouraging anyway ^^; It was meant to be as complete as possible so I have a visual (very important for me - while xorx's list is cool, it feels like I'm starting anew each time I see it) at what divs are there to begin with so I know if I have enough divs in case I want to do something with an elaborate background - which up to now I was shying away from because it seemed so much work to figure out. Anyway, I still hope it might help others figure things out a little better, even if you do need some previous knowledge of css.

And thank you for the tip with .timestamp - I didn't know about that one (must've missed it when I went though the code) :hug:

* which is why I really need to get around to doing another journal css tut for the gruze style -- I think with the divs the way they are, especially with having two background divs, it would be a nice way to get a journal with a background image for the top and one for the bottom and then only use the other divs for placement of the elements :aww:
GinkgoWerkstatt's avatar
Yes of course, not everything needs to be for beginners and sometimes it helps to just have deviations where you can look up things easily when you forget a class name etc.
I have a basic blank css file that i always add when i start writing a new skin. Just when i need extra/special classes i look it up. :D

The problem with gruze is that there is a lot you can use, but don't really need to use. For a basic structure i think this is already "too much", but can never be wrong to be aware of additional classes.

No problem! And it wasn't even that much help that it deserved a mention in the description :lol: :hug:
gillianivyart's avatar
Excellent explanations, very clear and concise.  You're definitely a pro at tutorials!  ;D  Mine needs updating, and is so ugly.  Added to my frequently referenced folder, I have people ask me things all the time, so it is good to have these handy ;D
kuschelirmel-stock's avatar
Join the community to add your comment. Already a deviant? Log In