C
literature

CSS Tricks: Journal break-down

pica-ae's avatar
By pica-ae   |   Watch
290 75 7K (1 Today)
Published: June 17, 2014
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 GinkgoWerkstatt 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.

© 2014 - 2019 pica-ae
: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
Comments75
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
RamonaKirsche's avatar
Help!I wanna change journalskins on my own journal,
with a photo of my home,but I dont understand nothing.
Also your journal is too difficult.
What is the fucking Css code,why they torture people with that,
bad enough,that core is too expensive!

Echo-Peak's avatar
Echo-PeakHobbyist General Artist
Hi is there any way to remove the timestamp? It doesn't seem to display the right time for me so if you can't delete it completely if there is some way to change the timezone or something that would be awesome because it really bugs me.

Thanks for your time~
ryeokii's avatar
They've replied in a previous comment
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. 
Jahpan's avatar
JahpanProfessional Digital Artist
How do you make those buttons under your "Previous CSS Tricks" title, along with the hover code?
craaziifox's avatar
craaziifoxStudent Digital Artist
just a quick question
how do i get the negate box underneath the like title and timestamp etc.?
MMXII's avatar
MMXIIProfessional Digital Artist
I've been able to edit some code thanks to this tutorial but I'm wondering if you could help me out with something? I don't know if this may seem weird or not but is there any way at all to remove the .journal-footer (where a.comments, span.date, a.more, a.faves) is displayed? 

I've tried several things but nothing seems to work. I don't even know if it's possible at all. I'd really appreciate your help! 
duncundog's avatar
OH MY GEESENESS, I LOVE YOU.

I have been trying to figure this stuff out, but every tutorial I find is obviously aimed at people who have some previous experience with coding, because I can't understand any of it. (I'm an excellent BB coder, but that is way easier than this stuff.)

This was so helpful to me, thank you so much. <33
LilMobear's avatar
LilMobearHobbyist Digital Artist
Is there a special coding for making your whole journal width smaller?
BIacat's avatar
BIacatStudent 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
TheMoonfall's avatar
TheMoonfallStudent 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!
MidMist's avatar
MidMistProfessional Digital Artist
Is there any way of removing the timestamp? I really need to know, thanks for this btw!
pica-ae's avatar
pica-aeProfessional 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. 
MidMist's avatar
MidMistProfessional 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.
pica-ae's avatar
pica-aeProfessional Interface Designer
Sure, no problem.
If you have a journal with the skin in sta.sh I can look at it there, too.
MidMist's avatar
MidMistProfessional Digital Artist
I do! Here you go!

Welcome To My DA!
pica-ae's avatar
pica-aeProfessional 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.
MidMist's avatar
MidMistProfessional Digital Artist
Where in the code do I place these?
pica-ae's avatar
pica-aeProfessional 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. 
View all replies
paintausea's avatar
paintauseaHobbyist 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! '◡'
AterLux's avatar
AterLuxHobbyist 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
pica-ae's avatar
pica-aeProfessional 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. 
ttobserve's avatar
...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.
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In