HOME | DD

Description
Here is Part 1 of Journal Skins for s. Sorry it's so obnoxiously long. Here's the Live Version of the journal.

Do make sure to check out miontre's Do-It-Yourself Journal Skin article as well as ginkgografix 's Old vs Gruze Journal guide. The layout we're using in this skin is the gruze layout, so be sure to take a look at that one.

Step by Step
Here is all the code used in the tutorial. Only the new codes that are added with each step are shown, and the final journal skin with everything put together is at the bottom.

1. Getting Rid of the Junk:

* {background: transparent; border: none; margin: 0; padding: 0;}

.gr-top img {display: none;}
.gr {padding: 0 !important;}
li.a.f {background:transparent;}

2. Adding Background Colors:

.gr-top{background: #4fbcbd ;}
.gr-body{background: #eee ;}
.text{background: #fff ;}

3. Changing Text Colors:

.gr-top h2 a{color:#fff ;}
.gr-top .timestamp{color: #fff ;}
h1{color: #4fbcbd ;}
h2{color:#4fbcbd ;}
.commentslink {color: #4fbcbd ;}

Note! If you want to be fancy, you can also add .gr-top h2{color:#ffffff } to your code. This makes the title white when you type it into your journal.

4. Formatting Text:

.gr-top{text-align:center;}
.list{text-align:center;}

5. Adding Padding:

.gr-top{padding:40px;}
.gr-body{padding:30px;}
.text{padding:40px 30px 20px 30px;}

Note! Alternative way to do padding (these can be in any order btw)

.text{
padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}

6. Adding Margins:

.text{margin-bottom: 20px;}
.list{margin-top: 20px;}

The Full Skin:
Mostly in order of how the tutorial progressed. This can be copied and pasted straight into the CSS box in the journals for you to use and modify as you wish.

* {background: transparent; border: none; margin: 0; padding: 0;}

.gr-top img{display:none;}
.gr {padding: 0 !important;}
li.a.f{background:transparent;}

.gr-top{
background: #4fbcbd ;
text-align:center;
padding:40px;}

.gr-body{
background: #eee ;
padding:30px;}

.text{
background: #fff ;
padding:40px 30px 20px 30px;
margin-bottom: 20px;}

.gr-top h2 a{color:#fff ;}
.gr-top .timestamp{color: #fff ;}
h1{color: #4fbcbd ;}
h2{color: #4fbcbd ;}
.commentslink{color: #4fbcbd ;}

.list{
text-align:center;
margin-top: 20px;}

Journal Creator
Is all the code making your head hurt? If you're more interested in creating a custom journal skin rather than actually learning the code, you can try my DeviantART Journal Creator . Just plug and chug, and you'll have your very own skin!

Description
Here is Part 1 of Journal Skins for s. Sorry it's so obnoxiously long. Here's the Live Version of the journal.

Do make sure to check out miontre's Do-It-Yourself Journal Skin article as well as ginkgografix 's Old vs Gruze Journal guide. The layout we're using in this skin is the gruze layout, so be sure to take a look at that one.

Step by Step
Here is all the code used in the tutorial. Only the new codes that are added with each step are shown, and the final journal skin with everything put together is at the bottom.

1. Getting Rid of the Junk:

* {background: transparent; border: none; margin: 0; padding: 0;}

.gr-top img {display: none;}
.gr {padding: 0 !important;}
li.a.f {background:transparent;}

2. Adding Background Colors:

.gr-top{background: #4fbcbd ;}
.gr-body{background: #eee ;}
.text{background: #fff ;}

3. Changing Text Colors:

.gr-top h2 a{color:#fff ;}
.gr-top .timestamp{color: #fff ;}
h1{color: #4fbcbd ;}
h2{color:#4fbcbd ;}
.commentslink {color: #4fbcbd ;}

Note! If you want to be fancy, you can also add .gr-top h2{color:#ffffff } to your code. This makes the title white when you type it into your journal.

4. Formatting Text:

.gr-top{text-align:center;}
.list{text-align:center;}

5. Adding Padding:

.gr-top{padding:40px;}
.gr-body{padding:30px;}
.text{padding:40px 30px 20px 30px;}

Note! Alternative way to do padding (these can be in any order btw)

.text{
padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}

6. Adding Margins:

.text{margin-bottom: 20px;}
.list{margin-top: 20px;}

The Full Skin:
Mostly in order of how the tutorial progressed. This can be copied and pasted straight into the CSS box in the journals for you to use and modify as you wish.

* {background: transparent; border: none; margin: 0; padding: 0;}

.gr-top img{display:none;}
.gr {padding: 0 !important;}
li.a.f{background:transparent;}

.gr-top{
background: #4fbcbd ;
text-align:center;
padding:40px;}

.gr-body{
background: #eee ;
padding:30px;}

.text{
background: #fff ;
padding:40px 30px 20px 30px;
margin-bottom: 20px;}

.gr-top h2 a{color:#fff ;}
.gr-top .timestamp{color: #fff ;}
h1{color: #4fbcbd ;}
h2{color: #4fbcbd ;}
.commentslink{color: #4fbcbd ;}

.list{
text-align:center;
margin-top: 20px;}

Journal Creator
Is all the code making your head hurt? If you're more interested in creating a custom journal skin rather than actually learning the code, you can try my DeviantART Journal Creator . Just plug and chug, and you'll have your very own skin!