Scroll Bar Help!, Can I have a different colored scroll bar in my modules then on the ri Options

[iCEiCE BABYYY]

Hey So here's the problem:

I want to add scroll bars in my modules that are a different color then the scroll bar in the right of my screen... Is that possible? If so, how?

Thanks for your help!

[*digital.fragrance*]

It's a little difficult, coding wise, but could you post your code? That way we can try to manipulate it to do different colors in each module.

[iCEiCE BABYYY]

It's a little difficult, coding wise, but could you post your code? That way we can try to manipulate it to do different colors in each module.

sure

CODE

<img src="http://x72.xanga.com/211d20e041033103666146/t73194679.png">
<br>

<link rel="shortcut icon" href="http://www.freewebs.com/glitzand_glam/favicon.ico"/>

<!-- begin code provided by createblog.com -->
<style type="text/css">
/* Stylesheet © WHOREiFiEDx_LAYOUTS */
body {
/* -Background Properties- */
  BACKGROUND-POSITION: top right;
  BACKGROUND-IMAGE: url(http://x5c.xanga.com/800d0be670c30103667701/t73195872.png);
  BACKGROUND-ATTACHMENT: fixed;
  BACKGROUND-REPEAT: repeat;
  BACKGROUND-COLOR: white;
/* -Scrollbar Style- */
  SCROLLBAR-FACE-COLOR: #ffffff;
  SCROLLBAR-ARROW-COLOR: #f4343b;
  SCROLLBAR-TRACK-COLOR: #ffffff;
  SCROLLBAR-SHADOW-COLOR: #ffffff;
  SCROLLBAR-HIGHLIGHT-COLOR: #f4343b;
  SCROLLBAR-DARKSHADOW-COLOR: #f4343b;
  SCROLLBAR-3DLIGHT-COLOR: #ffffff;
/* -Body Cursor- */
  CURSOR: crosshair;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, xmp {
/* -Main Font- */
   FONT-FAMILY: small fonts;
   FONT-WEIGHT: normal;
   TEXT-transform: uppercase;
   FONT-SIZE: 7px;
   COLOR: #000000;
}
U {
/* -Underlined- */
   FONT-FAMILY: georgia;
   FONT-WEIGHT: normal;
   FONT-SIZE: 9px;
   COLOR: #000000;
   TEXT-DECORATION: underline;
   BORDER-BOTTOM: 2px solid #f7e13f;
}
B, STRONG {
/* -Bold- */
   FONT-FAMILY: small fonts;
   FONT-SIZE: 7px;
   FONT-WEIGHT: normal;
   COLOR: #f4343b;
}
i, EM {
/* -Italicized- */
   FONT-FAMILY: script;
   FONT-WEIGHT: normal;
   TEXT-transform: none;
   FONT-SIZE: 30px;
   COLOR: #000000;
}
div.blogheader, .caption {
/* -Dates- */
   DISPLAY: none;
}
a:link, .footernav.link, a.footernav:link {
/* -Links- */
   FONT-FAMILY: small fonts;
   FONT-WEIGHT: normal;
   TEXT-transform: uppercase;
   FONT-SIZE: 7px;
   COLOR: #000000;
}
a:visited, a.footernav:visited  {
/* -Visited- */
   FONT-FAMILY: small fonts;
   FONT-WEIGHT: normal;
   TEXT-transform: uppercase;
   FONT-SIZE: 7px;
   COLOR: #000000;
  
}
a:active. a.footernav:active {
   FONT-FAMILY: small fonts;
   FONT-WEIGHT: normal;
   TEXT-transform: uppercase;
   FONT-SIZE: 7px;
   COLOR: #f7e13f;
   TEXT-DECORATION: none;
   TEXT-TRANSFORM: uppercase;
}
a:hover, a.footernav:hover, a.footernav.hover{
/* -Hovered- */
   FONT-FAMILY: small fonts;
   FONT-WEIGHT: normal;
   TEXT-transform: uppercase;
   FONT-SIZE: 7px;
   COLOR: 000000;
   BORDER-TOP: 1px solid #f7e13f;
   BORDER-BOTTOM: 1px solid #f4343b
   CURSOR: crosshair;
   LETTER-SPACING: 2px;
  
}
input, select, textarea, .textfield, .button {
/* -Dropdowns, Buttons, Textareas- */
   FONT-FAMILY: small fonts;
   FONT-WEIGHT: normal;
   TEXT-transform: uppercase;
   FONT-SIZE: 7px;
   COLOR: 000000;
   BORDER: 1px solid #000000;
   BACKGROUND-COLOR: f7e13f;
}
table.left th, table.module th {
/* -Module Title- */
   FONT-FAMILY: courier;
   FONT-WEIGHT: normal;
   FONT-SIZE: 15px;
   COLOR: black;
   TEXT-TRANSFORM: none;
   BACKGROUND-COLOR: f7e13f;
   TEXT-ALIGN: center;
   BORDER-BOTTOM: 2px solid #f4343b;
   BORDER-TOP: none;
   BORDER-RIGHT: none;
   BORDER-LEFT: none;
}
table.left TD, table.module td {
/* -Module Body- */
   BORDER-TOP: 1px solid #f4343b;
   BORDER-BOTTOM: none;
   BORDER-RIGHT: none;
   BORDER-LEFT: none;
   BACKGROUND-COLOR: ffffff;
}
table.left, table.module {
/* -Module Altogether- */
   WIDTH: 190px;
   BORDER: 1px solid black;
   BACKGROUND-COLOR: ffffff;
}
table.blogbody {
/* -Blog Entries- */
   WIDTH: 355px;
   BORDER-TOP: 1px solid black;
   BORDER-BOTTOM: 1px solid black;
   BORDER-RIGHT: 1px solid black;
   BORDER-LEFT: 1px solid black;
   BACKGROUND-COLOR: ffffff;
}
hr {
/* -Divider Below Your Entries- */
   WIDTH: 350px;
   HEIGHT: 3px;
   BORDER: 0px solid f4343b;
   COLOR: f4343b;
}
/* -Removes Header Navigation & Regular left modules. Remove this when not using custom mods- */
texttable.left, td.mainleft, table.left, table.navigation, table.search{display:none}
</style>
<table border=0 width="500"><tr><td valign="top" width="160">
<table border="1" cellspacing="0" cellpadding="1" width="100%" class="module">
<table border="1" cellspacing="0" cellpadding="1" width="100%" class="module">
<tr><th valign="top" align="center" class="module">RULES</th></tr>
<tr><td valign="top" class="module">
<u>001.</u> If you take anything from this site you must be subscribed <u>and</u> comment on the entry that you took something from! <b>[[</b>it would also be nice if you could comment with the icons number that you are using<b>]]</b><br><br>
<u>002.</u> Do not claim anything from this site to be your own, it's not.<b>I made all of the icons on this site unless stated otherwise!</b><br><br>
<u>003.</u> Do not edit the icons in any way!!<br><br>
<u>004.</u> Save all images to your computer!<br> Right Click» Save As...»Save Where ever! Easyyy stuff!<br><Br>
<u>005.</u> Tell everyone about this site! :)<br>
<u>006.</u> Have an <i>amazing  </i>   day! OH, and <b>visit my website please!</b> : www.freewebs.com/glitzand_glam
</td></tr></table><br>
<table border="1" cellspacing="0" cellpadding="1" width="120" class="module">
<tr><th valign="top" align="center" class="module">NAVIGATION</th></tr><tr><td valign="top">
»<a href="http://www.xanga.com/Private/SubscribeTo.aspx?user=layout_how_2">subscribe</a><br>
»<a href="http://xanga.com/private/home.aspx">Home</a><br>
»<a href="http://edit.xanga.com/claf.aspx">claf</a><br>
»<a href="http://www.freewebs.com/glitzand_glam">My Website</a><br>
»<a href="http://www.xanga.com/whoa_its_sarahh">Old Xanga</a><br>
</td></tr></table>
<br><table border="1" cellspacing="0" cellpadding="4" width="100%" class="module">
<tr><th valign="top" align="center" class="module">NEWEST ICON</th></tr>
<tr><td valign="top" class="module">
<center><img src="http://x71.xanga.com/62bd977411732103888652/q68883620.png" alt="Newest icon!" style="width:100px" /><br>1/29/07</center>
</td></tr></table><br>

<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module">
<tr><th valign="top" align="center" class="module">UPDATES</th></tr>
<tr><td valign="top" class="module">
<u>1/29/07</u><br> Fun music is added + <b>Umbrella, Theatre, & More Icons; Harry Potter Icons, & City Icons</b> 3 sets in one day :]
<br>
<u>1/28/07</u><br>New Layout with help from layout_how_2 & <b>Oriental Icons</b> are added.
</td></tr></table><br>

<table border="1" cellspacing="0" cellpadding="1" width="100%" class="module">
<tr><th valign="top" align="center" class="module">TUNES</th></tr>
<tr><td valign="top" class="module">
<object id="darkplayer" codeBase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject" height="0" standby="Loading Microsoft Windows Media Player components..." width="0" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param NAME VALUE>
<param NAME="ShowControls" VALUE="0">
<param NAME="ShowStatusBar" VALUE="0">
<param NAME="ShowDisplay" VALUE="0">
<param NAME="DefaultFrame" VALUE="Slide">
<param NAME="Autostart" VALUE="1">
<param NAME="Loop" VALUE="True">
</object>
</p>
<form name="form">
<p style="text-align: center">
<select style="FONT-FAMILY: small fonts; FONT-SIZE: 7pt; WIDTH: 135; height:174" name="playlist" size="1">
<option value="0"> THAT'S WHAT GIRLS DO </option>
<option value="1"> CRAZY FOR THIS GIRL </option>
<option value="2"> THE TIDE IS HIGH </option>
</select><br>
<input TYPE="BUTTON" NAME="darkplay" VALUE="GO!" OnClick="play(document.forms['form'].playlist);">
<input TYPE="BUTTON" NAME="darkpause" VALUE="PAUSE" OnClick="document.darkplayer.pause(); playstate=2;">
<input TYPE="BUTTON" NAME="darkstop" VALUE="HAULT!" OnClick="document.darkplayer.stop(); playstate=2;"></p>
</form>

<script language="JavaScript">
<!--
var playstate = 1;
shuffle = 1; // set to 0 to always play first song in list
// set to 1 to randomly choose the first song to play
// www.xanga.com/smartypants91780
// unlimited songs, just copy and paste the song line and change the number
songs=new Array();
songs[0]="http://images.ohhdanggggraphics.multiply.com/song/1/25/full/U2FsdGVkX18Faa3CXTXrXJ8STUPvm9HlAtJBVlzvgNH.0ou7GmOApns7d,LZHSzM/No%20Secrets%20-%20That%27s%20What%20Girls%20Do.mp3"
songs[1]="http://images.ohhdanggggraphics.multiply.com/song/1/36/full/U2FsdGVkX1.Kto.FEv9MuSVkAjbHMC.ReMNxn1cLV3fOu8wEMP,KfOtZPjuhE45g/Evan%20%26%20Jaron%20-%20Crazy%20For%20This%20Girl.mp3"
songs[2]="http://images.ohhdanggggraphics.multiply.com/song/1/34/full/U2FsdGVkX1.RWvHqjl4UaE6fVZCybuwfVHocTMrXFL0emNVtdEiWySyACc3ciZhL/Atomic%20Kitten%20-%20The%20Tide%20is%20High.mp3"

if (shuffle == 1) {
var randsg = Math.floor(Math.random()*songs.length);
document.darkplayer.FileName = songs[randsg];
document.darkplayer.scr = songs[randsg];
document.forms['form'].playlist.options[randsg].selected = true;
}
function play(list) {
if (playstate == 2) {
document.darkplayer.Play();
} else {
var snum = list.options[list.selectedIndex].value
document.darkplayer.FileName = songs[snum];
document.darkplayer.scr = songs[snum];
}
playstate = 1;
}
//-->
</script>
</td></tr></table><br>

<table border="1" cellspacing="0" cellpadding="1" width="120" class="module">
<tr><th valign="top" align="center" class="module">CREDIT</th></tr><tr><td valign="top">
The following have contributed to POPSICLE__icons in some way! Including: stock images, brushes, tutorials, or are just amazing sites that you should check out! If you think <B>you</B> should be on this list, then comment on a recent entry!<br>
»<A href="http://www.gettyimages.com/" target=_new>Getty Images</A><BR>»<A href="http://bitmapdreams.lastsecret.net/" target=_new>Bitmap Dreams</A><BR>»<A href="http://lj.indisguise.org/icontablegenerator.php" target=_new>In Disguise</A><BR>»<A href="http://www.tools.dynamicdrive.com/favicon/" target=_new>Dynamic Drive</A><BR>»<A href="http://meleada.livejournal.com/" target=_new>LJ- meleada</A><BR>»<A href="www.xanga.com/layout_how_2" target=_new>layout_how_2</A>

</td></tr></table>

<td width="500" valign="top" align="left">

^ that's in my header..


thanks for the help!

[*Azarel*]

table.left TD, table.module td {
/* -Module Body- */
BORDER-TOP: 1px solid #f4343b;
BORDER-BOTTOM: none;
BORDER-RIGHT: none;
BORDER-LEFT: none;
BACKGROUND-COLOR: ffffff;
}
table.left, table.module {
/* -Module Altogether- */
WIDTH: 190px;
BORDER: 1px solid black;
BACKGROUND-COLOR: ffffff;
}

Find that in your coding. Add and customize this in to either one of those css classes (I'm not sure which one will add the scrollbars to your modules.)

SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #f4343b;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #f4343b;
SCROLLBAR-DARKSHADOW-COLOR: #f4343b;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;

[iCEiCE BABYYY]

thanks! but how do I make only the modules on the left (not my posts) scroll?


i used the following code, but it made everything scroll, and I only want the left hand modules too..

CODE

<!-- begin code provided by LAYOUT_HOW_2 -->
<style type="text/css">
.custom{
width: 350px;
height: 250px;
z-index:100;
overflow: auto;
border: 0px #000000 solid;
background: #transparent;
}</style>
<!-- end code provided by LAYOUT_HOW_2 -->
<!-- begin code provided by LAYOUT_HOW_2 -->
<script>
var tds = document.getElementsByTagName ('a');
for (var i = 0; i < tds.length; i++) {
timeString = tds[i].innerText;
if(timeString.match(/\d+:\d+ [ap]m\b/i)){
if(!tds[i].parentNode.parentNode.parentNode.parentNode.parentNode.tagName.match(/table/i)){bre

ak;}
table = tds[i].parentNode.parentNode.parentNode.parentNode.parentNode;
stuff = tds[i].parentNode.parentNode.parentNode.previousSibling.lastChild;
inner = stuff.innerHTML
stuff.innerHTML="";
stuff.insertAdjacentHTML('afterBegin','<div class="custom">'+inner+'</div>');

}
}
</script>
<!-- end code provided by LAYOUT_HOW_2 -->

thank you!

[*digital.fragrance*]

Take what Anna (Azarel) gave you, and make it like this for your modules. (Edit the colors)

CODE

<style="text/css">table.left TD, table.module td {
/* -Module Body- */
BORDER-TOP: 1px solid #f4343b;
BORDER-BOTTOM: none;
BORDER-RIGHT: none;
BORDER-LEFT: none;
BACKGROUND-COLOR: ffffff;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #f4343b;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #f4343b;
SCROLLBAR-DARKSHADOW-COLOR: #f4343b;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;}

table.left, table.module {
/* -Module Altogether- */
WIDTH: 190px;
BORDER: 1px solid black;
BACKGROUND-COLOR: ffffff;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #f4343b;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #f4343b;
SCROLLBAR-DARKSHADOW-COLOR: #f4343b;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
</style>

And then do this for the other scrollbars (blog and page):

CODE

<style="text/css>body{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #f4343b;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #f4343b;
SCROLLBAR-DARKSHADOW-COLOR: #f4343b;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;</style>

Edit the colors that you want. The last code should control the body part of the page, and possible the scrollbars in your posts. I'm not sure if this will work - it's always very hard to get this to work.

[iCEiCE BABYYY]

thanks for posting! sorry, but I'm unsure where to put the codes. i tried putting them in a few spots but it didn't work! thanks for your help! again, i only want my left modules to have scroll bars, not my blog entries!

thanks :]

[*Kathleen*]

^ I'm pretty sure it would work in either the Header or Website Stats; I prefer putting it in the Header.

[iCEiCE BABYYY]

when i place it in the header, no scroll bar shows up.. and some attributes of my modules change.. [ the font/font color]

[*digital.fragrance*]

Dang nab. Well, I don't know what else would work for you. I couldn't remember if I ever got this to work or me or not. I think what it comes down to is that there can only be one scorllbar color for an enitre page.

[iCEiCE BABYYY]

blahhh ok. thanks for trying :]

is there any way to have scroll bars in my modules on the left side but not in my blog entries?

www.xanga.com/POPSICLE__icons



thanks again!