Shop Mobile More Submit  Join Login

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:
 
:iconsekhmet-ra-ptah:
Sekhmet-Ra-Ptah Featured By Owner Mar 21, 2015  Hobbyist General Artist
If I preview it says my photo link is not allowed!
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Mar 21, 2015
that doesnt really tell me much
Reply
:iconsekhmet-ra-ptah:
Sekhmet-Ra-Ptah Featured By Owner Mar 21, 2015  Hobbyist General Artist
Nevermind, I fixed it.
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Mar 21, 2015
:D
Reply
:iconfrom-dark-to-dawn:
From-Dark-To-Dawn Featured By Owner Jan 11, 2015  Hobbyist Artist
Midnight-Asteriods  will this help?
Reply
:iconmidnight-asteriods:
Midnight-Asteriods Featured By Owner Jan 12, 2015  Hobbyist General Artist
Hold on....
Reply
:iconfrom-dark-to-dawn:
From-Dark-To-Dawn Featured By Owner Jan 12, 2015  Hobbyist Artist
k
Reply
:iconmidnight-asteriods:
Midnight-Asteriods Featured By Owner Jan 12, 2015  Hobbyist General Artist
I don't get it... She said to replace link with a link but it never says link
Reply
:icontruucey:
Truucey Featured By Owner Jan 15, 2015  Hobbyist General Artist
Where the photobucket link is, just replace that with your preferred background URL. <3 Hope this helps!
Reply
:iconfrom-dark-to-dawn:
From-Dark-To-Dawn Featured By Owner Jan 12, 2015  Hobbyist Artist
hmm... idk maybe ask bear to code it for some art or something? idk
Reply
:iconmidnight-asteriods:
Midnight-Asteriods Featured By Owner Jan 12, 2015  Hobbyist General Artist
Hmm...
Reply
:iconfrom-dark-to-dawn:
From-Dark-To-Dawn Featured By Owner Jan 12, 2015  Hobbyist Artist
she says coding is 25 points on her commission journal 
Reply
:iconklutzy-kitten:
Klutzy-Kitten Featured By Owner Nov 20, 2014  Student Digital Artist
Omg I love the fact that its so simple and eye catching! But each time I copy and paste it it says error... I edited it or at least tried and it said error again :c um am I doing something wrong? QAQ
Reply
:icongallowxy:
gallowxy Featured By Owner Jan 7, 2015
I don't know if you still want to know, but I had the same problem if the error message was something to do with parenthesis? So what worked for me is select everything between "background: url (" and "repeat top left;" and delete it. Then go to the image you want, right click and select "copy image location", then go to the skin and paste your image after "background: url (", and make sure to add a close parenthesis ")" after your link c: Hope this helped! ;w;
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Nov 21, 2014
D8 I domnt know whats wrong
Reply
:iconklutzy-kitten:
Klutzy-Kitten Featured By Owner Nov 21, 2014  Student Digital Artist
Ahh QAQ thats okay I'll just use my regular skin then X3
Reply
:icondarkdaemoonfh:
DarkDaemoonFH Featured By Owner Jun 28, 2014  Hobbyist General Artist
the journalbucked picture got removed so its not working anymore .-. D:
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Jun 28, 2014
xD then use a diffrent picture
Reply
:icondarkdaemoonfh:
DarkDaemoonFH Featured By Owner Jun 29, 2014  Hobbyist General Artist
Yeah but i want a good size cuz i dont want white spaces XD 
Reply
:iconwolfpaw67:
Wolfpaw67 Featured By Owner Jun 14, 2014  Student Digital Artist
How do you put the image on top of the journal, and the small decoration at the bottom? Are those in the code, or do you use a deviation and copy and paste it in?
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Jun 15, 2014
you put that in the header and footer area.
Reply
:iconwolfpaw67:
Wolfpaw67 Featured By Owner Jun 15, 2014  Student Digital Artist
Okay, I get it. Thank you!
Reply
:iconeveon99:
Eveon99 Featured By Owner May 17, 2014  Hobbyist Artist
Hi! I really,really into making journal skins,just a simple one but the journal skin code I'm using now is so simple but the thing is...when it comes to long texts,it doesn't just like this one of yours so now I'm gonna change it by using your journal skin code.You don't mind if I use it,would you? I'll give credits below the journal skin I've made^^ Just to make sure I've got permission for you first^^;
Reply
:icongriffsnuff:
griffsnuff Featured By Owner May 18, 2014
Sure :D
Reply
:iconeveon99:
Eveon99 Featured By Owner May 19, 2014  Hobbyist Artist
Thanks! :)
But just one itsy bitsy prob...I'm confused with the 'link' you've said.. ^^;
How do I link the BG in it??I do have my own Photobucket and used the direct link...so yeah...^^;
Reply
:icongriffsnuff:
griffsnuff Featured By Owner May 19, 2014
you just link the direct link xD it should work?
Reply
:iconeveon99:
Eveon99 Featured By Owner May 19, 2014  Hobbyist Artist
Well..should I paste it like this?

background: url(i96.photobucket.com/albums/l18… repeat top left;
Reply
:icongriffsnuff:
griffsnuff Featured By Owner May 19, 2014
xD how about you try out diffrent things to find out?...
Reply
:iconeveon99:
Eveon99 Featured By Owner May 19, 2014  Hobbyist Artist
Ok..
Oh,BTW...whenever I try to put the direct link and then I previewed it and it says "Malformed or blank selector."
What does it means??? Did I did something wrong???
Reply
:icongriffsnuff:
griffsnuff Featured By Owner May 19, 2014
I dont know *0* use google
Reply
:icontrashlizard:
Trashlizard Featured By Owner Apr 22, 2014
Thank you so much for this!
Reply
:iconanamaycat:
AnamayCat Featured By Owner Oct 27, 2013  Professional General Artist
I don't understand this
I tried but it won't let me use it
Reply
:iconbrightenyoursmile:
BrightenYourSmile Featured By Owner 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 Featured By Owner Jul 1, 2013
hm not sure what you mean`?
Reply
:iconbrightenyoursmile:
BrightenYourSmile Featured By Owner Jul 1, 2013  Student Traditional Artist
it okay, i found out :)
(it was the padding)
Reply
:iconpeking08:
Peking08 Featured By Owner Jun 23, 2013  Hobbyist Digital Artist
How do you do this? I am so confuse.
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Jul 1, 2013
you need a subscription I think x3
Reply
:iconneocu:
Neocu Featured By Owner Jun 2, 2013  Hobbyist Digital Artist
Thank's so much Griff ;w;
Reply
:iconpuppywishes:
puppywishes Featured By Owner Jun 2, 2013
Yay! It worked!! Thanks! C:
Reply
:iconyunama:
Yunama Featured By Owner May 30, 2013
i've tried to put it in several times ex. background: url([link] repeat top left;
is that how i do it?
Reply
:iconpuppywishes:
puppywishes Featured By Owner Jun 2, 2013
It doesnt recognize [link]. So you click the link in the journal and this should pop up: *[link]

Then you just cut this: [link]
And replace it with this: *[link]
the reason for this is because the CSS code needs an actual url. Not [link].

Hope this helped!! C:
Reply
:iconyunama:
Yunama Featured By Owner Jun 2, 2013
thanks!
Reply
:iconpuppywishes:
puppywishes Featured By Owner Jun 3, 2013
No problem! :D
Reply
:iconyunama:
Yunama Featured By Owner Jun 3, 2013
:D :glomp:
Reply
:iconyunama:
Yunama Featured By Owner Jun 2, 2013
thanks!
Reply
:iconpuppywishes:
puppywishes Featured By Owner Jun 2, 2013
Oh. And click the green highlighted link in my response for it to work. C:
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Jun 1, 2013
You need to rightclick and copy imageurl and not the page its uploaded to x3
Reply
:iconyunama:
Yunama Featured By Owner Jun 1, 2013
you mean like :thumbsomething: or favme something
Reply
:icongriffsnuff:
griffsnuff Featured By Owner Jun 1, 2013
No rightclick on the image and it says copy the adress of the picture
Reply
:iconyunama:
Yunama Featured By Owner Jun 1, 2013
it won't work :<
Reply
Add a Comment:
 
×

:icongriffsnuff: More from griffsnuff


Featured in Collections

Journals by Renkindle

Journals commissions by Deestracted

Journals by Sketchy-Cat




Details

Submitted on
November 28, 2012
Link
Thumb

Stats

Views
9,503 (1 today)
Favourites
496 (who?)
Comments
133
×