Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
37,207 (8 today)
Favourites
1,409 (who?)
Comments
277
Downloads
739
×
Journal Tutorial -copyable CSS by Neg0ne Journal Tutorial -copyable CSS by Neg0ne
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:
 
:iconlucynickbakura:
LucyNickBakura Feb 16, 2014  Student Filmographer
hey, i was curious about "blockquote" tag...its tag, isn't it? Does it go in .gr-body, .text{ container?
Reply
:iconretsamys:
RetSamys 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 Jan 14, 2014  Hobbyist General Artist
super useful, thanks!
Reply
:iconcocooning:
Cocooning Jan 12, 2014  Hobbyist Traditional Artist
thaaaaaaaank youuuu <3
Reply
:iconanapests-and-ink:
anapests-and-ink Jan 4, 2014  Hobbyist Writer
This is so handy!  Thank you so much for sharing it!
Reply
:iconleo-ascendent:
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:
Yes there is, that would explain it. 

:iconderpplz:
Reply
:iconjust-to-look1:
Just-To-Look1 Aug 9, 2013  Student General Artist
What do you put within the brackets? Could you tell me? :confused:
Reply
:iconizagar:
Izagar 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 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
Add a Comment: