Shop Mobile More Submit  Join Login

CSS Tricks: Journal break-down

Tue Jun 17, 2014, 5:00 AM
This has been done before by many others :dummy: I don't want to step on anyone's toes, I just wanted to give this a go myself :)

If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!
There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those :XD:

Well, here comes help with those hacks :la: (I gotta give ginkgografix credit for some of it, go hug her! That's an order :evileye:)

At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the journal deviation, from which it is made up of, the basic HTML, without any content.

Beforehand explanation


Now, I know you will say: but that is not the default skin! That is not how journals without CSS look like! And you are right. But. There is always a but. But the default journal skin for coders is not the same as an unskinned journal entry.

While when journals were changed to behave like deviations, they also got a new look. While it uses some of the same classes as the previous skin,  there are some changes, especially the time stamp, that have happened. But this was not implemented for journal skins, they still rely on the previous journal styling.

Skin-breakdown-compare by pica-ae

You achieve this look by simply entering one line of code into the CSS field; this could be for example a comment: /* default skin */ like this.

There are two reasons to do this: a) because you feel a little nostalgic and want things to look like "in ye goode ol' days" or b) because you want to create a new journal skin and need to figure out what classes are provided by dA for you to style new.

I am obviously more the b) type person and I want to show you how to figure out the default dA journal HTML and provide a template for you to create new skins.

Now that we cleared this up, let's get started with breaking down the journal :eager:

The structure of a journal deviation


By structure I mean HTML layout: it defines the elements a journal is made up from. You can style most of the HTML elements a journal consists of and thus create your own skin.

You can divide a journal into 3 parts:
  • The overall journal box
  • The top, including the title and timestamp
  • The body, including the part for your content and the link to the comments

Alltogether there are 17 classes.

I strongly recommend to create your own basic template for journal skins with all the classes of a journal deviation. You can either save it as a .txt file locally to your computer or actually save it as a skin in sta.sh (writer). Copy the template everytime you create a new skin.

It would be crazy to try and remember all the classes and making your own template is not "against the rules". Let me tell you something: everyone who writes CSS is "cheating" with cheat sheets like this all the time ;)

In detail


Let's get down to business now. This is how the default jorunal skin looks like. (also known as "Deviant Green".)
Well, okay, this is how it looks with colorful overlays that I added to show where all the elements are :B

Skin-breakdown-classes by pica-ae

Visual guide to the different HTML elements of a default journal.


This should help you identify all the elements a journal is made up from. I took into account margins and paddings and sizes provided in the source code of this.

.negate-box-margin {}

.gr-box {}
ioverall journal, top and body


  .gr1 {}
journal cornersi


  .gr2{}
journal cornersi


  .gr3 {}
journal cornersi


  .gr-top {}
contains the title and timestamp of the journali


     .gr-top .tri {}
downward pointing trianglei


     .gr-top .gr {}
makes room for the journal iconi


        .gr-top .gr h2 {}
journal titlei


           .gr-top .gr h2 img {}
journal iconi


           .gr-top .gr h2 a {}
journal title linki


        .gr-top .gr span {}
timestampi


  .gr-body {}
contains content and commentslinki


     .gr-body .gr {}

        .gr-body .gr .grf-indent {}

           .gr-body .gr .grf-indent .text {}
contenti


           .gr-body .gr .grf-indent .bottom {}
contains commentslinki


              .gr-body .gr .grf-indent .bottom a {}
commentslinki

The indentation is only there to indicate the stacking of the elements. Same indentation means same stacking level.


The three classes .negate-box-margin, .gr-body .gr, and .gr-body .gr .grf-indent have no styling, their only function is to contain other elements.

How to optimize the basic layout


When you are creating a journal from scratch, it makes sense to get rid of all elements that your design does not use. Usually this is about classes that create the look of the unskinned journal.

Get rid of the elements you don't want to use!


We start by kicking out the rounded corners around the journal, the icon next to the title and the little triangle, which points down towards the content. Kicking out in this case means hiding them. We cannot actually kick them out, as we have no control over the HTML provided by dA.

.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {

display: none;


}

That's five down :evillaugh:

Do NOT do this with .negate-box-margin, .gr-body .gr, and .gr-body .gr .grf-indent! If you do that, the whole journal or parts of it, will not be visible. If you don't want them in the code, just delete them from the code. Simple as that.


Adjusting for the not displayed journal icon


The journal icon is not part of the CSS, but part of the journal HTML structure. Therefore by setting it to display: none; it will leave an odd empty space, which is created inside the surrounding elements. In order to have everything flush left nicely, we have to get rid of some padding.

.gr-top .gr {

padding-left: 0!important;


}


Reset all styling!


Now comes a little trick to get rid of all styling all at once: *. We will use the universal selector aka the asterisk to clear the CSS.
The main concern here is about backgrounds, borders, margin and padding. We just want to remove them all at once and save us the hassle of figuring out which class has which border and background color and margin and padding only to get rid of it.

* {

background: transparent;


border: none;


margin: 0;


padding: 0;


}


Optimise the title styling.


The title of a journal is a h2 headline that contains a link. Not styling the link will make the headline the default dA link color, no matter what color you tell the h2 to have. Not styling the headline may cause issues while writing a new journal entry, as the title is a text field and not a link at that point.

However we do need to enter all styling that refers to the position, size or background of the title into it's own line, so values are not added up and possibly double resulting in headaches for why something doesn't work.

Anything regarding the title text should be defined in the combined selectors.

.gr-top .gr h2{}

.gr-top .gr h2, .gr-top .gr h2 a {}




Optimise the body styling.


One thing that changed with the introduction of gruze was the behaviour of the top and body of the journal. The body is always located under the top in gruze, which means, it can cover parts of the body. For example a box-shadow applied to the body won't be visible on the top of the box, because the top is always over it (even if the top has a transparent background.)

.gr-body .gr {

overflow: visible!important;


position: static!important;


}


Limit the text width for better readability!


What you also want to do, is limit the text width. I have explained why that is necessary before and it makes a lot of sense to put this into the template you are going to base your new skins on.

.gr-body .gr .grf-indent .text {

max-width: 500px;


}


Alternatively you can also change the maximum width of the whole journal. To keep the journal horizontally centered, you have to write one more line of code, to keep everything in place.

.gr-box {

max-width: 500px;


margin: 0 auto;


}


No matter how wide you want your journal to be, it is necessary to set at least a max-width for the .text to make it easy for people to read the journal!


Remember the :hover effects!


The title and comment count are both links, and you should always remember to style their hover effects, so users know they can click them. So, stick those lines into your template and it will remind you to style :hover effects.

.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-top .gr h2 a:hover {}

.gr-body .gr .grf-indent .bottom a {}
.gr-body .gr .grf-indent .bottom a:hover {}


Grab the Template


Simply copy paste the following CSS code and use it as a template for future Journal Skins.

* {

background: transparent;


border: none;


margin: 0;


padding: 0;


}

.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {

display: none;


}

.negate-box-margin {}

.gr-box {}

.gr-top {}

.gr-top .gr {

padding-left: 0!important;


}

.gr-top .gr h2{}

.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-top .gr h2 a:hover {}

.gr-top .gr span {}

.gr-body {}

.gr-body .gr {

overflow: visible!important;


position: static!important;


}

.gr-body .gr .grf-indent {}

.gr-body .gr .grf-indent .text {

max-width: 500px;


}

.gr-body .gr .grf-indent .bottom {}

.gr-body .gr .grf-indent .bottom a {}
.gr-body .gr .grf-indent .bottom a:hover {}


Okay, so this is our blank dA Skin CSS template. Copy paste it as you like and enter your own styling into this to create new custom skins.

Skin-breakdown-template by pica-ae

This is how the journal will look like, when you apply the template CSS as Journal Skin. (The background is the color of the page, the skin background itself is transparent.)


And that's it. Became a bit longer than I figured it would, but I thought when I am already at it, I may cover it as good as I can and in as much detail as I can :meow:

Do not hesitate to ask me questions if you don't understand anything or want clarification!



I don't generally bite :)

Coming up?


Since this is really just the bare minimum of how the journal HTML is built up, there are a few more things you want to style: links, headlines, blockquotes, paragraphs, lists, thumbs and so on.
Most of these elements are regular HTML elements, except for deviation thumbs. They are a custom class created by dA and work more complicated that just simple image links.

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

:new: updated for issues with title styling 




Breaking down the journal layout!
Here is an overview of the HTML elements a journal is built up from and a template for the CSS to style them. You are welcome to copy paste what I provide and base your new skins on it. The HTML "belongs" to dA, as well as the original skin and I simply providing the names and a blank CSS for you. 

This is really ONLY the layout, how to style thumbs or other things you can put into the content is not covered! May follow later :)


Other helpful deviations


.:Blog Journal Structure by ginkgografix .:Ungruze your journals by ginkgografix dA Piece by Piece : CSS + Box by ziinyu Gruze Style Journal CSS - a guide by kuschelirmel-stock Gillian's Ultimate CSS Template by GillianIvy Ultimate Box Model Snippet by GillianIvy

If there is something you want to know/learn about regarding journal skins and/or CSS/HTML, let me know and I will add it to future tutorials La la la la
I am always looking for ideas for new tutorials and by knowing what you want to learn, I can do so in a much better way :XD: 

I actually had one other tutorial planned and 80% written before I started this and input for other tutorials, but yesterday I decided to do this :B Don't ask :paranoid:



Previous CSS Tricks


:bulletgreen: Limiting .text width




Any questions? Just ask :eager: by darkmoon3636

I hope you like this and find it helpful Heart Peace
Add a Comment:
 

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconbiacat:
BIacat Featured By Owner Jan 3, 2017  Hobbyist Digital Artist
Hello !!! First of, I would like to thank you for this wonderful journal !
Now, I've got a little problem, and maybe you could help me ? ;o;

My problem is that blockquotes, aswell as
(<-hr>) 
lines are not appearing in my journal...
PS, here's the CSS of my journal ! Journal CSS
Reply
:iconthemoonfall:
TheMoonfall Featured By Owner Sep 7, 2016  Hobbyist General Artist
I've been looking at so many different tutorials, and everything so far has just confused me. But THIS, this I can actually understand! I'm actually going to try and start making journal skins now. :) Thank you so much for sharing!
Reply
:iconmidmist:
MidMist Featured By Owner Aug 12, 2016  Student Digital Artist
Is there any way of removing the timestamp? I really need to know, thanks for this btw!
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 13, 2016  Professional Interface Designer
Yes, that is possible. Anywhere in the CSS you have to add this line:
.gr-top .gr span {display: none;}
The span element contains the time stamp. If you write it like this, it just won't show up. 
Reply
:iconmidmist:
MidMist Featured By Owner Aug 13, 2016  Student Digital Artist
This did not seem to work. Would it be okay if I messaged you my coding? Maybe you can see what's wrong with it.
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 13, 2016  Professional Interface Designer
Sure, no problem.
If you have a journal with the skin in sta.sh I can look at it there, too.
Reply
:iconmidmist:
MidMist Featured By Owner Aug 13, 2016  Student Digital Artist
I do! Here you go!

Welcome To My DA!
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 13, 2016  Professional Interface Designer
Ah, the skin is still using the old element names, that's why my line didn't work. 

This way may work, now:
.journaltop span {display: none;}

It may not work, in which case a different approach might be better, but more complicated:

.journaltop {color: transparent;}
.journaltop h2 {color: #88bfff;}

That way sets the text color of the header transparent, but you do need to separately set a color for the h2 or it won't be visible, too.
The h2 seem to already have a color value, so just setting the text color transparent should definitely do the trick.
Reply
:iconmidmist:
MidMist Featured By Owner Aug 13, 2016  Student Digital Artist
Where in the code do I place these?
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 13, 2016  Professional Interface Designer
That depends on the skin. You can go look for .journaltop in the CSS that you have and paste it right after that, or you can just add those two lines at the very end of the CSS. 
Reply
(1 Reply)
:iconpaintausea:
paintausea Featured By Owner Edited Apr 17, 2016  Hobbyist Digital Artist
Hello..!
Is there a way to disable the comment section and visibility of the journal skin?


Nevermind! I found a way to cheat around it ;P
Thank you anyways though! '◡'
Reply
:iconaterlux:
AterLux Featured By Owner Feb 10, 2016  Hobbyist Digital Artist
pastebin.com/Jix7sGwM I would like to ask how with my code I would make an image overlay the body  over the text cause it always ends up being behind the text
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 20, 2016  Professional Interface Designer
I am glad it is helpful :)

I usually create these tutorials in sta.sh writer, when submitting you should be able to pick Literature and other text deviations, such as tutorials, as categories to submit to.
It may not work if you are using html to insert images into the text, though. At least that is an issue I used to have. 
Reply
:iconttobserve:
ttobserve Featured By Owner Apr 21, 2016
...an issue I used to have...

Yes; DA software is getting gradually more inclusive.
For years, I’ve been posting literature as “Journal Entries”
simply because the Journal Entry category allows me to do more formatting.
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 23, 2016  Professional Interface Designer
I've worked around that by entering the images via CSS (or adding them with html after submission)

Yeah, literature did only allow the same formatting as comments, but it's better now. 
Reply
:iconmy7hicr4r3:
My7hicR4r3 Featured By Owner Nov 17, 2015  Student General Artist
Thanks for sharing your CSS tricks! I've been wanting to style my own journal for a while now but was clueless on where to start because I didn't know what DA marked as a class or ID in their html with respect to journals. I know that you mentioned some CSS 3 features like box-shadow, but do you know if journals will let me alter opacity on some of the elements? Or is there a reference that I could look at that will tell me what CSS 3 features that da journals can use? 
Reply
:iconpica-ae:
pica-ae Featured By Owner May 3, 2016  Professional Interface Designer
I am glad it is helpful :)
Unfortunately DA does not provide the information as to what CSS3 features are possible and what not. You can only try and see if it works. 
Reply
:iconmy7hicr4r3:
My7hicR4r3 Featured By Owner May 18, 2016  Student General Artist
Yeah, that's what I've been doing. 
Reply
:iconcoderichard:
CodeRichard Featured By Owner Apr 21, 2015
Thanks for this very useful resource! The list of classes and the hierarchy is very useful to have. :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 8, 2015  Professional Interface Designer
I am glad it is :) :hug: Thanks! 
Reply
:iconrazata:
Razata Featured By Owner Mar 30, 2015  Student Digital Artist
This is probably a super noob question, but is there a way to stretch the background to fit the text? I'll sometimes test a really long journal and the text will just go off the bottom and overlap with the mood stuff?

Is there also a way to add a kinda text-box background thing? Like a content-holder box in the journal skin?
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 31, 2015  Professional Interface Designer
It's alright, I was a noob once, too ;) 

That sounds a bit odd, to be honest, because the journal should always be at least as long as its content, so that may be an issue with the skin you are using. I'd have to see an example to really know what's going on to cause that. If the journal has a max-height somewhere, that could cause it. 

You can create custom containers in a skin/journal entry. I am explained it with background images in this tutorial: CSS Tricks: Background Images, but it does not specifically talk about custom boxes. (I am planning a tutorial that does explain it, it just isn't done yet :noes:)

Basically what you need is a custom class in the CSS, something like
.text-box {}
and then the HTML in the journal text
<div class="text-box">…</div>
And whatever styling you add in the CSS, like background images, will show up in the HTML. It's important to do this in stash writers HTML mode.

I hope his helps :)
Reply
:iconrazata:
Razata Featured By Owner Apr 5, 2015  Student Digital Artist
Thanks so much!
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 7, 2015  Professional Interface Designer
No problem :) 
Reply
:iconthemaideninblack:
TheMaidenInBlack Featured By Owner Nov 30, 2014
This article is really amazing, but there's one thing I don't understand. What is this? 

.negate-box-margin {}

You mention not to take it out at anytime, but not really explain why.

One other thing: where you list all the element of the gruze style journal, and under the image explain that the indent is to show the stacking of the elements, I thought that with "indent" you were referring to the word "indent" present in some of the classes (which by the way, those aren't explained either and I have no idea what they are :giggle: I will test them to see what they change, but I think it might be useful for readers in general to know it since you're mentioning them). That could be clarified. (:

Thank you for this incredible resource.
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 1, 2014  Professional Interface Designer
As for .negate-box-margin it's what ginkgografix said :) it's a "new" class, that covers the whole journal. I have used it in my skins when I wanted to have an extra background image as journal skins on dA do not allow more than one background per class (as opposed to regular CSS).
And by "taking out" I meant if you don't want to style the class, you don't have to do anything with it. But if you add "display: none;" the whole journal will disappear indeed. 

As for extra classes, that I don't mention, lots of them are called .gr and don't really have any styling and sometimes refuse to be styled. For example if you add a background image to .gr-box .gr it conflicts with background images in .gr-box. Those classes can't do any harm to a skin, and as such can easily be neglected. Same thing with all the .grf-indent classes, they don't have to be styled, but at the same time that should not be set to "display: none;".

And yeah, I should have maybe said indentation, instead of indent. Less confusing then :lol: Luckily I can edit the deviation :giggle:

:huggle: Thank you ^^
Reply
:iconthemaideninblack:
TheMaidenInBlack Featured By Owner Dec 4, 2014
:giggle: yeah, that isn't something I would want to do.

Very nice explanation, thank you.

:XD: yes, indentation works!

Thank you for this useful resource! :heart:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 7, 2014  Professional Interface Designer
:hug: no problem ^^ 

I have proofreaders, but sometimes I am too excited and publish something before they can check it :lol: 

:love: 
Reply
:iconthemaideninblack:
TheMaidenInBlack Featured By Owner Dec 9, 2014
:giggle: I totally understand.
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 10, 2014  Professional Interface Designer
:highfive: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 1, 2014
.negate-box-margin is a general wrapper of the journal skin, all journal elements are part of it. If you use 'display: none;' there, your journal will vanish :B
Reply
:iconthemaideninblack:
TheMaidenInBlack Featured By Owner Dec 1, 2014
:la: TOTAL DESTRUCTION.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 1, 2014
:lmao:
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 19, 2014  Hobbyist Artist
This is awesome! :la: 
Very comprehensive and nicely laid out!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 20, 2014  Professional Interface Designer
Thank you :aww: :huggle: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 18, 2014
I like this, but I got no hugs :saddummy:
And those hover effects where you explain all the single classes/elements are sexy, as is the whole box! Personally I am not a fan of *{...} because especially for lists it's annoying if you have to style them completely. I just rest a few classes completely.


"But the default journal skin for coders is not the same as the an unskinned journal entry" <- you might need to remove either 'the' or 'an' here.


Oh... and of course we always remember everything and write it from scratch! 8-) *cough*
Reply
:iconthemaideninblack:
TheMaidenInBlack Featured By Owner Nov 30, 2014
HERE, I WAS ORDERED. :hug:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 1, 2014
:heart:
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 19, 2014  Hobbyist Artist
:tighthug: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 20, 2014
:love:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 19, 2014  Professional Interface Designer
Oh noes, no hugs? Scandalous :noes:  here you go :tighthug:

Thank you :aww: :huggle:

I've not known *{…} for that long, and I read that it may increase loading times of pages, but I figure since it's restricted to the journal by DA anyway, it wouldn't cause too much harm. As for lists, I style them competely anyway now, so I guess I am oblivious to that :B 

Corrected that, I had no proofreader :meow: 

Of course we do :iconlikeasirplz: :paranoid: 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 20, 2014
:w00t:

Yeah, if you style them completely no matter what, then it makes sense to use it. :nod:
Reply
:iconkjherstin:
Kjherstin Featured By Owner Jun 18, 2014
So cool how you wrote this journal
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 19, 2014  Professional Interface Designer
Thank you :aww: :huggle: 
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Edited Jun 17, 2014  Hobbyist Writer
Very very helpful! I started writing up something similar a few days ago for me to reference that has some more for you (it's incomplete, but I intend on completing it here in a week or two; any help with it appreciated! ;) ): sta.sh/0qxt62z8mw9

The newest one I've learned of on that list is .da-media[mobile] which is a neat trick for changing journal CSS to adapt to mobile versions when the normal CSS doesn't translate well to mobile viewing.

I still start from that template you gave me a year or two ago. It was the best thing that happened to me as far as creating skins go was having a place to start. :heart: Been meaning to look at creating a template more for myself, which is how that "Master List of Selectors" was born, for me to use as a reference when making it.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 18, 2014  Professional Interface Designer
Cheat sheets are awesome :B I actually didn't find all the .gb stuff but I didn't notice anything by not doing anything with it :shrug: 

Yeah, I have used the mobile option, but only on one or two skins so far. I've used it on this skin fav.me/d7j1ih2 to get rid of the background images in smaller resolutions :nod: 

:huggle: 

In my templates, I also have a set of custom classes I created, as well as classes for all kinds of thumbs, and all the text styling you can use, like blockquotes, headlines, paragraphs, lists etc. 
I will try to put all those in the nest tutorial :D 
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Jun 18, 2014  Hobbyist Writer
Awesome! :eager:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 19, 2014  Professional Interface Designer
:XD: 
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae


Featured in Collections


More from DeviantArt



Details

Submitted on
June 17, 2014
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
3,867
Favourites
168 (who?)
Comments
70
×