GM Silver Skin (296 views)

[Zaxinou]

Okay so I've been playing around a lot with CSS and I wanted to see how much I can change without using images for tables or gradients. The only problem is... This skin wont work properly in IE.

---

Preview Image

Features:

• Rounded tables
  
• PM bar
  
• Input border hover effect
  
• Info Center icons hidden
  
• Info Center head/base images

Settings: Text Menus: yes

Global Header
<script type="text/javascript">
<!--
/* Welcome Table Edit - Open Source */

var table = document.getElementsByTagName("table");
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByTagName("td");
var font = document.getElementsByTagName("font");
var br = document.getElementsByTagName("br");

function getID(thisID) {
return document.getElementById(thisID);
}

font.item(1).parentNode.removeChild(font.item(1));
td.item(2).style.display = "none";
td.item(5).align = "right";
table.item(0).cellSpacing = "0";
table.item(0).className = "";
table.item(0).style.backgroundColor = "transparent";
br.item(0).style.display = "none";

//-->
</script>
<script type="text/javascript">
<!--
// Remove Brackets in Text Menu by Smangii
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,'');
menu[e].innerHTML = menu[e].innerHTML.replace(/(\])/gi,'');
}}
//-->
</script>
<style type="text/css">
<!--
body{
background-color: #9e9e9e;
}
font{
font-family: Verdana;
color: #7f7f7f;
}
.welcomebg{
background-color: #cfcfcf;
background-image:linear-gradient(-90deg, #dedede, #c0c0c0);
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%,from(rgb(223,223,223)),to(rgb(193,193,193)));
background-image:-moz-linear-gradient(-90deg,#dedede,#c0c0c0);
border: 1px solid #7f7f7f;
border-bottom: none;
}
.menubg{
padding: 5px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
background-color: #cfcfcf;
background-image:linear-gradient(-90deg, #dedede, #c0c0c0);
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%,from(rgb(223,223,223)),to(rgb(193,193,193)));
background-image:-moz-linear-gradient(-90deg,#dedede,#c0c0c0);
border: 1px solid #7f7f7f;
}
.menubg a:link, .menubg a:visited{
text-transform: uppercase;
padding: 0px 10px;
}
.nav:link, .nav:visited{
font-size: 11px;
color: #7f7f7f;
}
.bordercolor{
margin-bottom: 2px;
margin-top: 2px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #cfcfcf;
background-image:linear-gradient(-90deg, #dedede, #c0c0c0);
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%,from(rgb(223,223,223)),to(rgb(193,193,193)));
background-image:-moz-linear-gradient(-90deg,#dedede,#c0c0c0);
border: 1px solid #7f7f7f;
}
.windowbg, .windowbg2{
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 5px;
background-color: transparent;
}
.windowbg table tr td.windowbg, .windowbg2 table tr td.windowbg2{
background: none;
border: none;
}
.catbg, .titlebg{
font-size: 10px;
font-family: Tahoma;
text-transform: uppercase;
background-color: transparent;
}
.cattext, .titletext{
font-size: 10px;
font-family: Tahoma;
text-transform: uppercase;
}
.catbg a:link, .catbg a:visited, .titlebg a:link, .titlebg a:visited{
font-size: 10px;
color: #767676;
}
a:link, a:visited{
color: #4080b0;
}
a:hover{
text-decoration: underline;
}
hr, .hr{
width: 100%;
background-color: #8f8f8f;
color: #7f7f7f;
}
.popuptitlebg{
background-color: #cfcfcf;
font-style: normal;
font-weight: bold;
font-size: 12px;
color: #767676;
}
.code{
font-size: 10px;
font-family: Courier New;
color: #7f7f7f;
background-color: transparent;
}
.quote{
font-size: 10px;
color: #7f7f7f;
background-color: transparent;
}
input, textarea{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid #8f8f8f;
}
textarea:focus, input:focus{
border-collapsed: collapsed;
border: 1px dashed #7f7f7f;
}
.internetexplorer{
border-collapsed: collapsed;
border: 1px dashed #7f7f7f;
}
.textButton{
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #cfcfcf;
border: 1px solid #7f7f7f;
font-size: 10px;
font-family: Arial;
}
#footer{
font-size: 9px;
}
//-->
</style>
<div id="sspmbar">
<br /><table class="bordercolor" align="center"><tr><td class="windowbg2"></td></tr></table></div>

<script type="text/Javascript">
// Simple Style PM Bar v1 by Chris
// Do not redistribute without permission of the creator

var nWidth = "890"; // Width of the pm bar

// Don't edit
var aTD = document.getElementsByTagName("td");
if(pb_username == "Guest")
   var dat = "<a href='?action=login'>Login</a> | <a href='?action=register'>Register</a>";
else
   var dat = "<a href='?action=pm'>"+(aTD[2].innerHTML.match(/(messages?)<\/a>, (\d+) \w{2,3} new/i)?RegExp.$2+" new "+RegExp.$1:"0 new messages")+"</a> | <a href='?action=pm'>Inbox</a> | <a href='?action=pm&view=2'>Outbox</a> | <a href='?action=recent'>Recent Posts</a>";

var ss = document.getElementById("sspmbar");
ss.getElementsByTagName("table")[0].width = nWidth;
ss.getElementsByTagName("td")[0].innerHTML = "<font style='float: right;'>Welcome, "+pb_displayname+".</font>"+dat;
document.body.insertBefore(ss, document.getElementsByTagName("table")[0].nextSibling);

</script>

Global Footer
<script type="text/javascript">
<!--
table = document.getElementsByTagName('table');
for(t=0; t<table.length; t++) {
table[t].cellSpacing='0';
if(table[t].width=="92%")
table[t].width='890px';
}
//-->
</script>
<script type="text/javascript">
<!--
/* Transparent Board Highlights - Open Source */

if(window.mouseOverHighlightCell) {
var hover = [ mouseOverHighlightCell, mouseOutHighlightCell ]
mouseOverHighlightCell = function(a) {
style.backgroundColor = "transparent";
hover[0](a);
}
mouseOutHighlightCell = function(a) {
style.backgroundColor = "transparent";
hover[1](a);
}
}
if(window.mouseOverHighlightCellB) {
var hover_sub = [ mouseOverHighlightCellB, mouseOutHighlightCellB ]
mouseOverHighlightCellB = function(a) {
style.backgroundColor = "transparent";
hover_sub[0](a);
}
mouseOutHighlightCellB = function(a) {
style.backgroundColor = "transparent";
hover_sub[1](a);
}
}
//-->
</script>
<script type="text/javascript">
<!--

if(navigator.appName=="Microsoft Internet Explorer" && (document.postForm || document.modifyForm || document.loginform)){
       if(document.getElementsByTagName('textarea').item(0)){
               var iText=document.getElementsByTagName('textarea');
               var i=iText.length-1;
               do{
                       iText.item(i).onfocus=function(){this.className='internetexplorer';};
                       iText.item(i).onblur=function(){this.className='';};
                       i--;
               }
               while(i>=0);
       }
       var iInp=document.getElementsByTagName('input');
       var a=iInp.length-1;
       do{
               iInp.item(a).onfocus=function(){this.className='internetexplorer';};
               iInp.item(a).onblur=function(){this.className='';};
               a--;
       }
       while(a>=0);
}

//-->
</script>
<script type = 'text/javascript'>
<!--
/*
Images to Text
By Michael (Wrighty)
Do Not Repost, Rip, Claim or Edit
*/
for(n = 0, i = document.getElementsByTagName('img'); n < i.length; n++)
if(i[n].src.match(/(s\d+\.)?images\.proboards\.com/) && i[n].src.match(/(\/button|search2|newpoll)/) && i[n].src.match(/(png|gif)$/) && !i[n].src.match(/_sm/)){
var f = document.createElement('font');
f.className = 'textButton';
i[n].parentNode.replaceChild(f.appendChild(document.createTextNode(i[n].alt.replace(/(\[|\])/g, ''))).parentNode, i[n]);
n--;
}
//->
</script>
<script type="text/Javascript">
// Remove "Author | Topic" Row by Chris
// Do not redistribute without permission of the creator

var aTD = document.getElementsByTagName("td");
if(location.href.match(/action=(display|(calendar|pm)view)/i) || document.title.match(/\s-\sSearch\sResults/i)){
   for(a=0;a<aTD.length;a++){
       if(aTD[a].className == "catbg" && aTD[a].width == "20%"){
           aTD[a].parentNode.style.display = "none";
       }
   }
}
</script>
<table width="890" class="bordercolor" align="center"><tr><td class="windowbg2"><div id="footer">Skin design by <a href="http://zaxinou.proboards.com" style="font-size: 9px;" target="_blank">Graphic Monks</a>. | Best viewed in <a href="http://www.mozilla.org/firefox?WT.mc_id=aff_en01&WT.mc_ev=click" style="color: #d64203; font-size: 9px;" target="_blank">Mozilla Firefox</a>.</div></td></tr></table>

Main Footer
<script type="text/javascript">
<!--
var tr=document.getElementsByTagName("tr");
if(location.href.match(/com\/?((index\.cgi)?\??(action=(ma.+ad|logout|home|change.+?))?(#.+)?)?$/)){
   for(i=0;i<tr.length-1;i++){
       var firstCell=tr[i].cells[0];
       if(firstCell.className=="titlebg" && firstCell.innerHTML.match(/Forum Name/)){
           firstCell.innerHTML=tr[i+1].cells[0].innerHTML;
           tr[i+1].style.display="none";
       }
   }
}
// -->
</script>
<script type="text/javascript">
<!--
/* Remove main page mark as read bar */
var TD = document.getElementsByTagName("td");
if(location.href.match(/com\/?((index\.cgi)?\??(action=(logout|home))?(#.+)?)?$/)){
for(i=TD.length-1; i>0; i--){
if(TD[i].innerHTML.match(/action=markallboardsread/) && TD[i].className == "catbg"){
TD[i].parentNode.style.display = "none";
break;
}}}
// -->
</script>
<script type="text/javascript">
<!--
/* remove info center titlebg */
var td=document.getElementsByTagName("td");
if(location.href.match(/(cgi\??(#.+)?|com\/?|logout|sread|change=.+?)$/)){
   for(i=0;i<td.length;i++){
       if(td[i].className=="titlebg" && td[i].innerHTML.match(/Info\sCenter/i)){
           td[i].parentNode.style.display="none";
       }
   }
}
// -->
</script>
<script type="text/javascript">
<!--
/* Remove Info Center Icons by UnChained */
/* Please leave this header intact. Do not repost. */
/* [url]http://proboardcoding.proboards58.com[/url] */

var td=document.getElementsByTagName("td")
if(location.href.match(/com\/?((\index\.cgi)?\??(action=(change.+?|home))?)?(#.+)?$/)){
 for(x=0;x<td.length;x++){
if(td[x].className.match(/windowbg/) &&td[x].width.match(/20/)){
  td[x].style.display="none";
     }
  }
}
//-->
</script>
Comments
Any editing needed feel free to PM me or post here.