HOME | DD

Description
Edit 13/12: Revised and updated-looking tut says almost the same exact things as it did before! Now with woodland creatures!
Thanks so much to everyone who has commented on and favorited these tuts. It really means the world when I know it's all been useful to someone.

-------------------------------

My goal is to explain in laymen terms what I learned trying to wriggle my way through CSS when I first started. I am not by any means an expert on the subject of dA journal skins.

That said, if you want a tutorial on fancy CSS, this isn't the tutorial for you. These tutorials will focus more on using a simple background image to make an artistic-looking journal, and just shifting basic essential CSS around to suit--nothing very advanced. It is, as it says, for beginners who are, in fact, beginning. c:

I hope someone will find this useful. Please comment if anything is unclear or you have additional questions or comments.

Complimentary Tutorials...

Part I: Preparing the Artwork

Applying your custom CSS to your dA journal

-------------------------------

Do you like the journal skin example used in this Tutorial? Or just want to see it in action? See it here , or install it to your journal here .

-------------------------------

For easy Copy & Pasting, here is the CSS as seen in the tut above <3

Remember, some of your specs won't match up if you are using different images. Adjustments will be necessary.

.journalbox {
background:transparent;
border:none;
}

.journaltop {
background-color:transparent;
background-image:url( ____TOP____ );
background-repeat:no-repeat;
margin:0px auto 0px auto;
width:580px;
height:376px;
text-align:left;
font-size:0px;
}

.journaltop h2 {
padding:215px 0 0 220px;
width:480px;
color:#681507;
font-size:25px;
}

.journalbox h2 a {
color:#681507;
}

.journaltop span{
float:right;
margin:72px 33px 0px 0px;
color:#681507;
font-size:9px;
font-weight:normal;
}

.journaltop img {
display:none;
}

.journaltext {
background-color:transparent;
background-image:url( ____MIDDLE____ );
background-repeat:repeat-y;
margin:-10px auto -40px auto;
padding:10px 37px 0px 30px;
width:525px;
text-align:left;
color:#681507;
font-size:14px;
}

.journaltext a {
color:#f25b1e;
font-weight:normal;
}

.journaltext a:hover {
color:#f2b91e;
}

.journalbottom {
background-color:transparent;
background-image:url( ____BOTTOM____ );
background-repeat:no-repeat;
margin:0 auto -200px auto;
padding:150px 0px 0px 12px;
width:580px;
height:280px;
text-align:center;
font-size:10px;
}

.journalbottom a {
color:#f25b1e;
padding:40px 0 0 0;
}

.journalbottom a:hover {
color:#f2b91e;
text-decoration:none;
}

Description
Edit 13/12: Revised and updated-looking tut says almost the same exact things as it did before! Now with woodland creatures!
Thanks so much to everyone who has commented on and favorited these tuts. It really means the world when I know it's all been useful to someone.

-------------------------------

My goal is to explain in laymen terms what I learned trying to wriggle my way through CSS when I first started. I am not by any means an expert on the subject of dA journal skins.

That said, if you want a tutorial on fancy CSS, this isn't the tutorial for you. These tutorials will focus more on using a simple background image to make an artistic-looking journal, and just shifting basic essential CSS around to suit--nothing very advanced. It is, as it says, for beginners who are, in fact, beginning. c:

I hope someone will find this useful. Please comment if anything is unclear or you have additional questions or comments.

Complimentary Tutorials...

Part I: Preparing the Artwork

Applying your custom CSS to your dA journal

-------------------------------

Do you like the journal skin example used in this Tutorial? Or just want to see it in action? See it here , or install it to your journal here .

-------------------------------

For easy Copy & Pasting, here is the CSS as seen in the tut above <3

Remember, some of your specs won't match up if you are using different images. Adjustments will be necessary.

.journalbox {
background:transparent;
border:none;
}

.journaltop {
background-color:transparent;
background-image:url( ____TOP____ );
background-repeat:no-repeat;
margin:0px auto 0px auto;
width:580px;
height:376px;
text-align:left;
font-size:0px;
}

.journaltop h2 {
padding:215px 0 0 220px;
width:480px;
color:#681507;
font-size:25px;
}

.journalbox h2 a {
color:#681507;
}

.journaltop span{
float:right;
margin:72px 33px 0px 0px;
color:#681507;
font-size:9px;
font-weight:normal;
}

.journaltop img {
display:none;
}

.journaltext {
background-color:transparent;
background-image:url( ____MIDDLE____ );
background-repeat:repeat-y;
margin:-10px auto -40px auto;
padding:10px 37px 0px 30px;
width:525px;
text-align:left;
color:#681507;
font-size:14px;
}

.journaltext a {
color:#f25b1e;
font-weight:normal;
}

.journaltext a:hover {
color:#f2b91e;
}

.journalbottom {
background-color:transparent;
background-image:url( ____BOTTOM____ );
background-repeat:no-repeat;
margin:0 auto -200px auto;
padding:150px 0px 0px 12px;
width:580px;
height:280px;
text-align:center;
font-size:10px;
}

.journalbottom a {
color:#f25b1e;
padding:40px 0 0 0;
}

.journalbottom a:hover {
color:#f2b91e;
text-decoration:none;
}