Log In · Register

 
 
 Closed TopicStart new topic
scrollbars, make it tranparent
moorepocket
post Nov 29 2004, 05:15 PM
Post #1


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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
post Nov 29 2004, 05:58 PM
Post #2


taste this.
****

Group: Member
Posts: 102
Joined: Nov 2004
Member No: 66,751
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
post Nov 29 2004, 06:02 PM
Post #3


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
but i did set it to F3B7A8. It just make it all F3B7A8, and not transparent. I even set it in the css.
 
whomps
post Nov 29 2004, 06:08 PM
Post #4


:hammer:
*******

Group: Staff Alumni
Posts: 9,849
Joined: Mar 2004
Member No: 7,700
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
post Nov 29 2004, 07:42 PM
Post #5


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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
post Nov 29 2004, 10:17 PM
Post #6


[[one piece :D
******

Group: Member
Posts: 2,722
Joined: Jan 2004
Member No: 795
why not just change scroll to no? huh.gif
 
sweetxsimplicity
post Nov 29 2004, 11:38 PM
Post #7


hi, my name is brianna! =]
*******

Group: Official Member
Posts: 5,764
Joined: Jun 2004
Member No: 22,114
Is it possible to make transparent scrollbars for iframes?
>.<;;
 
whomps
post Nov 30 2004, 02:00 AM
Post #8


:hammer:
*******

Group: Staff Alumni
Posts: 9,849
Joined: Mar 2004
Member No: 7,700
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
post Nov 30 2004, 03:59 PM
Post #9


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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
post Nov 30 2004, 04:17 PM
Post #10


Senior Member
****

Group: Member
Posts: 101
Joined: Sep 2004
Member No: 49,477
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
post Nov 30 2004, 08:36 PM
Post #11


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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
post Nov 30 2004, 10:46 PM
Post #12


:hammer:
*******

Group: Staff Alumni
Posts: 9,849
Joined: Mar 2004
Member No: 7,700
Uhm.. your link doesn't work. I mean that.. your scrollbars cannot be transparent unless your blog is transparent.
 
moorepocket
post Nov 30 2004, 11:19 PM
Post #13


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
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
post Dec 1 2004, 12:36 AM
Post #14


:hammer:
*******

Group: Staff Alumni
Posts: 9,849
Joined: Mar 2004
Member No: 7,700
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
post Dec 1 2004, 06:45 PM
Post #15


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
you can go here http://free.hostultra.com/~shiftsdesign/002/
 
whomps
post Dec 1 2004, 06:52 PM
Post #16


:hammer:
*******

Group: Staff Alumni
Posts: 9,849
Joined: Mar 2004
Member No: 7,700
You put your iframe in the middle of the images..

Try making a div around the iframe and position the div.
 
dani41790
post Dec 1 2004, 07:48 PM
Post #17


Hi! I'm Dani :)
*******

Group: Member
Posts: 5,637
Joined: Feb 2004
Member No: 3,369
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
post Dec 4 2004, 01:45 PM
Post #18


Senior Member
****

Group: Member
Posts: 182
Joined: Dec 2004
Member No: 68,764
transparent scrollbars rock my world! :D
 
hlall
post Dec 4 2004, 03:45 PM
Post #19


Senior Member
****

Group: Member
Posts: 101
Joined: Sep 2004
Member No: 49,477
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
post Dec 5 2004, 09:07 AM
Post #20


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
i figure it out. Thanx for all ur help.
 
whomps
post Dec 5 2004, 12:23 PM
Post #21


:hammer:
*******

Group: Staff Alumni
Posts: 9,849
Joined: Mar 2004
Member No: 7,700
QUOTE(moorepocket @ Dec 5 2004, 6:07 AM)
i figure it out. Thanx for all ur help.

Topic Closed. :D
 
« Next Oldest · Graphics Help Resolved Topics · Next Newest »
 

Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic