OK, it's been pretty well tested now and I am going to post instructions now.
Most of the images from this skin are from the ezboard Community Default skin on page 4 of the Skin Library. The easiest thing would be to go to the Skin Library from your board and find it and press the "copy to my skins" button. You will then find it at the end of your Customized Skins list. It will only need 2 images to be changed and these are the RSS and Email buttons. Press the images button next to the skin and edit as required. Scroll to the bottom and click save.
Functional Icons (icons that do something when you click them)
Subscribe by Rss:
http://static.yuku.com/common/bypass/icons/feeds/rss/16x16/rss_purple.gif
Subscribe by Email:
http://static.yuku.com/common/bypass/icons/feeds/email/16x16/email_purple.gif
Forum Icons
New Posts:
http://www.ezboard.com/prefabs/ez/topicnew.gif
MBA Forum:
http://www.ezboard.com/prefabs/ez/topicclosed.gif
Topic Icons
Unread Posts:
http://www.ezboard.com/prefabs/ez/topicnew.gif
Poll Topic:
http://www.ezboard.com/intl/aenglish/images/poll_icon.gif
Sticky Topic:
http://www.ezboard.com/images/stickytopic.gif
Moved Topic:
http://static.yuku.com/domainskins/bypass/img/default-icons/moved.gif
Hot Topic with New Posts (optional, "Unread Posts" icon will be used if left blank):
http://www.ezboard.com/prefabs/ez/topicnew.gif
Closed Topic:
http://www.ezboard.com/prefabs/ez/topicclosed.gif
Next we move on to the actual code used in the skin. To access this, press the edit html button next to it.
Rename the skin to whatever you want first, so you can easily identify it.
You will find 3 boxes. Delete everything that these boxes contain. The quick and sure way of doing this is to click into the box, press Ctrl+A on your keyboard to select all and then press delete.
I am now going to post the three sections of code that you need to fill these boxes in. Please be very careful you get every single bit and neither miss anything or add something that should not be there. In one sense, this skin is quite complex and something misplaced could easily break it into an unuseable state.
Custom Header:
Custom Footer:
Advanced CSS:
Edited: minor updates.
Edited: uncheck convert urls
Most of the images from this skin are from the ezboard Community Default skin on page 4 of the Skin Library. The easiest thing would be to go to the Skin Library from your board and find it and press the "copy to my skins" button. You will then find it at the end of your Customized Skins list. It will only need 2 images to be changed and these are the RSS and Email buttons. Press the images button next to the skin and edit as required. Scroll to the bottom and click save.
Functional Icons (icons that do something when you click them)
Subscribe by Rss:
http://static.yuku.com/common/bypass/icons/feeds/rss/16x16/rss_purple.gif
Subscribe by Email:
http://static.yuku.com/common/bypass/icons/feeds/email/16x16/email_purple.gif
Forum Icons
New Posts:
http://www.ezboard.com/prefabs/ez/topicnew.gif
MBA Forum:
http://www.ezboard.com/prefabs/ez/topicclosed.gif
Topic Icons
Unread Posts:
http://www.ezboard.com/prefabs/ez/topicnew.gif
Poll Topic:
http://www.ezboard.com/intl/aenglish/images/poll_icon.gif
Sticky Topic:
http://www.ezboard.com/images/stickytopic.gif
Moved Topic:
http://static.yuku.com/domainskins/bypass/img/default-icons/moved.gif
Hot Topic with New Posts (optional, "Unread Posts" icon will be used if left blank):
http://www.ezboard.com/prefabs/ez/topicnew.gif
Closed Topic:
http://www.ezboard.com/prefabs/ez/topicclosed.gif
Next we move on to the actual code used in the skin. To access this, press the edit html button next to it.
Rename the skin to whatever you want first, so you can easily identify it.
You will find 3 boxes. Delete everything that these boxes contain. The quick and sure way of doing this is to click into the box, press Ctrl+A on your keyboard to select all and then press delete.
I am now going to post the three sections of code that you need to fill these boxes in. Please be very careful you get every single bit and neither miss anything or add something that should not be there. In one sense, this skin is quite complex and something misplaced could easily break it into an unuseable state.
Custom Header:
<div class="my-header">
<div class="greeting"> Welcome to <br>
Our Board! </div>
<div class="content-links"> <a href="#" rel="msn-style">MSN Style</a> | <a href="#" rel="yuku-style">Yuku
Style</a> </div>
</div>
<div class="sidebarholder">
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Category 1</h4>
</div>
<div class="boxbody"> <a href="/forums/69" title="This is the first forum in this category">Forum
1</a><br>
<a href="/forums/69" title="This is the second forum in this category">Forum
2</a><br>
<a href="/forums/69" title="This is the third forum in this category">Forum
3</a><br>
<a href="/forums/69" title="This is the fourth forum in this category">Forum
4</a><br>
<a href="/forums/69" title="This is the fifth forum in this category">Forum
5</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Category 2</h4>
</div>
<div class="boxbody"> <a href="/forums/69" title="This is the first forum in this category">Forum
1</a><br>
<a href="/forums/69" title="This is the second forum in this category">Forum
2</a><br>
<a href="/forums/69" title="This is the third forum in this category">Forum
3</a><br>
<a href="/forums/69" title="This is the fourth forum in this category">Forum
4</a><br>
<a href="/forums/69" title="This is the fifth forum in this category">Forum
5</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Category 3</h4>
</div>
<div class="boxbody"> <a href="/forums/69" title="This is the first forum in this category">Forum
1</a><br>
<a href="/forums/69" title="This is the second forum in this category">Forum
2</a><br>
<a href="/forums/69" title="This is the third forum in this category">Forum
3</a><br>
<a href="/forums/69" title="This is the fourth forum in this category">Forum
4</a><br>
<a href="/forums/69" title="This is the fifth forum in this category">Forum
5</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Category 4</h4>
</div>
<div class="boxbody"> <a href="/forums/69" title="This is the first forum in this category">Forum
1</a><br>
<a href="/forums/69" title="This is the second forum in this category">Forum
2</a><br>
<a href="/forums/69" title="This is the third forum in this category">Forum
3</a><br>
<a href="/forums/69" title="This is the fourth forum in this category">Forum
4</a><br>
<a href="/forums/69" title="This is the fifth forum in this category">Forum
5</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Category 5</h4>
</div>
<div class="boxbody"> <a href="/forums/69" title="This is the first forum in this category">Forum
1</a><br>
<a href="/forums/69" title="This is the second forum in this category">Forum
2</a><br>
<a href="/forums/69" title="This is the third forum in this category">Forum
3</a><br>
<a href="/forums/69" title="This is the fourth forum in this category">Forum
4</a><br>
<a href="/forums/69" title="This is the fifth forum in this category">Forum
5</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Chatroom</h4>
</div>
<div class="boxbody"> <a href="/chat/room/id/122" title="Want to chat and someone is online?" target="_blank">Chat
Here</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Board Links</h4>
</div>
<div class="boxbody"> <a href="/calendar" title="">Our Calendar</a><br>
<a href="/domainstats/activemembers" title="">Active Members</a><br>
<a href="/directory/featured" title="">Community Profile</a><br>
<a href="/help/me" title="Click here for help from board staff" target="_blank">Contact
Support</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="box sidebar-box">
<div class="onionskin1">
<div class="onionskin2">
<div class="onionskin3">
<div class="boxheading">
<h4>Search Site</h4>
</div>
<div class="boxbody">
<form action="/search/text/" name="f_search" id="my-f_search" method="get" class="my-search">
<input name="q" type="text" class="my-text" id="my-search">
<br>
<input name="submit" type="submit" class="button" id="submit" value="Search Site" title="Search All">
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div><div class="forumholder">
<div id="msn-style">
<div style="padding: 12px;border: 2px solid #503562;background: url(http://images.yuku.com/image/gif/ac5350247d3d67f3824e6552c51bb57e14dbc57.gif);">
<div style="padding: 16px;border: 2px solid #503562;background: url(http://images.yuku.com/image/pjpeg/8ca25e57716f281e6d0c29955149e6cfa9fe756.jpg) center;">
<div style="padding: 6px;border: 2px solid #503562;background: url(http://images.yuku.com/image/gif/ac5350247d3d67f3824e6552c51bb57e14dbc57.gif);">
<div style="padding: 18px;border: 2px solid #503562;background: url(http://images.yuku.com/image/pjpeg/9b81527d6a8963cf73f8aa249b7e5ca8b1a40b1.jpg);">
<div style="padding: 35px;border: 2px solid #503562;background: url(http://images.yuku.com/image/pjpeg/03d15d7d618e66c149a4986d8f62bc117e47ad4.jpg) center;">
<div style="padding: 10px;border: 2px solid #503562;background: white;">
<div style="text-align: center; padding: 40px 5px;"> <span style="font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif; font-weight: bold; font-size: 48px; color: #9999CC;">Welcome</span><br>
<br>
<img src="http://images.yuku.com/image/pjpeg/1fb35e567cd164418bba69d8ca22e36355ad0bc.jpg">
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="yuku-style">
Custom Footer:
</div>
</div>
<toggle ids="msn-style, yuku-style" remember="true">
Advanced CSS:
/* Castaways Purple Skin -------------------
A special layout designed by exstreamuser
Credit to -
Arizona - for testing in various browsers -
Many others for there help and input -
Thank you all -----------------------------*/
/* TYPOGRAPHY --------------------------
set default font faces, font colors and sizes for the entire page */
body
{color: #fff;
font-family: Arial, Helvetica, sans-serif;}
body {font-size: 62.5%;} /* this is for IE */
html>/**/body {font-size: 10px;} /* this is for standards compliant browsers */
#wrapper {font-size: 1em;}
.featured-box .boxbody *
{font-size: 1em;}
/* set all boxheadings to have the same font size */
.boxheading h1, .boxheading h2, .boxheading h3, .boxheading .bread-crumbs
{font-size: 1.2em;}
.boxheading *
{font-weight: bold;}
th, .th, /* table header font */
.announcement-box, .post-content, .forum-box td, .forumtitle h3, textarea, input.text
{font-size: 1.2em;}
h1 {font-size: 1.8em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}
.topic-pager {font-size: .9em;}
.pager, .button, .post-tools
{font-size: 1.1em;}
h2, .forumtitle h3, .user-name, th, .th
{font-family: Arial, Helvetica, sans-serif;}
.forumholder { color: #003366; }
.my-header .greeting {
font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 36px;
color: #9999CC;
text-align: center;
padding-bottom: 10px;
}
#directory_default .my-header .greeting {
margin-bottom: -15px;
}
/* LINKS ------------------------------ */
a {color: #fff;}
a:visited {color: #fff;}
a:hover {color: #fff;}
a:active {color: #fff;}
.forumholder a {color: #003366;}
.forumholder a:visited {color: #003366;}
.forumholder a:hover {color: #003366;}
.forumholder a:active {color: #003366;}
.sidebarholder a {color:#666699;}
.sidebarholder a:visited {color:#666699;}
.sidebarholder a:hover {color:#CC6600;}
.sidebarholder a:active {color:#666699;}
div.mgr-navigation-sliver a:link { text-decoration: none; }
div.mgr-navigation-sliver a:visited { text-decoration: none; }
/* BODY ----------------------------------
change background color or add a background image */
body {background-color: #503562;}
/* BASIC PAGE LAYOUT ---------------------
set dimensions and margins for page content */
#wrapper
{margin: 10px 0;}
.sidebarholder {
width: 170px;
float: left;
background-color: #ECF1F6;
}
.forumholder {
margin-left: 170px;
background-color: #fff;
}
/* STANDARD CLASSES ----------------------
set the colors, dimensions, etc. of standard elements */
/* GENERIC BOX ---- */
.box
{margin-bottom: 10px;}
.boxheading
{background: #9999CC;
color: #FFF;
padding: 5px;}
/* custom link colors for boxheadings */
.boxheading a, .boxheading a:visited
{color: #FFF;}
.boxbody
{padding: 5px;}
/* COMMUNITY CONTENT (boxes containing forums) */
.community-content .boxbody
{padding: 0px;}
.community-content .boxheading,
.collapsed
{border-bottom: none;}
.community-content th a,
.community-content th a:visited,
.community-content th a:hover
{color: #fff;}
.category-box {
width: 98%;
margin: 10px auto;
border: 1px solid #503562;
}
.category-box td { border-top: 1px solid #503562; }
/* BREADCRUMBS ---- */
ul.bread-crumbs li.last a,
ul.bread-crumbs li.last a:visited
{ color: #fff; }
/* BUTTONS ---- */
/* DROP DOWN MENUS ----
set background colors, etc. for drop down list items */
/* arrow for dropdown lists */
.dropdown span
{background: url(http://static.yuku.com/common/bypass/images/arrows/down-arrow-gray-dk.gif) no-repeat right center;
padding-right: 12px;
padding-top: 2px;
padding-bottom: 2px;}
.dropdown ul
{background-color: #ECF1F6;
border: 1px solid #503562;
padding: 2px;}
.dropdown li
{border: 1px solid #503562;
background-color: #ECF1F6;
color: #333; }
.dropdown li *
{color: #333;}
.dropdown li a:link, .dropdown li a:visited
{text-decoration: none;
color: #333;}
.dropdown li:hover
{background-color: #FFF;}
/* PAGER (clickable page numbers) ---- */
.pager .jump
{background: url(http://static.yuku.com/common/bypass/images/arrows/down-arrow-black.gif) no-repeat right center;
padding-right: 12px;}
.jump-dropdown
{border: 1px solid #9BC3E3;
background: #FFF;}
*+html .topic-pagejump.top,
*+html .calendar-jump.top {
margin: 0; padding-bottom: 5px;
}
/* SPECIAL BOX & ELEMENT CLASSES ----------------------------
(set the styles of individual boxes different from the default box style) */
/* TOOL-BOX ---- */
.tool-box
{border: none;
background-color: #846a9f;
}
.tool-box .boxheading
{color: #503562;
border: none;
background: transparent;
padding-bottom: 3px;}
.tool-box .boxheading a, .tool-box .boxheading a:visited
{color: #503562;}
.tool-box .boxbody {
background-color: #F1F1F1;
}
/* ANNOUNCEMENT-BOX, CONTROL-BOX, JUMP-BOX, LEGEND-BOX ---- */
.announcement-box, .control-box, .jump-box, .legend-box, .breadcrumb-box
{border: none;
background-color: transparent;
padding: 0;}
.announcement-box .boxbody, .control-box .boxbody, .jump-box .boxbody, .legend-box .boxbody
{padding: 0;}
.legend-box .boxheading
{display: none;}
.control-box {
margin-bottom: 0;
padding: 0 5px;
font-weight: bold;
}
#forum_view .control-box.top {
height: 30px;
}
/* FORUM-BOX ---- */
.forum-box {
border: 0px none;
padding-left: 5px;}
/* MSN style author icon */
td.author
{background: url(http://images.yuku.com/image/gif/47e154746b866fcf1d7fe6794e7816df5d0819d.gif) no-repeat 5px 50%;
padding-left: 25px;}
.forum-box .boxheading { display: none; }
.forum-box .boxbody { padding: 0px; }
.forum-box a,
.forum-box a:link {
text-decoration: none;
font-weight: bold;
}
.forum-box a:hover {
text-decoration: underline;
}
.forum-name {
color: #CC6600;
font-size: 2em;
}
/* DISCUSSION-BOX ---- */
.discussion-box
{border: none;}
.discussion-box table {
border: 1px solid #503562;
width: 97%;
margin: 10px auto;
}
.discussion-box td { border: 1px solid #503562; }
.signature
{border-top: 1px solid #503562;}
.comment-header {
background-color: #ECF1F6;
color: #003366;
}
.post-content {
background-color: #FFFFE8;
padding: 5px;
}
.reply-box {
border: 1px solid #503562;
width: 97%;
margin: 10px auto;
}
div.breadcrumb-box {
padding: 10px;
}
div.breadcrumb-box li.last a:visited {
color: #003366;
}
.reply-box {
border: 1px solid #503562;
width: 97%;
margin: 10px auto;
}
/* (force width of column) */
div.discussion-box .avatar-block,
div.discussion-box .user-name
{width: 120px;}
/* previous and next topic links */
.topic-pagejump
{text-align: left;}
.topic-pagejump a.previous-topic,
.topic-pagejump a.next-topic
{float: none;
display: inline;}
.topic-pagejump a.next-topic
{padding-left: 1em;}
/* STATS-BOX ---- */
.stats-box,
.whosonline-box {
width: 98%;
margin: 10px auto;
border: 1px solid #503562;
}
.domain-time, .visitors
{border-bottom: 1px solid #503562;
padding-bottom: 10px;
min-height: 2em;}
* html .visitors
{height: 2em;}
.whosonline-box
.visitors li
{border-color: #003366;}
.domain-stats-box .boxbody,
.member-stats-box .boxbody {
overflow-y: auto
}
.legend-box {
padding: 0 5px 10px 5px;
}
/* SIDEBAR BOX ---- */
.sidebarholder .boxbody {
padding: 5px 10px;
font-size: 1.5em;
line-height: 25px;
font-weight: bold;
}
.sidebarholder form {
font-size: 0.75em;
text-align: center;
font-weight: normal;
}
.my-text {
margin: 5px auto;
padding-left: 3px;
}
/* TABLE ROWS (color alternate rows) */
#forum_view tr.even td,
#search_text tr.even td,
#domainstats_activemembers tr.even td
{ background-color: #ECF1F6;}
/* GENERAL TAGS ----------------------------------
(styles for misc general HTML tags) */
/* navigation bar ---- */
div.mgr-navigation-sliver-wrapper { border: none; }
div.mgr-navigation-sliver { border: none;}
div.mgr-right-col p.mgr-sliver-open-button { background-color: #503562; }
div.mgr-right-col p.mgr-sliver-open-button a:link { background-color: #503562; border: 1px solid #fff; }
div.mgr-right-col p.mgr-sliver-open-button a:hover { background-color: #846a9f; }
/* search ---- */
#search_form, form.search { margin: 0 20px; }
.advanced-search { float: right; padding: 5px 0 5px 10px; margin: 0 0 0 20px; }
.advanced-search a:link,
.advanced-search a:visited
{ color: #503562; }
.text {
padding: 2px 5px;
}
#submit {
padding: 2px 5px;
}
hr
{color: #003366;
background: #003366;
height: 1px;
border: none;}
blockquote {
border: 1px solid #003366;
padding: 5px;
}
/* TABLES ---- */
th, td
{padding: 2px;}
th
{background: #9999CC;
color: #fff;
}
.calendar table,
.calendar td,
.calendar th
{ border: 1px solid #503562; }
.calendar table {
margin: 1px;
}
/* HIDE THESE --------------------------------
(delete the below code if you want to show these features) */
.tags-box,
.post-tags,
.kudos,
.feeds,
.views,
.featured-box .content-footer,
#forum_view .featured-box,
#forum_view #msn-style,
#forum_viewtopic #msn-style,
#domainstats_activemembers #msn-style,
#directory_featured #msn-style,
.calendar #msn-style,
#search_advanced #msn-style,
#search_text #msn-style,
.post-page #msn-style,
td.latest a
{display: none;}
/* TOGGLE CONTENT ---- */
.content-links {
text-align: right;
padding: 5px 10px;
}
.content-links { display: none; }
#directory_default .content-links
{ display: block; }
#forum_view #yuku-style,
#forum_viewtopic #yuku-style,
#domainstats_activemembers #yuku-style,
#directory_featured #yuku-style,
.calendar #yuku-style,
#search_advanced #yuku-style,
#search_text #yuku-style,
.post-page #yuku-style
{ display: block; }
/* HACKS ---- */
* html #msn-style {
overflow-x: auto;
overflow-y: hidden;
width: expression(document.body.clientWidth - 176 + "px");
}
.scrolling div { clear: both; }
/* SUBFORUMS ---- */
ul.subforums-list {
margin-left: 15px;
}
ul.subforums-list li {
display: block;
margin-bottom: 5px;
}
.subforums-list li.unread {
background: url(http://www.ezboard.com/prefabs/ez/topicnew.gif) left center no-repeat;
padding-left: 12px;
}
.sidebar-sub,
.dropdown.sidebar-sub li a:link,
.dropdown.sidebar-sub li a:visited {
color: #666699;
text-decoration: underline;
text-align: left;
}
.dropdown.sidebar-sub li {
font-size: 0.9em;
}
Edited: minor updates.
Edited: uncheck convert urls
