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 domain, click on "navigation" and then on the "admin menu" tab in the middle. In
the page that appears next, click on "community skins" in the sidebar under the "design" header. 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; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0}
p { margin-bottom: 8px; }
.boxheading {
padding: 2px;
padding-left: 5px;
}
.box {
margin-bottom: 15px;
}
.dropdown li {
font-size: 11px;
}
.pager-total, .pager-list div {
padding: 2px;
}
.dropdown li a:link, .dropdown li a:visited, .pager a:link, .pager a:visited {
text-decoration: none;
}
.control-box, .jump-box {
border: none;
background-color: transparent;
padding: 0;
margin-top: -10px;
margin-bottom: 5px;
}
.control-box .boxbody, .jump-box .boxbody {
padding: 0;
}
.mycontent {
width: 90%;
margin: 10px auto;
}
.myheader {
text-align: center;
margin-bottom: 15px;
}
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 board is slightly narrower so it isn't touching the sides, and a few other minor changes.
6. Now you are ready to begin customising the look of your board 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. You can also preview the other pages of your board by clicking the links to forums in the top half of the page as normal.
7. Once you have your board looking the way you want, enter a new title in the box above the tab menu, My First
Skin
for example, and click save. Now the only thing remaining to add to your skin are the images and smilies. You can add these by clicking the Images and
Smilies buttons next to your skin and entering the URLs or using the image browser icon to choose your Yuku images.
8. The final step is actually using the skin you have just made. To apply the skin to your whole domain or just to a
single forum, you click the apply button next to your skin. The apply page lets you set the skin as the Domain Default - this is the front page of your domain
and any forum that isn't using its own skin - or to a specific forum. Once you have checked where to apply the skin, 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.
