Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:icongriffsnuff: More from griffsnuff


More from deviantART



Details

Submitted on
November 28, 2012
Link
Thumb

Stats

Views
7,582 (4 today)
Favourites
463 (who?)
Comments
103
×

Journal CSS code that I use!

Wed Nov 28, 2012, 12:01 PM
durr snurr

Here is the code I use for my simple sauce journal. The original artist who made it took it down, so im sharing it.

Hopefully it will work haha.

--------------
how to change the colors in the journal

To change the colors of the journal, change the codes that look like this "#A6B2A6" this is a color code. two first are Red values, two middle ones are green values, and the last two are blue values. RGB.

If you make everyone of them the same letter or number you will get grey.

000000 = Black
FFFFFF = White
FF0000 = Red
00FF00 = green
0000FF = Blue

The colors darkest to lightest is
1-2-3-4-5-6-7-8-9-a-b-c-d-e-f

how to add a background

You need to change the word "link" with an actual link haha.
Which is were you change the background image if you use one.
----------------
Copy the code under and paste it in your journal skin

* {
   border:none;
   margin:0;
   padding:0;
}
.journalcontrol {
   font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif;
   line-height:22px;
   margin-bottom:10px;
}
.gr-box {
   border:1px solid #A6B2A6;
   background: url(i50.photobucket.com/albums/f30… repeat top left;
   margin-bottom:20px;
   -moz-border-radius:6px 6px 6px 6px;
   -webkit-border-radius:6px 6px 6px 6px;
}
.tri {
   display:none;
}
.gr1 {
   display:none;
}
.gr2 {
   display:none;
}
.gr3 {
   display:none;
}
.gr-top {
   background:#2B2B2B;
   border-bottom:1px solid #9ca69a;
   height:35px;
   margin-bottom:20px;
   padding:8px 0px 8px 0px;
   width:100%;
   -moz-border-radius:6px 6px 0px 0px;
   -webkit-border-radius:6px 6px 0px 0px;
}
.gr-top .gr {
   background:none!important;
   margin:0 auto;
   width:600px;
}
.gr-top h2 {
   color:#fff;
   font-size:14px;
   margin-left:-15px;
}
.gr-top h2 a {
color:#fffff;
}

.gr-top h2 img {
   display:none;
   height:1px;
   width:1px;
}
.gr-top span {
   color:#494A4A;
   font-size:12px;
   margin-left:-15px;
}
.gr-body {
   background:none!important;
   margin:0 auto;
   width:455px;
}
.text {
   background:#fff;
   border:1px solid #9ca69a;
   color:#888888;
   font-size:14px;
   line-height:24px;
   padding:20px;
}
.text a {
   color:#f17557;
   padding:3px 5px 3px 5px;
   text-decoration:none;
}
.text a:hover {
}
.text a img {
   border:none;
}
.text .article-image {
   float:left;
   margin:0px 10px 5px 0px;
}
.text ul {
   margin:20px 20px 20px 20px;
}
.text ol {
   margin:20px 20px 20px 20px;
}
.text ul li {
   margin-bottom:5px;
}
.text ol li {
   margin-bottom:5px;
}
.bottom {    
   background:#fff;
   border:1px solid #9ca69a;
   color:#888888;
   margin:20px 0px 20px 0px;
   padding:10px;
}
.bottom a {
   color:#1EA5BE;
   text-decoration:none;
}
.bottom a:hover {
   text-decoration:underline;
}
.list {
   background:#fff;
   border:1px solid #9ca69a;
   color:#888888;
   font-size:12px;
   margin:20px 0px 20px 0px;
   padding:10px;
   text-align:center;
}
.list li {
   background:#fff;
   margin-bottom:5px;
}

Gingerbread snuffen!

FAQ's commissionstumblr
  • Drinking: BURN
Add a Comment:
 
:iconalorinel:
Alorinel 2 days ago  Student Digital Artist
Thank you so much for this!
Reply
:iconanamaycat:
AnamayCat Oct 27, 2013  Professional General Artist
I don't understand this
I tried but it won't let me use it
Reply
:iconbrightenyoursmile:
BrightenYourSmile Jun 26, 2013  Student Traditional Artist
hi! you you think you can help?
My top image is short, so when i put the image, the top of the journal skin is transparent. how can i shorten the "height" of the top of the journal skin?

Thank you :)
Reply
:icongriffsnuff:
griffsnuff Jul 1, 2013  Hobbyist General Artist
hm not sure what you mean`?
Reply
:iconbrightenyoursmile:
BrightenYourSmile Jul 1, 2013  Student Traditional Artist
it okay, i found out :)
(it was the padding)
Reply
:iconpeking08:
Peking08 Jun 23, 2013  Hobbyist Digital Artist
How do you do this? I am so confuse.
Reply
:icongriffsnuff:
griffsnuff Jul 1, 2013  Hobbyist General Artist
you need a subscription I think x3
Reply
:iconneocu:
Neocu Jun 2, 2013  Hobbyist Digital Artist
Thank's so much Griff ;w;
Reply
:iconpuppywishes:
Yay! It worked!! Thanks! C:
Reply
:iconyunama:
yunama May 30, 2013  Student Digital Artist
i've tried to put it in several times ex. background: url([link] repeat top left;
is that how i do it?
Reply
Add a Comment: