deviant art

Deviant Login Shop
 Join deviantART for FREE Take the Tour
[x]
more ▶

Featured in Groups:

Details

November 28, 2012
Link
Thumb

Statistics

Comments: 82
Favourites: 383 [who?]

Views: 5,814 (5 today)
[x]

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([link]) 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:
 
love 0 0 joy 0 0 wow 0 0 mad 0 0 sad 1 1 fear 0 0 neutral 0 0
:icondeuce-5-evah:
=DEUCE-5-EVAH Jan 29, 2013  Hobbyist General Artist
I'll try it! c:
Reply
:icononutletso:
=ONutletsO Jan 26, 2013  Student Digital Artist
How can i change the color of the Box inside (gray ones)? c:
Reply
:iconmercipher:
=mercipher Apr 6, 2013  Student Filmographer
Just try changing the hex colors of different elements until you figure out what is what,
If you want to change one that is white search for #fff in your browser's find window [Ctrl+F]

although I think the ones you are talking about are under:
.list {
background:#fff;
}
this one is for moods and whatnot I think

.bottom {
background:#fff;
}
this one is the comment box I think

.text {
background:#fff;
}
this is the main box I think
Reply
:icononutletso:
=ONutletsO Apr 7, 2013  Student Digital Artist
i've found it :D than you c:
it's:
.text {
background:#D3E7F2; (for the man box)

.gr-top {
background:#03404A; (for the title box)
Reply
:iconmercipher:
=mercipher Apr 7, 2013  Student Filmographer
Glad I could help
If you want to fix the issue with the title colour go here
Reply
:icononutletso:
=ONutletsO Apr 7, 2013  Student Digital Artist
ok thank you again c:
Reply
:icongriffsnuff:
*griffsnuff Jan 26, 2013  Hobbyist General Artist
xD dont know if thats possible
Reply
:icononutletso:
=ONutletsO Jan 26, 2013  Student Digital Artist
oh ok :) because mine is withe and yours is gray-ish ^^'
Reply
:icongriffsnuff:
*griffsnuff Jan 26, 2013  Hobbyist General Artist
I think there is diffrent type of codes for diffrent boxes ^^ the one I use is gray only
Reply
:icononutletso:
=ONutletsO Jan 26, 2013  Student Digital Artist
ah okaydokey, thx anyway :3
Reply
Add a Comment: