HOME | DD

griffsnuff — Journal CSS code that I use!
Published: 2012-11-28 20:01:22 +0000 UTC; Views: 14319; 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

griffsnuff - [Design] Green frogcat

[ TEXT ]


griffsnuff - Weather Void Claims [CLOSED]

[ TEXT ]


griffsnuff - Getting my diagnosis

[ TEXT ]


griffsnuff - Wait List Ping

[ TEXT ]


griffsnuff - 8D Foolee Halloween Raffle!
Comments: 134

griffsnuff In reply to ??? [2013-06-01 16:31:14 +0000 UTC]

Hm might be because you dont have a subscription, I dunno

👍: 0 ⏩: 0

hailgenocide In reply to ??? [2013-01-29 10:17:29 +0000 UTC]

I'll try it! c:

👍: 0 ⏩: 0

ONutletsO In reply to ??? [2013-01-26 14:17:43 +0000 UTC]

How can i change the color of the Box inside (gray ones)? c:

👍: 0 ⏩: 2

mercipher In reply to ONutletsO [2013-04-07 05:47:42 +0000 UTC]

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

👍: 0 ⏩: 1

ONutletsO In reply to mercipher [2013-04-07 10:10:28 +0000 UTC]

i've found it than you c:
it's:
.text {
background:#D3E7F2; (for the man box)

.gr-top {
background:#03404A; (for the title box)

👍: 0 ⏩: 1

mercipher In reply to ONutletsO [2013-04-07 10:35:15 +0000 UTC]

Glad I could help
If you want to fix the issue with the title colour go here

👍: 0 ⏩: 1

ONutletsO In reply to mercipher [2013-04-07 10:37:52 +0000 UTC]

ok thank you again c:

👍: 0 ⏩: 0

griffsnuff In reply to ONutletsO [2013-01-26 15:44:28 +0000 UTC]

xD dont know if thats possible

👍: 0 ⏩: 1

ONutletsO In reply to griffsnuff [2013-01-26 16:05:42 +0000 UTC]

oh ok because mine is withe and yours is gray-ish ^^'

👍: 0 ⏩: 1

griffsnuff In reply to ONutletsO [2013-01-26 21:40:11 +0000 UTC]

I think there is diffrent type of codes for diffrent boxes ^^ the one I use is gray only

👍: 0 ⏩: 1

ONutletsO In reply to griffsnuff [2013-01-26 22:40:05 +0000 UTC]

ah okaydokey, thx anyway :3

👍: 0 ⏩: 0

Spectral-Radiance In reply to ??? [2013-01-15 21:07:25 +0000 UTC]

I can't get it to work :/ do you remove the periods or something?

👍: 0 ⏩: 1

griffsnuff In reply to Spectral-Radiance [2013-01-24 04:37:46 +0000 UTC]

It should work owo, I havent had anyone else say it didnt work who are using it.

👍: 0 ⏩: 1

Spectral-Radiance In reply to griffsnuff [2013-01-27 15:39:58 +0000 UTC]

Yeah I noticed that :/ It's weird. Meh It doesn't madder X)

👍: 0 ⏩: 1

FalseBritish In reply to Spectral-Radiance [2013-04-14 16:58:03 +0000 UTC]

No, don't remove anything, you probably didn't put it in correct or didn't put in a background.
Go to journal, pick the default journal, click edit, then paste the code she had above into the middle box, "CSS". Then look for [link] and paste it with a background of your choice..
Hope I helped? ;u;

👍: 0 ⏩: 0

beeoo In reply to ??? [2013-01-06 04:51:03 +0000 UTC]

I just have one small question, how did you get the rounded corners? xD

Other than that, thankyou very much for sharing this :'D

👍: 0 ⏩: 2

mercipher In reply to beeoo [2013-04-07 06:27:32 +0000 UTC]

The code used for the round corners is:

-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;

moz is for firefox, webkit is for chrome; it's recommended that you include both so people on different browsers are seeing the same thing

Experiment with those parts of the code

👍: 0 ⏩: 0

griffsnuff In reply to beeoo [2013-01-06 10:56:19 +0000 UTC]

xD no idea, I just know some coding, not how to fix stuff unless its colors haha

👍: 0 ⏩: 1

beeoo In reply to griffsnuff [2013-01-06 12:01:12 +0000 UTC]

xD That's okay.

👍: 0 ⏩: 0

Perry--Agent [2012-12-31 06:20:46 +0000 UTC]

What size do you recommend for the picture at the top?

👍: 0 ⏩: 1

griffsnuff In reply to Perry--Agent [2013-01-04 05:50:27 +0000 UTC]

xD depends on what you want to make, I think any size works depending on what you make.

👍: 0 ⏩: 0

Deestracted In reply to ??? [2012-12-01 23:44:26 +0000 UTC]

Appologies if this has already been asked, but I can't seem to find the color code that decides what the title color will be? .o.

👍: 0 ⏩: 2

mercipher In reply to Deestracted [2013-04-07 06:17:58 +0000 UTC]

was wondering this myself, found a fix to the code

.gr-top h2 {
color:#fff;
}

this part of the code should change the title color, however because the title is a link we need to add the following class,
ie. don't just add the 'a' - add this entire part to the code separately:

.gr-top h2 a {
color:#fff;
}

the only difference is the 'a' but this should fix the problem

👍: 0 ⏩: 1

Deestracted In reply to mercipher [2013-04-07 09:33:16 +0000 UTC]

Aaahhhh, this is great ;__;
Excuse my stupidity, but where exactly does it go? .o. I'm still relatively new to this coding thing, so yeah. xD

👍: 0 ⏩: 1

mercipher In reply to Deestracted [2013-04-07 09:46:45 +0000 UTC]

Really it can go anywhere, but for simplicity sake it's better for it to go after it's parent. So it should something like:

.gr-top h2 {
color:#fff;
font-size:14px;
margin-left:-15px;
}
.gr-top h2 a {
color:#fff;
}
.gr-top h2 img {
display:none;
height:1px;
width:1px;
}

👍: 0 ⏩: 1

Deestracted In reply to mercipher [2013-04-07 10:07:58 +0000 UTC]

Aaah, thank you so very, VERY much! It looks great now ;V; <33

👍: 0 ⏩: 1

mercipher In reply to Deestracted [2013-04-07 10:20:59 +0000 UTC]

Glad I could help

👍: 0 ⏩: 0

griffsnuff In reply to Deestracted [2012-12-02 00:26:40 +0000 UTC]

xD It seems like it has been somehow lost, I am struggling with that myself lawl.

👍: 0 ⏩: 2

mercipher In reply to griffsnuff [2013-04-07 06:21:37 +0000 UTC]

fixed the title color problem; goto the comments in your journal
You might want to add the fix to the journal for everyone else to benefit from

👍: 0 ⏩: 1

griffsnuff In reply to mercipher [2013-04-11 07:00:08 +0000 UTC]

8D OOH thanks! That helps so much!

👍: 0 ⏩: 0

Deestracted In reply to griffsnuff [2012-12-02 12:44:22 +0000 UTC]

Ahwell, I guess we'll just have to deal with it |D

👍: 0 ⏩: 0

scrungo [2012-12-01 09:41:39 +0000 UTC]

Oh my god this is so useful!! Thanks for putting this up! <3

👍: 0 ⏩: 0

makashy [2012-11-30 22:41:50 +0000 UTC]

That's really useful!
May i ask you how did you put the image on the top of the journal please?

👍: 0 ⏩: 1

griffsnuff In reply to makashy [2012-12-01 06:32:56 +0000 UTC]

the same code I use for the ones on my page which you can find in my faq's x3

👍: 0 ⏩: 1

makashy In reply to griffsnuff [2012-12-01 10:05:08 +0000 UTC]

Thanks!but in which part of the journal code do you put it?

👍: 0 ⏩: 1

griffsnuff In reply to makashy [2012-12-01 10:17:52 +0000 UTC]

Just put it in the header and footer area and the journal css code in the css area

👍: 0 ⏩: 1

makashy In reply to griffsnuff [2012-12-01 14:25:02 +0000 UTC]

Done *-* Thank youuu

👍: 0 ⏩: 0

PistachioFox [2012-11-29 21:24:20 +0000 UTC]

I'm guessing we need a PM to use this?

👍: 0 ⏩: 2

griffsnuff In reply to PistachioFox [2012-12-01 06:33:15 +0000 UTC]

xD probably not sure

👍: 0 ⏩: 1

PistachioFox In reply to griffsnuff [2012-12-01 12:22:27 +0000 UTC]

I'll give it a go anyway, thanks for the help 'snuff!

👍: 0 ⏩: 0

Pimsri In reply to PistachioFox [2012-11-30 16:14:31 +0000 UTC]

yes

👍: 0 ⏩: 1

PistachioFox In reply to Pimsri [2012-11-30 22:13:58 +0000 UTC]

Awwwh D':
Oh well, thankies for letting me know <3

👍: 0 ⏩: 0

Evoli-niceli In reply to ??? [2012-11-29 15:29:32 +0000 UTC]

Thanks

👍: 0 ⏩: 0

Mahsira In reply to ??? [2012-11-29 06:03:30 +0000 UTC]

Thank you so much for sharing this , I was finding this for a long time but had no result ,now I can finally work on my own

👍: 0 ⏩: 0

Screeches In reply to ??? [2012-11-29 04:17:53 +0000 UTC]

CSS. Y u so unnecessarily complicated.

Thank you for this <3 ;w;

👍: 0 ⏩: 0

pixel-Inked In reply to ??? [2012-11-29 04:15:33 +0000 UTC]

Thank you by the way.

👍: 0 ⏩: 0

pixel-Inked In reply to ??? [2012-11-29 04:15:24 +0000 UTC]

How do I get a link for my art? Do I just drag it onto my web browser and use that link?

👍: 0 ⏩: 1

griffsnuff In reply to pixel-Inked [2012-11-29 06:26:36 +0000 UTC]

you need to have it uploaded somewere, you can upload it in scraps here on dA and use the image url wich you can acsess by right click and copy image url or something XD

👍: 0 ⏩: 1

pixel-Inked In reply to griffsnuff [2012-11-29 15:33:40 +0000 UTC]

Thank you so much!! I have been making my friend get all the links for me. XD

👍: 0 ⏩: 0

KaibaKitty In reply to ??? [2012-11-29 02:38:51 +0000 UTC]

Awesome! Thanks so much for making this :3

👍: 0 ⏩: 0


| Next =>