Help - Search - Members - Calendar
Full Version: scrollbars
Forums > Resource Center > Graphics Help > Graphics Help Resolved Topics
moorepocket
Nov 29 2004, 05:15 PM
ok, i have spent hours trying to figure out to make my scrollbars transparent but couldn't, so im asking if anyone can make it transparent.

here the website of the page http://free.hostultra.com/~shiftsdesign/002/index.html


here the iframe http://free.hostultra.com/~shiftsdesign/002/index2.html


i use the code to make it transparent but it not working

QUOTE
<IFRAME SRC="index2.html" NAME="Ryans" width=100% height=100% FRAMESPACING=0 FRAMEBORDER=0 SCROLLING=AUTO ALLOWTRANSPARENCY=TRUE style="filter: chroma(color=#F3B7A8);"></IFRAME>



ps: if you need the css, tell me so i can post it.
x juicy
Nov 29 2004, 05:58 PM
make sure you set the scrollbar colors to the color you put in the filter chroma thingie. so in your case, make sure your scrollbars are all set to this color: F3B7A8
moorepocket
Nov 29 2004, 06:02 PM
but i did set it to F3B7A8. It just make it all F3B7A8, and not transparent. I even set it in the css.
whomps
Nov 29 2004, 06:08 PM
Try doing this..

CODE
<!-- begin code provided by createblog.com -->

<div style="filter: chroma(color=#F3B7A8);">
<IFRAME SRC="index2.html" NAME="Ryans" width=100% height=100% FRAMESPACING="0" FRAMEBORDER="0" ALLOWTRANSPARENCY="TRUE" style="filter: chroma(color=#F3B7A8); overflow: auto;"> </IFRAME></div>
<!-- end code provided by createblog.com -->
moorepocket
Nov 29 2004, 07:42 PM
no it not working. go here to see what it looks like.

http://free.hostultra.com/~shiftsdesign/misc/untitled.JPG


here the index.html

QUOTE(moorepocket)
<HTML>
<HEAD>
<TITLE>..:: Loveliness Sakura ::..</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY BGCOLOR=#F3B7A8 leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<TABLE WIDTH="100%" HEIGHT="100%" ALIGN="CENTER">
<!-- ImageReady Slices (sakura.psp) -->
<TD WIDTH="100%" HEIGHT="100%" VALIGN="MIDDLE" ALIGN="CENTER" class="main">
<table width=700 border=0 cellpadding=0 cellspacing=0 <TR>
 <TD ROWSPAN=5>
  <IMG SRC="images/sakura2_01.jpg" WIDTH=18 HEIGHT=525></TD>
 <TD COLSPAN=2>
  <IMG SRC="images/sakura2_02.jpg" WIDTH=682 HEIGHT=23></TD>
</TR>
<TR>
 <TD>
  <background="images/sakura2_03.jpg" WIDTH=375 HEIGHT=401">
  <IFRAME SRC="index2.html" NAME="Ryans" width=100% height=100% FRAMESPACING="0" FRAMEBORDER="0" ALLOWTRANSPARENCY="TRUE" style="filter: chroma(color=#F3B7A8);"> </IFRAME></TD>
 <TD>
  <IMG SRC="images/sakura2_04.jpg" WIDTH=307 HEIGHT=401></TD>
</TR>
<TR>
 <TD>
  <IMG SRC="images/sakura2_05.jpg" WIDTH=375 HEIGHT=24></TD>
 <TD>
  <IMG SRC="images/sakura2_06.jpg" WIDTH=307 HEIGHT=24></TD>
</TR>
<TR>
 <TD>
  <IMG SRC="images/sakura2_07.jpg" WIDTH=375 HEIGHT=56></TD>
 <TD>
  <IMG SRC="images/sakura2_08.jpg" WIDTH=307 HEIGHT=56></TD>
</TR>
<TR>
 <TD COLSPAN=2>
  <IMG SRC="images/sakura2_09.jpg" WIDTH=682 HEIGHT=21 BORDER=0 USEMAP="#sakura2_09"></TD>
</TR>
</TABLE>
<MAP NAME=sakura2_09>
<AREA SHAPE="rect" COORDS="257,1,381,15" HREF="http://shift-design.pixelette.net" ALT="Layout © by Shift-Design" TARGET="_new">
</MAP>
<!-- End ImageReady Slices -->

</div>
<div style="position:absolute; top:510px; left:185px; class="nav";>
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
</BODY>
</HTML>


main directory (http://free.hostultra.com/~shiftsdesign/002/)
tofumonzter
Nov 29 2004, 10:17 PM
why not just change scroll to no? huh.gif
sweetxsimplicity
Nov 29 2004, 11:38 PM
Is it possible to make transparent scrollbars for iframes?
>.<;;
whomps
Nov 30 2004, 02:00 AM
Wait, the scrollbar is connected to the iframe.. and if you want the whole scrollbar to be transparent, you're gonna have to make the iframe transparent.

And yes, Brianna it IS possible. _smile.gif
moorepocket
Nov 30 2004, 03:59 PM
QUOTE(x_angawhomps @ Nov 30 2004, 2:00 AM)
Wait, the scrollbar is connected to the iframe.. and if you want the whole scrollbar to be transparent, you're gonna have to make the iframe transparent.

And yes, Brianna it IS possible. _smile.gif

so do i just add this...

QUOTE
<IFRAME SRC="index2.html" NAME="Ryans" width=100% height=100% FRAMESPACING="0" FRAMEBORDER="0" ALLOWTRANSPARENCY="TRUE" style="filter: chroma(color=#F3B7A8);"> </IFRAME>


... to the index2.html (iframe)??
hlall
Nov 30 2004, 04:17 PM
CODE
<!-- begin code provided by createblog.com -->
filter:chroma(color=#00FF00); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #000000;
scrollbar-face-color: #00FF00; /* transparent */
scrollbar-3dlight-color: #00FF00; /* transparent */
scrollbar-darkshadow-color: #00FF00; /* transparent */
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #00FF00; /* transparent */
}

<!-- end code provided by createblog.com -->


that's roxannes code for xanga transparent... so... what you want to do is have whatever the chroma color is be transparent... i reccomend using some color you don't use on the page... just in case.

so try this
CODE
<!-- begin code provided by createblog.com -->
<IFRAME SRC="index2.html" NAME="Ryans" width=100% height=100% FRAMESPACING=0 FRAMEBORDER=0 SCROLLING=AUTO ALLOWTRANSPARENCY=TRUE style="filter: chroma(color=#3f3f3f);scrollbar-color: #3f3f3f;"></IFRAME>
<!-- end code provided by createblog.com -->
moorepocket
Nov 30 2004, 08:36 PM
ok. i got the scroll bars transparent and now my page looks like this.

http://free.hostultra.com/~shiftsdesign/misc/2.JPG

what up with it?


QUOTE(moorepocket)
<HTML>
<HEAD>
<TITLE>..:: Loveliness Sakura ::..</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<body style="overflow-y:hidden; overflow-x:hidden">
<BODY BGCOLOR=#F3B7A8 leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<TABLE WIDTH="700" HEIGHT="525" ALIGN="CENTER" VALIGN="MIDDLE">
<!-- ImageReady Slices (sakura.psp) -->
<TD WIDTH="700" HEIGHT="525" VALIGN="MIDDLE" ALIGN="CENTER">
<table width=700 border=0 cellpadding=0 cellspacing=0>
<TR>
  <TD ROWSPAN=5>
   <IMG SRC="images/sakura2_01.jpg" WIDTH=18 HEIGHT=525></TD>
  <TD COLSPAN=2>
   <IMG SRC="images/sakura2_02.jpg" WIDTH=682 HEIGHT=23></TD>
</TR>
<TR>
  <TD>
   <td COLSPAN=5 background="images/sakura2_03.jpg" WIDTH=375 HEIGHT=401><IFRAME SRC="index2.html" NAME="Ryans" width=375 height=401 FRAMESPACING="0" FRAMEBORDER="0" ALLOWTRANSPARENCY="TRUE" style="filter: chroma(color=#D06850);"></IFRAME></TD>
  <TD>
   <IMG SRC="images/sakura2_04.jpg" WIDTH=307 HEIGHT=401></TD>
</TR>
<TR>
  <TD>
   <IMG SRC="images/sakura2_05.jpg" WIDTH=375 HEIGHT=24></TD>
  <TD>
   <IMG SRC="images/sakura2_06.jpg" WIDTH=307 HEIGHT=24></TD>
</TR>
<TR>
  <TD>
   <IMG SRC="images/sakura2_07.jpg" WIDTH=375 HEIGHT=56></TD>
  <TD>
   <IMG SRC="images/sakura2_08.jpg" WIDTH=307 HEIGHT=56></TD>
</TR>
<TR>
  <TD COLSPAN=2>
   <IMG SRC="images/sakura2_09.jpg" WIDTH=682 HEIGHT=21 BORDER=0 USEMAP="#sakura2_09"></TD>
</TR>
</TABLE>
<MAP NAME=sakura2_09>
<AREA SHAPE="rect" COORDS="257,1,381,15" HREF="http://shift-design.pixelette.net" ALT="Layout © by Shift-Design" TARGET="_new">
</MAP>
<!-- End ImageReady Slices -->

</div>
<div style="position:absolute; top:510px; left:185px; class="nav";>
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
[<a href="index2.html" border="0" target="Ryans" title="#">Link</a>]&nbsp;
</BODY>
</HTML>


main directory http://free.hostultra.com/~shiftsdesign/002/
whomps
Nov 30 2004, 10:46 PM
Uhm.. your link doesn't work. I mean that.. your scrollbars cannot be transparent unless your blog is transparent.
moorepocket
Nov 30 2004, 11:19 PM
no i did make it transparent, but then my page is messed up.

go here to see. http://free.hostultra.com/~shiftsdesign/misc/2.JPG
whomps
Dec 1 2004, 12:36 AM
QUOTE(moorepocket @ Nov 30 2004, 8:19 PM)
no i did make it transparent, but then my page is messed up.

go here to see. http://free.hostultra.com/~shiftsdesign/misc/2.JPG

It says that the page could not be found..
moorepocket
Dec 1 2004, 06:45 PM
you can go here http://free.hostultra.com/~shiftsdesign/002/
whomps
Dec 1 2004, 06:52 PM
You put your iframe in the middle of the images..

Try making a div around the iframe and position the div.
dani41790
Dec 1 2004, 07:48 PM
QUOTE(hlall @ Nov 30 2004, 11:17 AM)
CODE
<!-- begin code provided by createblog.com -->
filter:chroma(color=#00FF00); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #000000;
scrollbar-face-color: #00FF00; /* transparent */
scrollbar-3dlight-color: #00FF00; /* transparent */
scrollbar-darkshadow-color: #00FF00; /* transparent */
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #00FF00; /* transparent */
}

<!-- end code provided by createblog.com -->


that's roxannes code for xanga transparent... so... what you want to do is have whatever the chroma color is be transparent... i reccomend using some color you don't use on the page... just in case.

so try this
CODE
<!-- begin code provided by createblog.com -->
<IFRAME SRC="index2.html" NAME="Ryans" width=100% height=100% FRAMESPACING=0 FRAMEBORDER=0 SCROLLING=AUTO ALLOWTRANSPARENCY=TRUE style="filter: chroma(color=#3f3f3f);scrollbar-color: #3f3f3f;"></IFRAME>
<!-- end code provided by createblog.com -->

i think that only works for div layering
tiffythepoopoo
Dec 4 2004, 01:45 PM
transparent scrollbars rock my world! :D
hlall
Dec 4 2004, 03:45 PM
QUOTE(dani41790 @ Dec 1 2004, 7:48 PM)
i think that only works for div layering

no her code has div{}

in css filter:chroma is an attribute which can be used in any place you would like in the css.. for example

body{
filter:chroma();
}
would cause a filter on the entire page and cause the specified color to be transparent... all over the page
moorepocket
Dec 5 2004, 09:07 AM
i figure it out. Thanx for all ur help.
whomps
Dec 5 2004, 12:23 PM
QUOTE(moorepocket @ Dec 5 2004, 6:07 AM)
i figure it out. Thanx for all ur help.

Topic Closed. :D
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.