(Done)Peekaboo help!

[M o u s e]

Site link: wolfpassion.proboards.com/index.cgi

<style type="text/css">
<!--
/* Peekaboo Side Tables (Right Side) CSS by SubDevo */
#rightNav {
  width: 24px;
  height: 100%;
  top: 0px;
  left: auto;
  right: 0px;
  position: fixed;
  _position: absolute;
}
#rightNavTog {
  position: absolute;
  width: 24px;
  height: 100%;
  left: 0px;
  cursor: pointer;
  background-image: url(http://i53.tinypic.com/2empxmu.png);
  background-position: left center
}
#rightNavContent {
  position: absolute;
  left: 24px;
  width: 230px;
  height: 100%;
  overflow: auto;
  text-align: center;
  color: #FFFFFF;
  background-image: url(http://i45.tinypic.com/28b9y6u.png);
}
-->
</style>

<!-- ============================================
START SubDevo's Peekaboo Side Tables (Right Side)
============================================= -->

<div id="rightNav" style="display:none; z-index:51;">
<div id="rightNavTog" title="Click to Hide or Show" onclick="togR_Nav(true)" onmouseover="this.style.backgroundImage='url(http://i54.tinypic.com/2weh1kh.png)'" onmouseout="this.style.backgroundImage='url(http://i53.tinypic.com/2empxmu.png)'"></div>
<div id="rightNavContent" style="display:none;" onscroll="setRnavCook(this.scrollTop,1)">

<!-- *** PLACE ALL RIGHT SIDE CONTENT BELOW THIS LINE *** -->

SIDE TABLE CONTENT HERE <br/><b>USE ONLY HTML FOR CONTENT!</B>

<!-- *** PLACE ALL RIGHT SIDE CONTENT ABOVE THIS LINE *** -->

</div>
</div>

<!-- ==========================================
END SubDevo's Peekaboo Side Tables (Right Side)
=========================================== -->

<script type="text/javascript">
/* Peekaboo Side Tables (Right Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* http://interoceandesigns.proboards.com or http://lsdp.proboards.com */

var R_memOnly=0; // Members Only? 1=Yes, 0=No
var R_TogWidth=24; // Width of Clickable area.
var R_SideWidth=230; // Width of content.

function setRnavCook(a,b){ var n=(b)?"R_NavTop=":"R_NavOpen=";
  document.cookie=n+a+"; expires=Sat, 17 Jan 2050 12:12:12 UTC; path=/";
}
function scrollRT(){R_NavH.scrollTop=(document.cookie.match(/R_NavTop=(\d+)/))?RegExp.$1:0;}
function togR_Nav(a){ var m=document.body,b=R_Nav.style,c=R_NavH.style;
  if(a!=true){if(is_IE){b.height=m.clientHeight;}
     b.right=-parseInt(m.scrollLeft)+"px"; b.top=parseInt(m.scrollTop)+"px";
  }else{
     if(c.display=="none"){c.display=""; b.width=R_wT;setRnavCook(1);
        if(R_NavFirst){R_NavFirst=false;setTimeout("scrollRT()",200);}else{scrollRT();}
     }else{setRnavCook(0);c.display="none"; b.width=R_TogWidth;}
}} var R_wT=1+R_TogWidth+R_SideWidth+"px",is_IE=(document.uniqueID)?true:false;
var R_Nav=document.getElementById ("rightNav"),R_NavH=document.getElementById ("rightNavContent");
if(!R_memOnly||pb_username!="Guest"){ R_Nav.style.display=""; var R_NavFirst=true;
  if(document.cookie.match(/R_NavOpen=1/)){togR_Nav(true);}
  if(is_IE){window.attachEvent("onscroll", togR_Nav); window.attachEvent("onresize", togR_Nav);}
}
</script>


Left Side CSS and Code.

<style type="text/css">
<!--
/* Peekaboo Side Tables (Left Side) CSS by SubDevo */
#leftNav {
  width: 24px;
  height: 100%;
  top: 0px;
  right: auto;
  left: 0px;
  position: fixed;
  _position: absolute;
}
#leftNavTog {
  position: absolute;
  width: 24px;
  height: 100%;
  right: 0px;
  cursor: pointer;
  background-image: url(http://i53.tinypic.com/2empxmu.png);
  background-position: right center;
}
#leftNavContent {
  position: absolute;
  right: 24px;
  width: 230px;
  height: 100%;
  overflow: auto;
  text-align: center;
  color: #FFFFFF;
  background-image: url(http://i45.tinypic.com/28b9y6u.png);
}
-->
</style>

<!-- ===========================================
START SubDevo's Peekaboo Side Tables (Left Side)
============================================ -->

<div id="leftNav" style="display:none; z-index:51;">
<div id="leftNavTog" title="Click to Hide or Show" onclick="togL_Nav(true)" onmouseover="this.style.backgroundImage='url(http://i54.tinypic.com/2weh1kh.png)'" onmouseout="this.style.backgroundImage='url(http://i53.tinypic.com/2empxmu.png)'"></div>
<div id="leftNavContent" style="display:none;" onscroll="setLnavCook(this.scrollTop,1)">

<!-- *** PLACE ALL LEFT SIDE CONTENT BELOW THIS LINE *** -->

SIDE TABLE CONTENT HERE <br/><b>USE ONLY HTML FOR CONTENT!</B>

<!-- *** PLACE ALL LEFT SIDE CONTENT ABOVE THIS LINE *** -->

</div>
</div>

<!-- =========================================
END SubDevo's Peekaboo Side Tables (Left Side)
========================================== -->

<script type="text/javascript">
/* Peekaboo Side Tables (Left Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* http://interoceandesigns.proboards.com or http://lsdp.proboards.com */

var L_memOnly=0; // Members Only? 1=Yes, 0=No
var L_TogWidth=24; // Width of Clickable area.
var L_SideWidth=230; // Width of content.

function setLnavCook(a,b){ var n=(b)?"L_NavTop=":"L_NavOpen=";
  document.cookie=n+a+"; expires=Sat, 17 Jan 2050 12:12:12 UTC; path=/";
}
function scrollLT(){L_NavH.scrollTop=(document.cookie.match(/L_NavTop=(\d+)/))?RegExp.$1:0;}
function togL_Nav(a){ var m=document.body,b=L_Nav.style,c=L_NavH.style;
  if(a!=true){if(is_IE){b.height=m.clientHeight;}
     b.left=parseInt(m.scrollLeft)+"px"; b.top=parseInt(m.scrollTop)+"px";
  }else{
     if(c.display=="none"){c.display=""; b.width=L_wT;setLnavCook(1);
        if(L_NavFirst){L_NavFirst=false;setTimeout("scrollLT()",200);}else{scrollLT();}
     }else{setLnavCook(0);c.display="none"; b.width=L_TogWidth;}
}} var L_wT=1+L_TogWidth+L_SideWidth+"px",is_IE=(document.uniqueID)?true:false;
var L_Nav=document.getElementById ("leftNav"),L_NavH=document.getElementById ("leftNavContent");
if(!L_memOnly||pb_username!="Guest"){ L_Nav.style.display=""; var L_NavFirst=true;
  if(document.cookie.match(/L_NavOpen=1/)){togL_Nav(true);}
  if(is_IE){window.attachEvent("onscroll", togL_Nav); window.attachEvent("onresize", togL_Nav);}
}
</script>


Instructions:

The instructions are the same for either side, so I will explain only the left side for this example.

Decide weather you want the side tables shown for members only or also for guests.
var L_memOnly=0; // Members Only? 1=Yes, 0=No
Change this to 1 (in the script) if you wish to hide the side tables from guests.

Each Peekaboo side table consists of 3 divs.
One outer div (leftNav), which holds two vertical divs: the content div (leftNavContent) and the toggle div (leftNavTog).
The first thing you need to decide is the width of your toggle div and the width of your content div (side table width). Enter your toggle div width in the script.
var L_TogWidth=24; // Width of Clickable area.

Now enter the SAME value in ALL the Maroon parts of the CSS.

#leftNav {
  width: 24px;
  height: 100%;
  top: 0px;
  right: auto;
  left: 0px;
  position: fixed;
  _position: absolute;
}
#leftNavTog {
  position: absolute;
  width: 24px;
  height: 100%;
  right: 0px;
  cursor: pointer;
  background-image: url(http://i53.tinypic.com/2empxmu.png);
  background-position: right center;
}
#leftNavContent {
  position: absolute;
  right: 24px;
  width: 230px;
  height: 100%;
  overflow: auto;
  text-align: center;
  color: #FFFFFF;
  background-image: url(http://i45.tinypic.com/28b9y6u.png);
}

Now enter your content width in the script:
var L_SideWidth=230; // Width of content.
Enter the same value in the Green part in the above CSS.

Okay you know how you see the peekaboo side table is blue on my site I was wondering if I could change that to an image instead or how do I change the writing on the side and the bar to gray I read over the colors on the post but the entire thing just confuses me really but I also really want to use it so if anyone knows how to please help me figure it out thanks!

Code Found:http://support.proboards.com/index.cgi?action=display&board=codedatabase&thread=383492&page=1

Exsample: supremacey-rpg.proboards.com/index.cgi

[M o u s e]

Just going to move this up hopfully someone can help me

[Cam]

You want this changed?

[M o u s e]

Yes that's the part I try putting colors where is said but it didn't do anything :/ Maybe I did it wrong.

[Cam]

Sept 28, 2011 2:51:48 GMT M o u s e said:

Yes that's the part I try putting colors where is said but it didn't do anything :/ Maybe I did it wrong.

It's an image that's why

[M o u s e]

so you know where to put in a image? :]

[Cam]

#leftNavTog {
position: absolute;
width: 24px;
height: 100%;
right: 0px;
cursor: pointer;
background-image: url(i53.tinypic.com/2empxmu.png);
background-position: right center;
}

replace the bold with the image url.

[M o u s e]

Zinc do you do graphics?

[Cam]

Sept 29, 2011 4:10:51 GMT M o u s e said:

Zinc do you do graphics?

Yes. We have a requests board though.