Board Software: JCINK
Problem With: header and replacing color across OTM and Staff images
Problem: The top header used to be static but now it moves from the top as you scroll down... also I cannot for the live of me change the colors across the OTM and Staff images even with jcink's nifty color trick
Evidence: http://madmenagerie.jcink.net/index.php?act=idx
Style Sheet
Quote:.updates { display: block;width: 100%;border-bottom: 1px solid #bfaf9c;padding: 10px 0px;text-align: left;font-family: times;font-size: 14px; }
.affiliates { padding: 10px 0px; }
.updates b { color: #97180e; }
.cont { display: inline-block;margin: -5px 16px 20px 0px;height: 70px;width: 70px;paddidng: 0px; }
.box1 { height: 70px;width: 70px;margin: 5px;float: left;border: 7px solid #c0bcbc; }
.cont a { display: relative;top: -60px;width: 78px;background: #423b35;position: relative;z-index: 2;float: left;margin: 5px;font-size: 9px;padding: 3px;text-align: center;color: #fbf7ec!important; }
.table0 a { display: block;text-align: center;text-transform: uppercase;font-family: times;letter-spacing: 2px;margin-bottom: 1px;padding: 2px;font-size: 9px;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;background-color: #c0bcbc; }
.table0 a:hover { background-color: transparent; }
html { overflow-x: auto; }
#location { margin-top: 290px;display: block;width: 100%; }
#location a { padding: 2px 5px 2px 7px;text-align: center;text-transform: uppercase;font-size: 9px;letter-spacing: 2px;font-family: times;text-decoration: none;margin-left: 5px;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #202020;background-color: #F0EBEB;border: 1px solid #bead9b; }
#location a:hover { color: #F0EBEB;border: 1px solid #d2c4b6; }
.desc a { display: inline!important;margin: 0px!important;font-size: 10px!important;letter-spacing: 0px!important;text-decoration: none;padding-left: 3px;color: #af2d2d!important; }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;margin: 0px;padding: 0px;background: url(http://i60.tinypic.com/2dl5653.jpg);color: #60534b; }
.border { padding: 5px;width: 900px;display: block;margin: 20px auto;text-align: center;border: 1px solid #bdac99; }
.boardmain { padding: 20px;display: block;margin: auto;width: 858px;background-color: #F0EBEB;border: 1px solid #bdac99; }
.banner { display: block;margin: auto;width: 890px;background: url(http://i59.tinypic.com/17963t.jpg);height: 450px;background-color: #F0EBEB;border: 1px solid #bdac99; }
.table1 { border-right: 1px solid #202020;padding: 0px 15px 0px 0px;text-align: justify; }
.table2 { border-right: 1px solid #202020;padding: 0px 15px;text-align: justify; }
.table0 { padding: 0px 0px 0px 15px;text-align: justify; }
.firstbox { display: block;padding: 10px;font-family: times;line-height: 16px;letter-spacing: 1px;font-size: 12px;text-shadow: 1px 1px 0px #3f3732;color: #dfd7c9;background-color: #202020; }
.letter { font-style: italic;font-size: 50px;font-weight: 100;display: block;width: 50px;float: left;margin: 15px -7px 10px 2px; }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;color: #60534b; }
#ipbwrapper { text-align: left;width: 90%;margin: 5px auto 0 auto; }
a:link, a:visited, a:active { text-decoration: none;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;text-transform: uppercase;color: #97180e; }
a:hover { text-decoration: none!important;color: #000; }
.caldate { text-align: right;font-weight: bold;font-size: 11px;padding: 4px;margin: 0px;color: #777;background-color: #DFE6EF; }
#calendarname { font-size: 22px;font-weight: bold; }
#padandcenter { margin-left: auto;margin-right: auto;text-align: center;padding: 14px 0px 14px 0px; }
#profilename { font-size: 28px;font-weight: bold; }
#photowrap { padding: 6px; }
#phototitle { font-size: 24px;border-bottom: 1px solid black; }
#photoimg { text-align: center;margin-top: 15px; }
#ucpmenu { line-height: 150%;width: 22%;background-color: #fbf6ec;border: 1px solid #ece4d7; }
#ucpmenu a { text-decoration: none; }
#ucpmenu a:hover { text-decoration: underline; }
#ucpmenu p { padding: 2px 5px 6px 9px;margin: 0px; }
#ucpcontent { line-height: 150%;width: auto;background-color: #fbf6ec;border: 1px solid #ece4d7; }
#ucpcontent p { padding: 10px;margin: 0px; }
#ipsbanner { position: absolute;top: 0px;right: 5%;display: none; }
#logostrip { display: none;height: 56px;padding: 0px;margin: 0px;border: 1px solid #345487;background-image: url(style_images/2/altlogostrip-2.gif); }
#submenu { display: none;font-size: 10px;font-weight: bold;position: fixed;width: 100%;margin-bottom: 3px;background-color: #000; }
.newstext { display: none; }
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight: bold;font-size: 10px;text-decoration: none;color: #F0EBEB; }
#submenu a:hover { text-decoration: underline; }
#userlinks { position: fixed;display: block;text-align: center;width: 100%;z-index: 3;height: 30px;background-color: #202020; }
#userlinks td { font-weight: normal!important;text-transform: uppercase;font-size: 10px;text-shadow: 1px 1px 0px #000;font-family: times;letter-spacing: 1px;padding-left: 0px;margin-left: 0px;text-align: center;color: #9d9088; }
#userlinks a { text-decoration: none;font-weight: normal!important;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #F0EBEB; }
#userlinks a:hover { color: #c5bba8; }
#navstrip { font-weight: bold;padding: 6px 0px 6px 0px;display: block;margin: 5px; }
.activeuserstrip { padding: 6px;background-color: #fffbf5; }
.normalname { font-size: 12px;font-weight: bold;color: #003; }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px; }
.unreg { font-size: 11px;font-weight: bold;color: #900; }
.post1 { background-color: #fffbf5; }
.post2 { background-color: #fffbf5; }
.postdetails { font-size: 10px; }
.postcolor { font-size: 12px;line-height: 160%; }
small { display: inline-block;margin: 5px;font-weight: bold; }
large { display: inline-block;margin: 5px;font-weight: bold; }
.postlinksbar { padding: 3px;margin-top: 1px;font-size: 10px;border-right: 1px solid #fffbf5;border-left: 1px solid #fffbf5;background-color: #fffbf5; }
.signature { font-size: 10px;line-height: 150%; }
.row1 { background-color: #fffbf5; }
.row2 { background-color: #fffbf5; }
.row2 a { text-decoration: none; }
.row2 a:hover { text-decoration: underline; }
.row3 { background-color: #fffbf5; }
.row4 { background-color: #fffbf5; }
.darkrow1 { color: #202020;background-color: #ece4d7; }
th.darkrow1 { text-align: left; }
.darkrow2 { font-size: 1px;color: #202020;background-color: #ece4d7; }
div.darkrow2 { font-size: 11px;background-color: #ece4d7; }
.darkrow3 { color: #202020;background-color: #ece4d7; }
.hlight { background-color: #fffbf5; }
.dlight { background-color: #fffbf5; }
.maintitle { padding: 10px;text-align: center;margin-left: -1px;margin-top: -1px;width: 97.9%;background-color: #202020; }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none;text-transform: uppercase;font-family: times;letter-spacing: 3px;font-size: 12px;text-shadow: 1px 1px 0px #000;color: #F0EBEB; }
.titlemedium { text-align: center;font-weight: normal;text-transform: uppercase;font-size: 1px;letter-spacing: 2px;padding: 0px;margin: 0px;color: #c0b7a6;background-color: #F0EBEB; }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline;color: #3A4F6C; }
.plainborder { border: 0px solid #d6cabd; }
.tableborder { padding: 0px;border: 1px solid #202020; }
.tablefill { padding: 6px;background-color: #f9f8f8;border: 1px solid #345487; }
.tablepad { padding: 6px;background-color: #f9f8f8; }
.tablebasic { width: 100%;margin: 0px;border: 0px; }
.wrapmini { float: left;line-height: 1.5em;width: 25%; }
.pagelinks { float: left;line-height: 1.2em;width: 35%; }
.desc { font-size: 10px;display: block;width: 95.4%;margin: 5px;text-align: justify!important;padding: 5px 5px;color: #97896f;background-color: #fffcf8;border: 1px solid #e9e0cf; }
.tooltip { text-transform: uppercase;text-align: left;display: block;margin: 5px 0px -14px 10px;font-family: times;letter-spacing: 2px;font-size: 12px;text-decoration: none!important;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #af2d2d!important; }
.tooltip:hover { font-style: italic!important; }
.edit { font-size: 9px; }
.searchlite { font-weight: bold;color: #F00;background-color: #FF0; }
#QUOTE { white-space: normal;font-family: Verdana, Arial;font-size: 11px;padding: 2px;margin-top: 2px;color: #465584;background-color: #FAFCFE;border: 1px solid #576984; }
#CODE { white-space: normal;font-family: Courier, Courier New, Verdana, Arial;font-size: 11px;padding: 2px;margin-top: 2px;color: #465584;background-color: #FAFCFE;border: 1px solid #576984; }
form { display: inline; }
label { cursor: pointer; }
fieldset.search { padding: 6px;line-height: 150%; }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px;font-family: verdana, helvetica, sans-serif;vertical-align: middle;margin-top: 2px;color: #776546;background-color: #fff;border: 1px solid #ece4d7; }
.codebuttons { font-size: 10px;font-family: verdana, helvetica, sans-serif;vertical-align: middle;margin-top: 2px;color: #3A4F6C;background-color: #fff;border: 1px solid #576984; }
.thin { padding: 6px 0px 6px 0px;line-height: 140%;margin: 2px 0px 2px 0px;border-top: 1px solid #FFF;border-bottom: 1px solid #FFF; }
.thin a { text-decoration: none; }
.pformstrip { font-weight: bold;font-size: 8px;text-transform: uppercase;letter-spacing: 2px;padding: 5px;margin-top: 1px;color: #3f3732;background-color: #ece4d7; }
.pformleft { padding: 6px;margin-top: 1px;width: 25%;border-top: 1px solid #C2CFDF;border-right: 1px solid #C2CFDF;background-color: #f9f8f8; }
.pformleftw { padding: 6px;margin-top: 1px;width: 40%;border-top: 1px solid #C2CFDF;border-right: 1px solid #C2CFDF;background-color: #f9f8f8; }
.pformright { padding: 6px;margin-top: 1px;border-top: 1px solid #C2CFDF;background-color: #f9f8f8; }
.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif;font-size: 9px;line-height: 12px; }
img { vertical-align: middle;border: 0px; }
img.attach { padding: 2px;border: 2px outset #EEF2F7; }
form div.tableborder div.pformstrip { border-bottom: 1px solid #fff;border-top: none; }
table.tablebasic td.pformleft { border: none; }
table.tablebasic td.pformleftw { border: none; }
table.tablebasic td.pformright { border: none; }
.purple { font-weight: bold;color: purple; }
.red { font-weight: bold;color: red; }
.green { font-weight: bold;color: green; }
.blue { font-weight: bold;color: blue; }
.orange { font-weight: bold;color: #F90; }
.warngood { color: green; }
.warnbad { color: red; }
.subforums { display: none; }
.ip_address { display: none; }
.mini { position: absolute;width: 230px;height: 300px;padding: 10px;top: 0px;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out; }
.mini:hover { position: absolute;width: 230px;height: 300px;top: 0px;background: #fff;padding: 10px;opacity: 0.9; }
.text { width: 85%;text-indent: 20px;font: italic 7px arial;text-transform: uppercase;line-height: 100%;text-align: justify;letter-spacing: 1px;margin-top: 12px;margin-bottom: 5px;color: #000; }
.minib { width: 75px;padding: 5px;font: 9px oswald;font-weight: 100;letter-spacing: 2px;text-align: center;text-transform: uppercase;color: #888;background-color: #eee; }
#fightclub { position: absolute;top: 500px;right: 5px; }
Board Wrapper
Quote:<!DOCTYPE html>
<html>
<head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
</head>
<body>
<% BOARD HEADER %>
<br><br>
<div class="border">
<div class="banner">
<span class="title"></span>
<div id="location"> </div>
</div>
</div>
<div class="border">
<div class="boardmain">
<div id="innerwrapper">
<div class="titlebanner">
</div>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td class="table1" vAlign="top" width="25%">
<div class="firstbox"><span class="letter">W</span>elcome to our Mad Menagerie. Shifters have been known to the humans for the past 24 years and live in 'seperate but equal' Shiftertowns. Will the Portland town remain peaceful, or will the walls come tumbling down?<br>
<marquee scrollamount="2">In Character Date is: <b>JANUARY 2020</b> PLEASE DATE YOUR THREADS.</marquee><br>
<marquee scrollamount="2">There is a temporary ban on: Ursines!.... We are currently looking for: humans, and felines</marquee>
</div>
</td>
<td class="table2" vAlign="top" width="25%">
<div class="secondbox">
<div class="cont"><img src="http://i212.photobucket.com/albums/cc239/heywilma/discolure/cooper%20thompson/ct006.png" class="box1"><a href="http://madmenagerie.jcink.net/index.php?showtopic=746" class="box1a">male otm</a></div>
<div class="cont"><img src="http://i1215.photobucket.com/albums/cc509/deceptiveflower/ICONS/18.png" class="box1"><a href="http://madmenagerie.jcink.net/index.php?showtopic=702" class="box1a">female otm</a></div><br>
<div class="cont"><img src="https://yt3.ggpht.com/-I4nbUBtMpOE/AAAAAAAAAAI/AAAAAAAAAAA/44hyzBwjbdw/s100-c-k-no/photo.jpg" class="box1"><a href="http://madmenagerie.jcink.net/index.php?showtopic=740" class="box1a"> wild animal </a></div>
<div class="cont"><img src="http://images6.fanpop.com/image/category/107/107557_1396425442_100_100.jpg" class="box1"><a href="http://madmenagerie.jcink.net/index.php?act=idx" class="box1a">kelpie</a></div>
</div>
</td>
<td class="table2" vAlign="top" width="25%">
<div class="secondbox">
<div class="cont"><img src="http://i47.tinypic.com/2nsnymf.jpg" class="box1"><a href="http://madmenagerie.jcink.net/index.php?showuser=1" class="box1a">alpha</a></div>
<div class="cont"><img src="http://i295.photobucket.com/albums/mm135/rights2fly/icons/horses/h11_by_rights2fly.png" class="box1"><a href="http://madmenagerie.jcink.net/index.php?showuser=2" class="box1a">kelpie</a></div><br>
<div class="cont"><img src="http://i295.photobucket.com/albums/mm135/rights2fly/icons/horses/h03_by_rights2fly.png" class="box1"><a href="http://madmenagerie.jcink.net/index.php?showuser=12" class="box1a">pegasus</a></div>
<div class="cont"><img src="http://i691.photobucket.com/albums/vv276/nomnomicons3/wolf12.jpg" class="box1"><a href="http://madmenagerie.jcink.net/index.php?act=idx" class="box1a">fenrir</a></div>
</div>
</td>
<td class="table0" vAlign="top" width="25%">
<div class="secondbox">
<a href="http://madmenagerie.jcink.net/index.php?showtopic=2"><div class="links">plot</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showtopic=3http://illusionsofgrandeur.b1.jcink.com/index.php?showtopic=3"><div class="links">rules</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showtopic=4"><div class="links">member groups</div></a>
<a href="http://madmenagerie.jcink.net/index.php?act=ST&f=1&t=6"><div class="links">shiftertown info</div></a>
<a href="http://madmenagerie.jcink.net/index.php?act=ST&f=3&t=9"><div class="links">f.a.q.</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showtopic=20"><div class="links">welcome wagon</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showforum=4"><div class="links">canons</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showforum=11/"><div class="links">wanted ads</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showtopic=187"><div class="links">site stats</div></a>
<a href="http://madmenagerie.jcink.net/index.php?act=ST&f=10&t=21"><div class="links">application</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showforum=24"><div class="links">plotting</div></a>
<A href="http://madmenagerie2020.tumblr.com/"><div class="links">tumblr</div></a>
<a href="http://madmenagerie.jcink.net/index.php?showforum=62"><div class="links">adverts</div></a>
</div>
</td>
</tr>
</table>
<div id="navi">
<% NAVIGATION %>
</div>
<% BOARD %>
<div id="skin_selector">
<% SKIN_SELECTOR %>
</div>
<center>SKIN BY <a href="http://rpg-directory.com/members/bonbon.14453/">BONBON</a>.</center>
<% COPYRIGHT %>
<script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| ');</script>
</div>
</div>
<center><a href="http://rpg-directory.com/" target="_blank"><img src="http://rpg-directory.com/images/affiliate_green.png" alt="RPG-D" title="RPG-Directory" border="0" /></a>
<a href="http://www.toprpsites.com/details/madmenagerie/"><img src="http://www.toprpsites.com/votebutton.gif"></a>
<!-- BEGIN Beautiful RPG CODE -->
<a href="http://www.ultimatetopsites.com/bin/topsite.cgi?anjewl90&cat=games&ID=305">
<img src="http://www.ultimatetopsites.com/bin/votepicture.art?anjewl90&cat=games&ID=305" border=0></a>
<!-- END Beautiful RPG CODE -->
</center>
<center><a href="http://thecimarronhearts.proboards.com/" target="_blank" title="The Cimarron Hears v3"><img src="http://i56.tinypic.com/zy901l.png" alt="The Cimarron Hearts v3" width="88" height="31" /></a><a href="http://theirworld.b1.jcink.com/"
target="_blank"><img src="http://i83.photobucket.com/albums/j281/Attessya/nvxp_zpsdc27a57c.jpg" alt="Their World"></a> <a href=" http://mactirefalls.proboards.com/" target="_blank"><img src=" http://imageshack.com/a/img199/2676/xuaq.jpg" border="0" alt="Mactire Falls"/></a> <a href="http://thekillerinme.jcink.net/" target="_blank"><img src="http://i.imgur.com/ZVjGr47.png"></a><a href=" http://blood.sinful-ties.net/"><img src="http://i8.photobucket.com/albums/a25/pixieloulou1982/affiliate_zps61c386af.png"></a><a href="http://thepacksfateswolfrp.forumotion.com" target="_blank"><img src="http://i.imgur.com/6NdOIfD.jpg"/></a><a href="http://ioes.jcink.net/"><img src="http://i.imgur.com/yRNeeJc.png"></a><a href="http://tts-rpg.com" target="_blank"><img src="http://tts-rpg.com/88x31.png"></a>
</center>
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="2">
<a href="http://shine.b1.jcink.com/"><img src="http://shine.b1.jcink.com/uploads/shine/adbutton/button.png" border="0"></a> <a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND"><img src="http://i.imgur.com/75WYjg2.png"></a> <a href ="http://z10.invisionfree.com/shadowplay"><img src="http://i58.photobucket.com/albums/g279/jessitap/Shadowplay/shadowplayaffbuttoncopy.png"></a>
<a href="http://bmc.jcink.net/index.php?act=idx" target="_blank"><img src="http://i.imgur.com/h75ejwP.gif"></a> <a href="http://fbtlg.b1.jcink.com/index.php?act=idx"><img src="http://i.imgur.com/RaFWyXq.gif"></a><a href="http://mordu.boards.net/"><img title="mor'du" src="http://i803.photobucket.com/albums/yy316/brokenphotography/New%20Beginnings/button.png"></a> <a href="http://siccus.b1.jcink.com/"target="_blank"><img src="http://img.photobucket.com/albums/v220/Bandshee/Siccus/sicban_zps4e5110d3.png"></a><a href=http://crywolf.jcink.net/index.php?><img src=http://i.imgur.com/jXMbyJA.gif></a><a href="http://rpgdragons.forumotion.com"><img src="http://s24.postimg.org/saf7lonkx/140883668387846_65979.jpg"</a> <a href="http://strangersinthenight.jcink.net/"><img src="http://i.imgur.com/JZbJIGu.png"></a><a href="http://cursedx.freeforums.net" target="_blank"><img src="http://i1077.photobucket.com/albums/w467/bethyxgirlx/bethyxgirlx005/cursedaff_zpsc29247e0.png" border="0" alt="Cursed, A Bitten RP"/></a><a href='http://chewingonpearls.b1.jcink.com/'><img border=0 src='http://i.imgur.com/79PJH9L.png'></a>
<a href="http://witf-rpg.proboards.com"><img src="http://i60.tinypic.com/fac6jc.jpg"></a>
</marquee>
<p><p><p>
<!-- BEGIN CBOX - http://www.cbox.ws - v4 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 850px; font-size: 0;">
<div style="position: relative; height: 305px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#FFFFFF 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3437361&boxtag=h817a2&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3437361" id="cboxmain3-3437361"></iframe></div>
<div style="position: relative; height: 75px; overflow: hidden; border:#FFFFFF 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3437361&boxtag=h817a2&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3437361" id="cboxform3-3437361"></iframe></div>
</div>
<!-- END CBOX -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div id="fightclub"><a href="http://madmenagerie.jcink.net/index.php?showforum=73" target="_blank" alt="RPG-Directory"><img src="http://i59.tinypic.com/2dheog9.png" /></a></div>
</body>
</html>