HOME | DD
griffsnuff — Journal CSS code that I use!
Published: 2012-11-28 20:01:22 +0000 UTC; Views: 14316; Favourites: 472; Downloads: 0
Redirect to original
Description
body div#devskin9692251 * { border:none; margin:0; padding:0; } body div#devskin9692251 .journalcontrol { font-family:'Lucida Grande','Lucida Sans Unicode',Verdana,Arial,sans-serif; line-height:22px; margin-bottom:10px; } body div#devskin9692251 .gr-box { border:none; background:url(https://fc04.deviantart.net/fs71/f/2011/354/1/0/1077d2c067d51ea37d45a401bc95a0c6-d4jnipk.png) repeat top left; margin-bottom:20px; border-radius:6px 6px 6px 6px; -moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px; border-radius:6px 6px 6px 6px; -moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px; } body div#devskin9692251 .tri { display:none; } body div#devskin9692251 .gr1 { display:none; } body div#devskin9692251 .gr2 { display:none; } body div#devskin9692251 .gr3 { display:none; } body div#devskin9692251 .gr-top { background:#7c6c56; border-bottom:none; height:35px; margin-bottom:20px; padding:8px 0px 8px 0px; width:100%; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; } body div#devskin9692251 .gr-top .gr { background:none!important; margin:0 auto; width:600px; } body div#devskin9692251 .gr-top h2 a { color:#ffffff; font-size:14px; margin-left:-15px; } body div#devskin9692251 .gr-top h2 a { color:#fffff; } body div#devskin9692251 .gr-top h2 img { display:none; height:1px; width:1px; } body div#devskin9692251 .gr-top span { color:#52483a; font-size:12px; margin-left:-15px; } body div#devskin9692251 .gr-body { background:none!important; margin:0 auto; width:500px; } body div#devskin9692251 .text { background:#dae4d9; border:none; color:#52483a; font-size:14px; line-height:24px; padding:20px; } body div#devskin9692251 .text a { background:#transparant; color:#a68154; padding:3px 5px 3px 5px; text-decoration:none; } body div#devskin9692251 .text a:hover { background:#transparant; } body div#devskin9692251 .text a img { border:none; } body div#devskin9692251 .text .article-image { float:left; margin:0px 10px 5px 0px; } body div#devskin9692251 .text ul { margin:20px 20px 20px 20px; } body div#devskin9692251 .text ol { margin:20px 20px 20px 20px; } body div#devskin9692251 .text ul li { margin-bottom:5px; } body div#devskin9692251 .text ol li { margin-bottom:5px; } body div#devskin9692251 .bottom { background:#dae4d9; border:none; color:#888888; margin:20px 0px 20px 0px; padding:10px; } body div#devskin9692251 .bottom a { color:#7c6c56; text-decoration:none; } body div#devskin9692251 .bottom a:hover { text-decoration:transparant; } body div#devskin9692251 .list { background:#dae4d9; border:1px solid #ffac75; color:#888888; font-size:12px; margin:20px 0px 20px 0px; padding:10px; text-align:center; } body div#devskin9692251 .list li { background:#dae4d9; margin-bottom:5px; }
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;
}
FAQ's commissions tumblr
Related content
Comments: 134
If I preview it says my photo link is not allowed!
👍: 0 ⏩: 1
that doesnt really tell me much
👍: 0 ⏩: 1
Nevermind, I fixed it.
👍: 0 ⏩: 1
I don't get it... She said to replace link with a link but it never says link
👍: 0 ⏩: 2
Where the photobucket link is, just replace that with your preferred background URL. <3 Hope this helps!
👍: 0 ⏩: 0
hmm... idk maybe ask bear to code it for some art or something? idk
👍: 0 ⏩: 1
she says coding is 25 points on her commission journal
👍: 0 ⏩: 0
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
👍: 0 ⏩: 2
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;
👍: 0 ⏩: 0
D8 I domnt know whats wrong
👍: 0 ⏩: 1
Ahh QAQ thats okay I'll just use my regular skin then X3
👍: 0 ⏩: 0
the journalbucked picture got removed so its not working anymore .-. D:
👍: 0 ⏩: 1
xD then use a diffrent picture
👍: 0 ⏩: 1
Yeah but i want a good size cuz i dont want white spaces XD
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 1
you put that in the header and footer area.
👍: 0 ⏩: 1
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
👍: 0 ⏩: 1
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...
👍: 0 ⏩: 1
you just link the direct link xD it should work?
👍: 0 ⏩: 1
Well..should I paste it like this?
background: url( i96.photobucket.com/albums/l18… repeat top left;
👍: 0 ⏩: 1
xD how about you try out diffrent things to find out?...
👍: 0 ⏩: 1
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???
👍: 0 ⏩: 1
I don't understand this
I tried but it won't let me use it
👍: 0 ⏩: 0
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
👍: 0 ⏩: 1
hm not sure what you mean`?
👍: 0 ⏩: 1
it okay, i found out
(it was the padding)
👍: 0 ⏩: 0
you need a subscription I think x3
👍: 0 ⏩: 0
i've tried to put it in several times ex. background: url([link] repeat top left;
is that how i do it?
👍: 0 ⏩: 2
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:
👍: 0 ⏩: 3
Oh. And click the green highlighted link in my response for it to work. C:
👍: 0 ⏩: 0
You need to rightclick and copy imageurl and not the page its uploaded to x3
👍: 0 ⏩: 1
you mean like :thumbsomething: or favme something
👍: 0 ⏩: 1
No rightclick on the image and it says copy the adress of the picture
👍: 0 ⏩: 1
| Next =>