HOME | DD
kuschelirmel-stock — Gruze Style Journal CSS - a guide
Published: 2014-01-03 16:22:16 +0000 UTC; Views: 5522; Favourites: 156; Downloads: 43
Redirect to original
Description
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.
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.
A special Thank You goes to our CSS Fairie ^ginkgografix who is a precious (and sparkling!) gem
She pointed out a class I missed (.timestamp). The guide is updated now.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 sta.sh menu it makes sense to include them)
----------------------------------------------------------------------*/
.gr-box {}
a {}
a:hover {}
blockquote {}
h1 {}
h2 {}
h3 {}
h4 {}
ul {}
ul li {}
ol {}
ol li {}
/*--------------------------------------------------------------------
Jour
More Journal CSS related stuff can be found in this gallery .
Do not redistribute this guide! Link people here if you want to share! Thank you & happy coding!
Related content
Comments: 12
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!
👍: 0 ⏩: 1
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
great to hear that
and it looks good with the black & blue
👍: 0 ⏩: 1
Thanks very much!
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!
👍: 0 ⏩: 0
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!!
👍: 0 ⏩: 1
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
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.
👍: 0 ⏩: 1
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 
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) 
* 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
👍: 0 ⏩: 1
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.
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 
👍: 0 ⏩: 0
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
👍: 0 ⏩: 1
👍: 0 ⏩: 0