Skeleton Journal With Comments

Deviation Actions

kuschelirmel-stock's avatar

Literature Text

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 {}

Journal Top - this is where your journal title and date stamp are
.gr-top {} /*if you have a top background image (a header image if you will) that you want to use, you can put it in here (or alternatively in .gr-box) and use a fixed height to define your top box; add font size etc here to define time stamp*/
.gr-top h2 {} /*use padding margin on this to push your title to the right spot & add any properties you need, such as font style, type, etc*/
.gr-top h2 a {} /*define the colour here or it will use the default link color from above!*/
.gr-top h2 a:hover {}
.timestamp {} /*lets you adress the timestamp part only - here you put the colour of your timestamp*/

Journal Body  
.gr-body {}
/*add your bottom image (if you are using one) here*/

/*Journal contents only:
.text {} /*this is where you can put in some padding for your main journal to keep the text from being squished to the sides -- only use it if you need it*/

/*Moods List:
ul.list {} /*this will style the list as a whole*/
ul.list li {} /*this styles the individual lines - remember if you put a border that the top and bottom borders will always bunch together unless you add margin*/
ul.list li.a {} /*this can be used to give the alternating list items a different look*/

/*Comments Link:
.bottom {} /*use this to add padding, margin, font, etc - basically everything that is not directly related to this part being a link*/
.bottom a {} /*style the link itself; I use this mostly to define colour and text-decoration -- only use if you want a different property than the normal links*/
.bottom a:hover {} /*give it a nice hover state if you like*/

Additional Code:
/*This is where you put any additional code you may want to use within the journal; for example for thumb styles or extra divs such as a navigation/menu type thing etc.*/
Blue Square Bullet  Feel free to use this skeleton code as basis for creating your journals
just copy+paste to your journal, delete the comments if you don't need them (everything in /*...*/ -- they are css compatible, so you can also leave them in or add your own comments)

I don't require credit (though if you want to give some I'm not gonna shout oh noes either ;P),

Red Square BulletRed Square Bullet Red Square Bullet just do NOT redistribute it; link people to the deviation! Red Square Bullet Red Square Bullet Red Square Bullet 

Thank you & Happy Coding!

PS: I would love to see if you create something with the help of this - I'm curious like that :aww:
You could leave a comment here if you do, pwease? Pwease 

Purple Square Bullet For more explanation, please visit:
Gruze Style Journal CSS - a guide by kuschelirmel-stock 
© 2014 - 2021 kuschelirmel-stock
Join the community to add your comment. Already a deviant? Log In
o8LeptonPage8o's avatar
I'm so going to use this ^^ As someone who's trying to learn CSS and trying to create journal skins, this is really helpful :D