AskGooroo on DeviantArthttps://www.deviantart.com/askgooroo/art/Journal-Tutorial-copyable-CSS-138027199AskGooroo

Deviation Actions

AskGooroo's avatar

Journal Tutorial -copyable CSS

By
Published:
52K Views

Description

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!
Image size
700x600px 240.67 KB
© 2009 - 2024 AskGooroo
Comments292
Join the community to add your comment. Already a deviant? Log In
EmptyShadow's avatar
Wow this is actually extremely helpful. A lot of tutorials just paste codes but doesn't explain it fully. Thank you!