Shop Mobile More Submit  Join Login
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:
 
:iconpantran:
PanTran Featured By Owner Mar 14, 2015  Student General Artist
I made a journal skin with this! :D Orange Soda Journal Skin by PanTran
Reply
:iconwingsz:
wingsz Featured By Owner Jan 31, 2015
How do I replace the "talent" text with .gr-top span{
Journal date.
}
on this journal skin?
dA Comment Skin
Reply
:iconlechaoss:
LeChaoss Featured By Owner Dec 7, 2014  Student Traditional Artist
AWESOME! VERY! I"D LOVE TO MAKE ONE! :D
Reply
: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
:iconcuppiegoku:
CuppieGoku Featured By Owner Aug 29, 2014  Hobbyist 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
:iconleo-ascendent:
Leo-Ascendent Featured By Owner Oct 16, 2013
Yes there is, that would explain it. 

:iconderpplz:
Reply
:iconjust-to-look1:
Just-To-Look1 Featured By Owner Aug 9, 2013  Student Traditional Artist
What do you put within the brackets? Could you tell me? :confused:
Reply
:iconizagar:
Izagar Featured By Owner Aug 12, 2013  Hobbyist General Artist
That's how CSS is.

So you would make the box like:

.gr-box{
width: 500px;
background-color:#000;
color:#fff;
border: solid 1px #ccc;
}
Reply
:iconprorimz:
ProRimz Featured By Owner Aug 4, 2013  Hobbyist Digital Artist
Umm.. How do you add this to the journal? And do you add all of it, or only some part of the code?
Reply
:iconhhorseace:
hhorseACE Featured By Owner Aug 12, 2013  Hobbyist Digital Artist
When you submit a journal, on the side are all the skin choices right, and there is a small button saying 'Edit Skin' and there you put the coding :la:
Reply
:iconprorimz:
ProRimz Featured By Owner Aug 13, 2013  Hobbyist Digital Artist
Thanks! :D
Reply
:iconyaitilia:
Yaitilia Featured By Owner Jul 21, 2013  Professional General Artist
I don't know anything of CSS, neither HTML.
I'll try, anyway.
Reply
:iconwarriorcatmaster:
WarriorCatMaster Featured By Owner Jul 3, 2013  Hobbyist Filmographer
I can't get the li.f one to work -_-.
Reply
:iconchestery:
chestery Featured By Owner Jun 28, 2013  Hobbyist General Artist
wow thanks this is real useful ^^
Reply
:icontoasty-marshmallow:
Toasty-Marshmallow Featured By Owner Jun 2, 2013  Student Digital Artist
You are a beautiful person for making this! Many thanks!
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Mar 31, 2013  Hobbyist Digital Artist
Thanks for this :)
Reply
:iconredspiderlillies:
redspiderlillies Featured By Owner Mar 30, 2013  Hobbyist Traditional Artist
Do you know how you can put a large header image on a journal skin, like on this one here? [link]
Reply
:iconfallingwithoutstyle:
FallingWithoutStyle Featured By Owner May 31, 2013  Student Writer
If he tells you think you can send a message my way? I was wondering that as well.
Reply
:iconredspiderlillies:
redspiderlillies Featured By Owner Jun 1, 2013  Hobbyist Traditional Artist
Well, I think you can just use the <img src="image url here"> tag in the journal header, but that dosen't always look so good... You might want to see if you can see what the CSS of some other downloadable journal skins looks like, just to see how they do it...
Reply
:iconfallingwithoutstyle:
FallingWithoutStyle Featured By Owner Jun 1, 2013  Student Writer
I found this if it helps [link]
Reply
:icondoctor-fluffikins:
Doctor-Fluffikins Featured By Owner Nov 30, 2014  Hobbyist Digital Artist
that almost gave me a heartattack, my headphones are super loud
Reply
:iconcupcakekitten20:
cupcakekitten20 Featured By Owner Mar 25, 2013
You can copy and paste this right into your journal without editing anything. The notes between "/ *these*/" are invisible in css coding. Now you can have permanent notes in your coding! :heart:

code
--------------------------------------------------------------------------


/*Container for the whole journal*/
.gr-box{}

/*The container where the date and title is*/
.gr-top{}

/*Journal book image*/
.gr-top h2 img{}

/*Journal title*/
.gr-top h2{}

/*Journal date*/
.gr-top span{}

/*Where the text of your journal is*/
.gr-body, .text{}

/*Arrow pointing down blow the gr-top*/
.tri{}

/*Top/bottom rounding bar*/
.gr1{}

/*Makes the journal rounded*/
.gr2{}

/*Makes the journal rounded*/
.gr3{}

/*Links*/
a{}

/*Links hover*/
a:hover{}

/*Journal Comments and previous journals links*/
.commentslink, .prevlink{}

/*the horizontal line "|" between comments and previous journals*/
.hsep{}

/*The container for your Journal Comments and previous journals links*/
.bottom {}

/*container for
Mood:
Listening to:
Reading:
Watching:
etc:*/
.list {}

/*you can change the color to make it like a bar so its easier to read*/
li.f{}

/*you can change the color to make it like a bar so its easier to read*/
li.a{}

/*color just for
Mood:
Listening to:
Reading:
Watching:
etc:*/
strong{}

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

/*The Thumbnail image*/
.shadow-holder img{}
Reply
:iconcupcakekitten20:
cupcakekitten20 Featured By Owner Mar 20, 2013
This is perfect. Thank you for writing all the codes down so we can copy and paste them. Explaining what each does and visually showing it up top helped so much too :+favlove:!!!!!!!
Reply
:iconcupcakekitten20:
cupcakekitten20 Featured By Owner Mar 20, 2013
I will try to use and will suggest a DD for you. This was very nice to put together. Is this still accurate for 2013?
Reply
:iconsekaryu:
Sekaryu Featured By Owner Mar 6, 2013  Hobbyist General Artist
Hi.. I recently bought a journal skin from someone.. and they aren't very good with coding.. so the code they sent me for it is all messed up! If I sent you the code, would you be able to fix it for me? I appreciate it~
Reply
:iconwillclark218:
willclark218 Featured By Owner Feb 20, 2013  Hobbyist Digital Artist
an excellent source for people who want to learn basic HTML and CSS is W3C Schools... [link] These guys pretty much set the standard...
Reply
:iconmxaca1967:
mxaca1967 Featured By Owner Feb 17, 2013  Hobbyist Digital Artist
want you good how time help for so will have in sorry give love.
Reply
:iconkisekinokami:
kisekinokami Featured By Owner Feb 8, 2013  Student Digital Artist
I use the other kinds of codes (the Journalbox, journaltop and those things...) are these different?
Reply
:iconhhorseace:
hhorseACE Featured By Owner Aug 12, 2013  Hobbyist Digital Artist
I forgot where I saw it apparently there's two themes of journals 
Reply
:iconlilspiritfox:
LilSpiritFox Featured By Owner Dec 30, 2012  Hobbyist Digital Artist
im still so lost xD i attempted the code but i dont know how to see if it works or not i did CSS in high school but cant remember most of it x.x
Reply
:iconmamokin:
mamokin Featured By Owner Dec 12, 2012  Hobbyist General Artist
Is there a way to make an invisible title? or a better question would be how can I do something similar to this [link]
Reply
:iconredukins:
redukins Featured By Owner Dec 3, 2012  Hobbyist Digital Artist
and what do we paste in the { }? i feel like such a noob .n.
Reply
:iconredukins:
redukins Featured By Owner Dec 3, 2012  Hobbyist Digital Artist
what do you mean by, cointainer for the whole journal? ._.
like, all the stuff for the journal put together in one image?
Reply
:iconxshootingstarxx:
xShootingStarxx Featured By Owner Dec 1, 2012  Hobbyist General Artist
I'm still not sure how to make this.
Reply
:iconastrikos:
Astrikos Featured By Owner Nov 28, 2012   General Artist
Featured your useful resource here
Reply
:icondark-sourceress-aiya:
Dark-Sourceress-Aiya Featured By Owner Nov 21, 2012  Student Traditional Artist
I have another question, How do I pun in the image that I want for the back ground?
Reply
:icondark-sourceress-aiya:
Dark-Sourceress-Aiya Featured By Owner Nov 21, 2012  Student Traditional Artist
Thanks! This really helps!
Reply
:iconinsolentia:
Insolentia Featured By Owner Nov 9, 2012
wow, thanks a lot! *_* a great help
Reply
:iconaudramblackburnsart:
AudraMBlackburnsArt Featured By Owner Oct 2, 2012  Hobbyist General Artist
How did I get here????!!!! absolutely if i can get some r and r for the night, i might be able to do more than make something bold on my journal, lol!!!

[link]

[link]
Reply
:iconravenshiddensoul:
RavensHiddenSoul Featured By Owner Aug 24, 2012
Is there any chance you could explain the alternating lines of text on the "list" part? Some journals have them one color every other line, and the rest with different colors... How do you do that?
Reply
:iconfoxxyjones:
FoxxyJones Featured By Owner Jun 20, 2012  Hobbyist Digital Artist
Thank you so much for the tutorial! This looks like it will come in very handy.
Reply
:icondrusila333:
Drusila333 Featured By Owner Jun 17, 2012
Gorgeous! Very tasteful!
Reply
Add a Comment:
 
×


More from DeviantArt



Details

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

Stats

Views
40,516 (2 today)
Favourites
1,471 (who?)
Comments
285
Downloads
763
×