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
Thank you so much, you don't know how long I've wanted to use a code like this!<33
Definitely will use ;v;
👍: 0 ⏩: 0
Swweeet thanks!! it works great! (I'm just a bit confused about the colour codes lol... >3< )
👍: 0 ⏩: 0
if only i had a membership... *adds to christmas wishlist*
👍: 0 ⏩: 0
for what exactly? i don't get it :/
👍: 0 ⏩: 1
Although I did find a useful tutorial for journal skins I'm going to keep this in my favs in case I might need to check back on extra coding, it looks very informative and useful to use. c:
👍: 0 ⏩: 0
Using! [link]
eee might mess with it more later ;; <3
👍: 0 ⏩: 1
Neat journal CSS
But what about the coding needed for the mood box as well as the background margins you used? I'm finding the repeated background a little to busy, it might even prevent people from actually paying attention to the journal itself.
As for the GIF's you have scattered along the top and bottom, those I already know how to do. Basically the HTML code for this is --> < div align="center" > post direct link from image hosting site here < /div >
I have an old Dummy Journal set up so you can see what I've done with your Journal CSS coding but there isn't much to see. Carbon-Vanilla's Dummy Journal
👍: 0 ⏩: 1
the mood box appear when you set the mood in the journal entry.
👍: 0 ⏩: 1
Okay, great... what about the background margins you use?
👍: 0 ⏩: 1
the background in the journal is just a picture x3
👍: 0 ⏩: 0
do you make commission skin? >w<
👍: 0 ⏩: 1
I have been thinking about taking like a journal package drawing a header footer, border and abackground or something xD but not sure what price I would take yet haha
👍: 0 ⏩: 1
Oh wow, this will be so useful! I always wanted to give a crack at making my own journal skin of sorts.
I am sure that I speak for everyone when I say that we really appreciate you for sharing this with us!
👍: 0 ⏩: 0
ooo *v* thanks! but..how do i put a char on top? and background?xD it just appeared with black header when i tried background >.<
👍: 0 ⏩: 1
the code can be found in my faq's. its the same I use for the drawings on my page
👍: 0 ⏩: 1
aaa I love you so much for this eeuuuugg- <3
👍: 0 ⏩: 0
How did you get your cute little figure then? o.O
👍: 0 ⏩: 1
xD added them in the footer and header, the code for that is in my faq's
👍: 0 ⏩: 1
Good thing I have just had about HTML and coding in class, otherwise this would not have made much sense.
SCHOOL pays off kids!
Thanks for sharing.
👍: 0 ⏩: 0
<= Prev |