[x]

Browse More Like This

Download Image
PNG, 700×600 more ▶

More from ~Neg0ne

View Gallery · View Prints

Featured in Groups:

#dAmnU
Childish & Innocent

#journalcss
Quality Journal CSS

#deviantCSS
deviantART XHTML & CSS Ref

#eCSSited
a place for all your CSS needs

#iterators
We iterate!

#JournalSkin
Quality journal skins

#dA-Dictionary
Tips and Tricks about using dA

#PhotoArtography

Details

Submitted: September 23, 2009
Image Size: 241 KB
Resolution: 700×600

Link

Thumb

Statistics

Comments: 257
Favourites: 1,144 [who?]
Views: 30,974 (17 today)
Downloads: 686 (0 today)

[x]

Journal Tutorial -copyable CSSby ~Neg0ne

Resources & Stock Images / Tutorials / deviantART Tutorials

I WANT TO SEE YOUER JOURNAL LAYOUTS YOU MAKE!!!!! ::

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...

_{Below is the complete CSS for the dA Journal.}

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!

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

_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!}

love 6 6

joy 9 9

~~wow 0 0~~

mad 1 1

~~sad 0 0~~

~~fear 0 0~~

~~neutral 0 0~~

*serafina-rose Mar 31, 2013 Hobbyist Digital Artist

Thanks for this

=Moongirl29 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]

=cupcakekitten20 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!

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{}}

=cupcakekitten20 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

!!!!!!!

=cupcakekitten20 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?

=Sekaryu 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~