Spectrum
by Ahmed

Live demo: Click here

Description: A skin that uses no images (besides some of the defaults of course), which means you don’t need an image host to use this skin!

---

>> Installation

Global Header:<style type="text/css">
/*
Spectrum by Ahmed
http://kaikanjiforum.proboards.com
*/

.forumname {color: #afa8be; font-family: Courier New; font-size: 40px; text-shadow: 1px 1px 0px #413a52;}
.bordercolor {border: 1px solid #cbc7cf; padding: 4px;}
.titlebg, .catbg  {text-shadow: 0 1px 0 #faf9fb;}
.titlebg {font-size:11px; height: 20px; border-bottom: 1px dotted #cbc7cf; padding: 6px;}
.catbg {height: 20px; padding: 6px; border-top: 1px dotted #faf9fb;}
.windowbg {border-top: 1px dotted #faf9fb; border-bottom: 1px dotted #cbc7cf;}
.windowbg2 {border-top: 1px dotted #faf9fb; border-bottom: 1px dotted #cbc7cf;}
.cattext {font-size:11px;}
.titletext {font-size:11px;}
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {color: #37b1b9; text-decoration: none;}
.c1 {width: 10%; background-color: #a12854; height: 5px;}
.c2 {width: 10%; background-color: #ea6965;}
.c3 {width: 10%; background-color: #aa390f;}
.c4 {width: 10%; background-color: #f07d22;}
.c5 {width: 10%; background-color: #f7e360;}
.c6 {width: 10%; background-color: #dbd552;}
.c7 {width: 10%; background-color: #8ba222;}
.c8 {width: 10%; background-color: #92ca1d;}
.c9 {width: 10%; background-color: #53c2c9;}
.c10 {width: 10%; background-color: #37b1b9;}

.content {
background-color: #f1f0f2;
border-bottom: 2px solid #393347;
margin-left: 15px;
}
.menu a {
font-weight: bold;
font-size: 10px;
text-transform: lowercase;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 10px;
padding-right: 10px;
color: #8a868e;
display: inline-block;
}
.menu A:hover {
font-weight: bold;
font-size: 10px;
text-transform: lowercase;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 10px;
padding-right: 10px;
color: #92ca1d;
background-color: #6d6383;
}
.notifBar {
background-color: #e0dfe1;
margin-top: 10px;
border: 1px solid #cbc7cf;
text-shadow: 0 1px 0 #faf9fb;
}
.button {
background-color: #92ca1d;
color: #fff;
text-shadow: 0 -1px 0 #8ba222;
border-top: 1px solid #8ba222;
border-bottom: 2px solid #8ba222;
border-left: 1px solid #8ba222;
border-right: 1px solid #8ba222;
text-decoration: none;
font-family: Arial;
font-size: 10px;
font-weight: bold;
display: inline-block;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 8px;
padding-left: 8px;
margin: 0px;
}
.newposts {
background-color: #92ca1d;
color: #fff;
text-shadow: 0 -1px 0 #8ba222;
text-transform: uppercase;
border-top: 1px solid #8ba222;
border-bottom: 2px solid #8ba222;
border-left: 1px solid #8ba222;
border-right: 1px solid #8ba222;
font-family: Arial;
font-size: 7px;
font-weight: none;
display: inline-block;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 2px;
padding-left: 2px;
}
</style>


<script type="text/javascript">
document.getElementsByTagName('br')[0].style.display='none';
/* Remove Brackets in Text Menu */
var menu = document.getElementsByTagName('td');
for(e=0; e<menu.length; e++){
if(menu[e].className.match(/menubg/i)){
menu[e].innerHTML = menu[e].innerHTML.replace(/(\[)|(\])/gi,'');
}
}
</script>


<table width="900px" align="center" cellpadding="0" cellspacing="0"><tr><td colspan="10">
<table width="100%" cellpadding="0"><tr><td valign="bottom"><font class="forumname">

<!-- Edit text below to your forum name -->

Spectrum

</font></td><td valign="bottom" align="right" class="menu"><script>
<!--
var table=document.getElementsByTagName('TABLE')[0]
var TD=document.getElementsByTagName('TD')
var TD5=TD[5].innerHTML
document.write(""+TD5+"")
table.style.display="none";
-->
</script></td></tr></table>
</td>
</tr>
<tr><td class="c1"></td><td class="c2"></td><td class="c3"></td><td class="c4"></td><td class="c5"></td><td class="c6"></td><td class="c7"></td><td class="c8"></td><td class="c9"></td><td class="c10"></td></tr>
<tr><td valign="top" class="content" colspan="10">
<script type="text/javascript">
<!--
/* Invision-esque PM Bar */
var td = document.getElementsByTagName('td');
var newpm = (td[2].innerHTML.match(/<\/a>, (.+?) (are|is) new/i)) ? RegExp.$1: '';
var name = pb_displayname;
if(pb_username=='Guest'){
var pmhtml = '<table width="92%" align="center" cellpadding="8px" class="notifBar"><tr><td>Welcome Guest ( <a href="/index.cgi?action=login">Log In</a> | <a href="/index.cgi?action=register">Register</a> )</td><td align="right"><a href="/index.cgi?action=forgotpassword">Resend Validation Email</a></td></tr></table>';
} else {
var pmhtml = '<table width="92%" align="center" cellpadding="8px" class="notifBar"><tr><td><strong>Logged in as: <a href="/index.cgi?action=viewprofile">'+name+'</a></strong> ( <a href="/index.cgi?action=logout">Log Out</a> )</td><td align="right"><a href="/index.cgi?action=pm">Inbox ( '+newpm+' )</a> · <a href="/index.cgi?action=recent">View New posts</a> · <a href="/index.cgi?action=viewprofile">My Assistant</a></td></tr></table>';
}
document.write(""+pmhtml+"")
-->
</script>


Global Footer:</td></tr><tr><td colspan="10" align="right"><font color="8a868e">Spectrum Theme by <a href="http://kaikanjiforum.proboards.com">Ahmed</a></font></td></tr></table><BR>


<script type="text/javascript">
<!--
var fWidth = '98%';

var table = document.getElementsByTagName('table');
for(t=0; t<table.length; t++) {
   if(table.item(t).width == "92%") {
       table.item(t).width = fWidth;
   }
}
// -->
</script>


<script type="text/javascript">
/* Removes border */
table = document.getElementsByTagName('table');
for(t = 0; t < table.length; t ++) {
table[t].cellSpacing="0px";
}
</script>


<script type="text/javascript">
<!--
/* Last post column alignment */
var td=document.getElementsByTagName("TD")
for(t=0;t<td.length;t++){
if(td[t].width == "24%" && td[t].className == "windowbg2"){
td[t].align="center"
}
}
-->
</script>

Main Footer (optional):<script type="text/javascript">
<!--

/*Remove Navigation Tree - By iAlex - Open Source*/
var iLink=document.getElementsByTagName('a');
for(i=0;i<iLink.length;i++){
if(iLink.item(i).className.match(/^nav$/)){
while(!iLink.item(i).nextSibling.nodeName.match(/^(script|table|tr|td|div)$/i)){
iLink.item(i).parentNode.removeChild(iLink.item(i).nextSibling);
}
iLink.item(i).style.display='none';
break;
}
}

//-->
</script>

<script type="text/javascript">
//remove info center icons
var InfoIcon=document.getElementsByTagName("TD")
for(t=0;t<InfoIcon.length;t++){
if(InfoIcon[t].className.match("windowbg") && InfoIcon[t].width=="20" && InfoIcon[t].vAlign=="middle"){
InfoIcon[t].style.display="none"
}}
</script>

---

>> Editing
Look for the following lines of html in the Global Header and edit the colored parts:


Width of forum - By default, this skin's width is 900px. You can change it whatever width you'd like, percentages work too. Note: if you are using a fixed width (in pixels) the number you put here will need to be followed with "px", if it's in percentage you will need to place "%" after the number.
Forum name - This one is easy, just change this to your forum's name!

If you want the little green buttons shown in the preview, use the code from the link below. You do not need to use the CSS they provided:
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=13871


Last Edit: Aug 31, 2012 0:30:34 GMT by Deko