This guide is mainly for the complete beginner, but anyone is welcome to try it! Making your own skin from scratch (rather than copying one from the library and editing that) couldn't be easier. All you need to do is follow these 8 steps.
1. Go to your profile and in the nav menu at the top click on Edit Skins
next to your avatar. At the bottom
of the page is a button that says Add A Blank Skin
, click it. Now you have a new skin at the end of your list called Untitled Skin - 4 Dec 2006
04:54
(or similar).
2. Click on the WYSIWYG button next to your newly added skin. The WYSIYWG editor is how you are going to customise
the colours, fonts, borders, backgrounds etc of your skin by filling your colours and images etc in, you don't need to know any CSS to use this. More information on the WYSIWYG editor.
3. On the tab menu beneath the preview window, click on the HTML button. The content below the tabs should change
and you will see two boxes - Custom Header and Custom Footer. In the Custom Header Box. In the Custom Header box, copy and paste the following code:
<div class="mycontent">
In the Custom Footer box, copy and paste the following code:
</div>
4. Click on the CSS tab on the menu and the content will change again, this time there will be one box - Extra CSS. Copy and paste the code below into that box.
body { font-size: 12px; } /* for all browsers (the good ones, that is) */
* html body { font-size: 76%; } /* for the IE's, including default css hack */
#wrapper { font-size: 1em; }
/* em is a relational size, so all these sizes are relative
to the starter size (which is currently 12px) */
h1 { font-size: 1.4em; font-weight: normal; }
h2 { font-size: 1.3em; font-weight: normal; }
h3 { font-size: 1.2em; font-weight: normal;}
h4 { font-size: 1.2em; font-weight: normal;}
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
p { font-size: 1em; }
.mycontent { width: 800px; margin: 10px auto; }
.box, .block {margin-bottom: 15px;}
.boxbody {padding: 5px;}
.boxheading {
padding: 2px;
padding-left: 5px;
}
.miniprofile-block span.status {
float: left;
width: 15px;
height: 15px;
line-height: 200px;
overflow: hidden;
}
* html .miniprofile-block .boxheading h1 a {right: 25px;}
.miniprofile-block span.status img {vertical-align: top;}
.miniprofile-block th {white-space: nowrap; text-transform: lowercase;}
.miniprofile-block td {text-transform: lowercase;}
p.galerylink, p.gallerylink {margin-top: 0;}
table.voting {border-collapse: separate; width: 100px;}
#userinteract {margin-top: 5px;}
#userinteract li { padding: 2px; margin-bottom: 1px; margin-right: 5px;}
#userinteract li a {text-decoration: none;}
5. The code you just pasted in to the CSS box contains no colours or fonts, it is only to give some defaults. If you now scroll to the bottom and click on the preview button, you will see very little has changed. The profile is slightly narrower so it isn't touching the sides, the font is now a reasonable size, and a few other minor changes.
6. Now you are ready to begin customising the look of your profile by changing the values in the form. A good way is
to start with the first tab Page and work your way along. You can preview your changes as you go, just click the preview button.
7. Once you have your profile looking the way you want, enter a new title in the box above the tab menu, My First
Skin
for example, and click save.
8. The final step is actually using the skin you have just made. To apply the skin to your profile make sure you are
logged in to the profile you want to apply it to. If you need to switch profiles, use the menu at the top next to your avatar. Once you are using the right
profile, click Apply
next to the newly created profile and click the Yes
button.
Once you have got as far as you can using the wysiwyg editor you are in the position to add some of the snippets of code in this forum to further customise
it. When using the wysiwyg editor, any of the css snippets in this faq forum would be placed in the Extra CSS
box under the CSS
tab.
