HOME | DD
cascade388 — CSS Skin Tutorial P.1
Published: 2010-03-11 16:37:09 +0000 UTC; Views: 17652; Favourites: 532; Downloads: 460
Redirect to original
Description
You have to have a dA subscription to use/make skins. Tutorial tried + tested with Windows Vista, within the Mozilla Firefox broswer There is more to come, please review all tutorial parts before leaving comment/questions Hope it helps you to have fun making your own skins! I don't think I've left anything out... but if I did, let me know!Link to PART TWO
Link to PART THREE
Related content
Comments: 133
Maybe could be of more assistance then.
👍: 0 ⏩: 0
thank u so much ! need this! <3
👍: 0 ⏩: 1
you're welcome! glad you found it useful!
👍: 0 ⏩: 0
thank u so much ! need this! <3
👍: 0 ⏩: 0
Whaaaaaa? I have to have a subscription to MAKE them?! That's bullshit!...
Well, thanks for the tutorial anyways...I'll reference when I get a subscription... yeah, the day I win the lottery....
👍: 0 ⏩: 0
when i put the image url in, it doesn't show. i've tried changing the image size, but it still didn't work. ... everything else is working fine. help?
👍: 0 ⏩: 1
are you putting it in with quotation marks at the beginning and ends?
👍: 0 ⏩: 1
no, wait... what do you put in quotes? the url only? because its still not working... :\
👍: 0 ⏩: 1
can you copy/paste the part you're trying to get to work in a comment, exactly as you're doing it? Maybe I can pinpoint what's going on that way.
👍: 0 ⏩: 1
.journalbox .journaltop{
text-align:right;
color:#fffff;
background-color:#52c14b;
background-image:url"[link] ";
background-repeat:no-repeat;
background-position:center;
height:350px;
}
This part above. The background image isn't working...
👍: 0 ⏩: 1
Right, instead of: background-image:url"[link]";
put: background-image:url("url goes here");
Use the (), and not only quotations alone. See if that helps. If it doesnt, then put the url between (), without quotations at all.
👍: 0 ⏩: 1
okay 
👍: 0 ⏩: 1
good, glad to help ^^
👍: 0 ⏩: 1
this is a really amazing tutorial, by the way! ^_^
👍: 0 ⏩: 1
I can't find options. Can you help me?
👍: 0 ⏩: 1
Once you go to 'New Journal Entry', right beneath that there will be two tabs alongside each other right at the very top: 'Journal Text' and 'Options'.
👍: 0 ⏩: 1
Oh, I guess I'm blind.....Thanks! This is really cool. Also for the URL, do you have to have the picture on DA?
👍: 0 ⏩: 1
You're welcome, and thanks.
As for the picture URL, you need to upload it to tiny pic or photobucket first. But if it's already on dA, that's okay too I think.
But if you want to publish the skin for others to use, you'll be asked to upload the image used too, so you'll want to keep a copy of it in your picture file on your computer, regardless of where you upload it to.
👍: 0 ⏩: 1
Okay. Thanks for the help! ^^
👍: 0 ⏩: 1
how can you put that text in wordpad? i mean it wont let me copy/paste...
👍: 0 ⏩: 1
Alright. Well I'll put the code in a comment, where you should be able to copy/paste from.
Put this bit in the [skin css] box:
.journalbox{
background-color: bKGROUND COLOR CODE;
border-width:6px;
border-color:bORDER COLOR CODE;
border-style:double;
}
.journalbox .list li{
background-color: transparent;
text-align:left;
color:TEXT COLOR CODE;
font-size: 12px;
font-family: FONT STYLE NAME;
font-weight:strong;
}
.journalbox .list li.a{
background-color: transparent;
text-align:left;
color:TEXT COLOR CODE;
font-family: FONT STYLE NAME;
font-weight:strong
font-weight:light;
}
.journalbox h2{
color:TEXT COLOR CODE;
font-family: FONT STYLE NAME;
font-weight:strong
font-size:20px;
}
.journalbox .journaltop{
text-align:right;
color:TEXT COLOR CODE;
background-color: bKGROUND COLOR CODE;
background-image:url(IMAGE LINK HERE);
background-repeat:no-repeat;
background-position:center;
height:310px;
}
.journalbox a{
color:TEXT COLOR CODE;
font-size:12px;
font-family: FONT STYLE NAME;
font-weight:strong
text-align:left;
height:12px;
}
.journalbox a:hover{
color:TEXT COLOR CODE;
}
.journalbox .journalbottom a.commentslink{
color: BORDER COLOR CODE;
border:none;
font-size:12px;
font-family: FONT STYLE NAME;
font-weight:strong
}
.journalbox .journalbottom a.prevlink{
color: BORDER COLOR CODE;
border:none;
font-size:12px;
font-family: FONT STYLE NAME;
font-weight:strong
}
.journalbox .journalbottom a.commentlink:hover{
text-decoration:strikethrough;
}
.journalbox .journalbottom a.prevlink:hover{
text-decoration:strikethrough;
}
.journalbox .journaltext{
color:TEXT COLOR CODE;
text-align:left;
font-size: 12px;
font-family: FONT STYLE NAME
}
.journalbox .journaltop img{
display:none
}
.title{
color:TEXT COLOR CODE;
font-size:12px;
font-family: FONT STYLE NAME;
font-weight:strong
text-align:left;
letter-spacing:2px;
background-color: bKGROUND COLOR CODE;
border-bottom: TEXT COLOR CODE double 5px;
}
.linkbar{
text-align:center;
background-color:none;
border-width:2px;
border-color: bORDER COLOR CODE;
border-style:dashed;
}
.infobox{
color: BKGROUND COLOR CODE;
font-family: FONT STYLE NAME;
font-weight:strong
text-align:left;
background-color: bKGROUND COLOR CODE;
border-width:12px;
border-color: bORDER COLOR CODE;
border-style:double;
}
👍: 0 ⏩: 1
<= Prev |