HOME | DD
toonham —
deviantART Journal CSS Explanation
by-nc
Published: 2012-03-30 14:53:18 +0000 UTC; Views: 19264; Favourites: 861; Downloads: 283
Redirect to original
Description
A quick-handy guide to the CSS involved with making a journal skin. The selectors are listed with a brief explanation of the elements they deal with.Written in Notepad++ and made presentable via Photoshop.
Journal HTML Guide:
Gallery CSS Guide:
Theme:
EDIT: A DD!?!?! Thanks so very much everyone!
Related content
Comments: 112
No problem! I'm glad you found it useful!
👍: 0 ⏩: 0
god bless you, i was wondering if it used normal coding
👍: 0 ⏩: 1
I remember a lot of bizarre html to sort through. I haven't checked how much it has changed in 4 years.
👍: 0 ⏩: 0
It's more of a reference to show how to style specific parts of the journal.
👍: 0 ⏩: 0
Thank you so much for this! This will be so helpful!
👍: 0 ⏩: 1
You can also add this :
.journalbox .journaltext img {
/*------ Deviations in full size when displayed within a journal -------*/
}
👍: 0 ⏩: 0
This will come be REALLY handy! Thank you so much for this 
👍: 0 ⏩: 1
im leanring CSS but the red parts are just confusing the shit out of me
👍: 0 ⏩: 1
The red text are the names of the classes (selectors) for the html objects on the page. A period is placed in front of a 'class' name and a number sign (#) is placed in front of an ID. According to deviantArt's rules, I think you are only allowed to reference class names for your own CSS.
👍: 0 ⏩: 1
ooooooh yeahhhhhhhhh
I should know that (the thing about selectors)
*facepalm*
Thanks!
👍: 0 ⏩: 1
No problem! I'm glad to help!
👍: 0 ⏩: 1
Does this still work on new-style journals? I don't see any of these CSS classes when I inspect my journal entries. Instead, I had to use classes like .gr, .gr-top, .gr-body, .text, and such.
👍: 0 ⏩: 1
I was not aware that the journal style has changed. I made this just over a year ago while looking at the current style of the time.
If you are seeing those classes that you listed, then my guide is likely not relevant.
👍: 0 ⏩: 0
This is *SO* handy thanks
👍: 0 ⏩: 1
You're welcome! It's almost been a year so I should check to see if anything has changed.
👍: 0 ⏩: 0
Thank you so much! The number of hours I've spent trying to find a list of CSS functions for the DA journal and looking at Firebug but not getting anywhere. I really don't know why DeviantART doesn't have this information in it's help section. Instead it has some useless tutorial about how to click "install journal" if you have a premium account...
So so thankful
👍: 0 ⏩: 1
You're very welcome! I'm really glad that this is helpful for people!
👍: 0 ⏩: 1
I'm confused D:
what parts do you have to draw and where do you put it all together...?
👍: 0 ⏩: 1
Now you're confusing me... D:
Do you mean the actual journal css or this artwork specifically?
👍: 0 ⏩: 1
all of it lol...
I don't know what parts to draw, how big to make them, and where to put all the drawings and the ccs codes all together
👍: 0 ⏩: 1
Ah. I can't really say since much web design is trial and error.
👍: 0 ⏩: 0
Thanks for making this. Words cannot express how valuable a resource this has been in my recent project to make a journal skin of my own.
👍: 0 ⏩: 1
This has helped me so much while I've been editing my journal skin! I have a couple questions if you don't mind; How can I set the height and width of the text margin (you know, the box that limits the text so I can keep it in a certain space) And how can I set the height and width of the journal skin itself? I notice that the size outcome depends on the length of the journal description. It's automatically cropped with smaller descriptions which is annoying because I want the entire image to show permanently.
Thank you! :-D
👍: 0 ⏩: 1
The margins can be set inside ".journalbox .journaltext"
As for the size of the skin, that is done in ".journalbox"
👍: 0 ⏩: 1
How do you change the font of the text inside the entry? Can you do that?
👍: 0 ⏩: 1
Yeah, it can be done.
You add "font-family: [Insert font name here]" to the block ".journalbox .journaltext" and that should do it.
👍: 0 ⏩: 1
Thanks a bunch. I'm getting ready to start drawing a design, so this will help. I'll be sure to credit you!
👍: 0 ⏩: 1
how did you figure all this out? D: it's so useful! thanks!
👍: 0 ⏩: 1
I do stuff similar to this for work. Also, I did a lot of testing.
👍: 0 ⏩: 1
Lol
So you just started to try random names until it worked?
Anyways, thanks! : D
👍: 0 ⏩: 1
Nah. I looked at the source code and played around with the elements to see how they behaved.
👍: 0 ⏩: 1
Oh!
Good idea. I should have thought about that... Orz
So lame.
👍: 0 ⏩: 1
is there a way you could send me all this through a note, please?
👍: 0 ⏩: 1
| Next =>