literature

CSS Tricks: Journal break-down

Deviation Actions

pica-ae's avatar
By
Published:
14K Views

Literature Text

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.

: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
© 2014 - 2022 pica-ae
Comments78
Join the community to add your comment. Already a deviant? Log 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!