Shop More Submit  Join Login
×


More from deviantART



Details

Submitted on
September 23, 2009
Image Size
241 KB
Resolution
700×600
Link
Thumb
Embed

Stats

Views
39,189 (2 today)
Favourites
1,448 (who?)
Comments
281
Downloads
756
×
Journal Tutorial -copyable CSS by AskGooroo Journal Tutorial -copyable CSS by AskGooroo
I WANT TO SEE YOUER JOURNAL LAYOUTS YOU MAKE!!!!! ::gallery::

To learn html/css go here [link] . I will not teach you code from scratch, I can "help" people who know at lest some html/css but I am not a teacher...


:devart: Below is the complete CSS for the dA Journal. :devart:

I made this because it's very hard to find a good tutorial for this that is just easy, simple, and provides the codes you need to create your own custom journal, I hope you like it! suggest it for a Daly Devision if you do! :D


:bulletblue:Note:
Please if you put this tutorial anywhere on the site give me full credit. No credit needed for the codes below!

:bulletred:Code:
--------------------------------------
.gr-box{
Container for the whole journal.
}
.gr-top{
The container where the date and title is.
}
.gr-top h2 img{
Journal book image.
}
.gr-top h2{
Journal title.
}
.gr-top span{
Journal date.
}
.gr-body, .text{
Were the text of your journal is
}
.tri{
Arrow pointing down blow the gr-top.
}
.gr1{
Top/bottom rounding bar.
}
.gr2{
Makes the journal rounded.
}
.gr3{
Makes the journal rounded.
}
a{
Links.
}
a:hover{
Links hover.
}
.commentslink, .prevlink{
Journal Comments and previous journals links.
}
.hsep{
the horizontal line "|" between comments and previous journals
}
.bottom {
The container for your Journal Comments and previous journals links.
}
.list {
container for
Mood:
Listening to:
Reading:
Watching:
etc:
}
li.f{
you can change the color to make it like a bar so its easier to read.
}
li.a{
you can change the color to make it like a bar so its easier to read.
}
strong{
color just for
Mood:
Listening to:
Reading:
Watching:
etc:
}

*/this is the code for when you display thumbnails/*
.shadow-holder{
Thumbnail container.
}
.shadow-holder img{
The Thumbnail image.
}

--------------------------------------
Have fun and don't forget to leave a comment if you use this!
Add a Comment:
 
:iconaskgooroo:
AskGooroo Featured By Owner Sep 2, 2014  Professional Digital Artist
I wish I had premium again :( if only I didn't need premium to have a journal layout!
Reply
:iconfidelstar-chan:
Fidelstar-chan Featured By Owner Aug 29, 2014  Professional Digital Artist
aww thank you for this! 
i sure will use this now! :D
Reply
:iconmarcosdediego:
MarcosDeDiego Featured By Owner Jun 25, 2014  Hobbyist General Artist

thank you for the tutorial


i was making a custom journal and i couldn't find the devianArt.css classes



now you made me a new .css man!!!!

Reply
:icondemongiuloreen:
DemonGiuloreen Featured By Owner Jun 20, 2014  Professional Digital Artist
Thank you for making this! I will do my own journal skin for my future Premium Membershiiiiip! :rose:
Reply
:iconlucynickbakura:
LucyNickBakura Featured By Owner Feb 16, 2014
hey, i was curious about "blockquote" tag...its tag, isn't it? Does it go in .gr-body, .text{ container?
Reply
:iconretsamys:
RetSamys Featured By Owner Mar 15, 2014  Hobbyist General Artist
It is tag.
You mean if you want to change the style of any blockquote used in the main journal text? Kinda. It would be:
.gr-body .text blockquote{

Which corresponds to 'address everything in blockquote, as long as it also is in the box with the class called "text", as long as it is also in the box with the class called "gr-body"'. =)
Reply
:iconlimegreenfay:
LimeGreenFay Featured By Owner Jan 14, 2014  Hobbyist General Artist
super useful, thanks!
Reply
:iconcocooning:
Cocooning Featured By Owner Jan 12, 2014  Hobbyist Traditional Artist
thaaaaaaaank youuuu <3
Reply
:iconanapests-and-ink:
anapests-and-ink Featured By Owner Jan 4, 2014  Hobbyist Writer
This is so handy!  Thank you so much for sharing it!
Reply
:iconleo-ascendent:
Leo-Ascendent Featured By Owner Oct 16, 2013
I'm hoping that someone will be able to help me.

My journal seems to be wider than it needs to be (leaving a big gap between it and the side of the webpage when looking at my main page). Is there a size requirement for journals? I believe my journal to be maxed at 500px. If someone could note me and help, I'd be willing to throw some points at you for the assist.

Thanks much.
Reply
Add a Comment: