adding a css for colored scrollbars on a frameset index.

Need technical advice on coding your web pages? Covers HTML, JavaScript, CSS, and some server side technologies. Also the issue of some webpages not displayed well.

adding a css for colored scrollbars on a frameset index.

Postby sue » Wed 29 Jan, 2003 1:52 pm

Hallo to anyone,

I have problem in using css style for colored scrollbars. If I add it to my regular html page it works, but I want the style to cascade or changing the color of the scrollbar for fifty pages each time is ridiculous.

I have two css formats.One is from

here is my intended frameset, which does not work:

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>

<!--cascading style sheet for scrollbars on frame 2-->
<STYLE type="text/css">
BODY
{scrollbar-face-color: #ffffcc; scrollbar-shadow-color: #ff9966;
scrollbar-highlight-color: #ffccff; scrollbar-3dlight-color:#ff6600;
scrollbar-darkshadow-color: #cc9999; scrollbar-track-color: #ffffcc;
scrollbar-arrow-color: #cc6633}
</STYLE>


<TITLE>A simple frameset document</TITLE>
</HEAD>
<!--FRAMESET HAS COLORED SCROLLBARS-->
  <FRAMESET rows="10%, 90%">
      <FRAME src="nimenu.html"frameborder="0"scrolling="no">
      <FRAME src="home.html"frameborder="0"scrolling="yes"
marginheight="0" marginwidth="0">
  </FRAMESET>
    <!--non-frames homepage access here-->

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- alternate content container for non frame-based rendering -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<noframes><P>Click here for the index or the alternate<A href="home.html">
              non-frame based version of the document.TO NORTHDAYS HOMEPAGE</A>

</noframes>
</FRAMESET>
</HTML>
<!--http://www.w3.org/TR/REC-html40/present/frames.html#h-16.2.2.2 plus CONFLICT2K.COM-->


The frameset is from the above address and the css is from Conflict2K.com.

I don't know what I am doing wrong, so does anyone have any suggestions?...

My web address displays my foolish beginnings- one home page with correct css application.

I so help someone has the compassion to assist.Life can be so frustrating!

Kind Regards,

Sue

[Edited, added code format]
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; H010818)
sue
junior member
junior member
 
Posts: 5
Joined: Wed 29 Jan, 2003 1:40 pm
Location: Ontario

Re: adding a css for colored scrollbars on a frameset index

Postby Antony » Mon 03 Feb, 2003 1:48 am

Well, this is MEIS only CSS, which means it is not that important to have it.

Okay, back to your problem...

Firstly you've copied more than you need to copy.

Secondly you don't need to add it to your 50 regular html pages. All you need to do is to save the Style Sheet to a css file, and link to it from each page. (all frames)
UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01 (CK-SillyDog)
User avatar
Antony
diamond member
diamond member
 
Posts: 15481
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby sue » Mon 03 Feb, 2003 7:08 pm

Re: adding coloured scrollbars onto .css.

Hallo to Anthony!

Thank you for tasking the trouble to write.
By the time I received this response, I had found my difficulty. I haven't used linking .css with a .css on file with the whole site before, just css text style on the index.

I was really pleased with the result.

You can see the effect on http://www.northdaysimage.ca


You're pretty nice to take the trouble to write.

Bye for now.

Sue
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; H010818)
sue
junior member
junior member
 
Posts: 5
Joined: Wed 29 Jan, 2003 1:40 pm
Location: Ontario

Postby Antony » Fri 07 Feb, 2003 8:14 am

Hello Sue,
Just noticed that following bits should not in your code.

Code: Select all
<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
-- alternate content container for non frame-based rendering -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01 (CK-SillyDog)
User avatar
Antony
diamond member
diamond member
 
Posts: 15481
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby sue » Wed 12 Feb, 2003 9:17 am

Thanks, Anthony,

I will check for the difference in using a complicated non-frames statement on my frameset index. I tried it because it self-lists on the Search Engines., thinking it would act in a more efficient way.Actually, do you know the difference between the <FRAMES><NO FRAMES> and the complex statement I got from the net?

This is how the index listing looks on Google:

Northdays Image for January 2003: Index
]]> Here is the non-frame based version of the document.TO HOMEPAGE.
www.northdaysimage.ca/ - 4k - Cached - Similar pages




As to the colour scrollbars, I sure found out how to put them together on a css through trial and error, but now I have to find out why the scrollbar does not scroll via the arrow buttons.


Cheers, and how nice to hear from a fellow artist in Australia!
Sue
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; H010818)
sue
junior member
junior member
 
Posts: 5
Joined: Wed 29 Jan, 2003 1:40 pm
Location: Ontario

Postby Antony » Wed 12 Feb, 2003 9:43 am

Sue,
Code: Select all
<noframes>...</noframes>
The noframes element contains HTML that is rendered by browsers incapable of displaying frames.
In other words, if a browser is capable of displaying FRAMEs, all the codes between <noframes> and </noframes> are ignored.
As for Google, it simply display some content out of the page it cached, and contents inside <noframes> were just used.
I won't go for complicated statements for <noframes>, what I will do is simply waiting for Google to cache other frames. Just check your other framed pages on Google. (Try advanced search)

And for the scrollbar issue, I don't have much experience on that. However I can tell you, only Windows users of MSIE 5.5+ will see the effect.
UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01 (CK-SillyDog)
User avatar
Antony
diamond member
diamond member
 
Posts: 15481
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby sue » Fri 14 Feb, 2003 2:00 pm

To Anthony:
Re: <NO FRAMES>

Thanks, I'll try advanced search on Google. My own computer just clicks in to the frameset, so I assumed the extra text offered a direct link to anon-frames user.

Really nice of you to advise me. I try every script out and had not known there was naything amiss with this one.
By the way my colour scrollbar does come in on Netscape 6.

Cheers!
Sue
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; H010818)
sue
junior member
junior member
 
Posts: 5
Joined: Wed 29 Jan, 2003 1:40 pm
Location: Ontario

Postby Edward » Sat 15 Feb, 2003 10:07 am

I looked at the site in question just now.

Colored scrollbars appeared in IE6, but not in N7.01.

In addition, the page did not render properly in either browser, specifically the text on the left side of the page. It appears that the links and text may have been designed to appear inside the brown graphic, but in both browsers, this does not happen. They appear slightly off a bit.
UserAgent: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.0.2) Gecko/20021120 Netscape/7.01
Edward

SillyDog701 Moderator
Fedora - SeaMonkey - Claws Mail
User avatar
Edward
Moderator
Moderator
 
Posts: 3894
Joined: Sun 01 Dec, 2002 7:15 pm

Postby Rebelle » Thu 11 Mar, 2004 11:42 pm

Hi!
I am also trying to colour the scroll bar on this website:
http://www.christellefv.com/blancsablon ... meset.html

But it's not working!!

The different files in the site at http://www.christellefv.com/blancsablon ... slideshow/

(I'm not a pro, so if you decide to help me, please explain it in a simple way!)

Thanks in advance!!
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Rebelle
new member
new member
 
Posts: 3
Joined: Thu 11 Mar, 2004 11:39 pm

Postby Antony » Fri 12 Mar, 2004 7:59 am

Rebelle,
You need to add following into your style sheet file (slideshow.css)
Code: Select all
BODY {scrollbar-face-color: #ffffcc;
scrollbar-shadow-color: #ff9966;
scrollbar-highlight-color: #ffccff;
scrollbar-3dlight-color:#ff6600;
scrollbar-darkshadow-color: #cc9999;
scrollbar-track-color: #ffffcc;
scrollbar-arrow-color: #cc6633}

Make sure you replace all #ffffcc or similar to the colour you want to use.

Please note, it only works for MSIE 5.5+ (Windows) only.
UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.6) Gecko/20040206 Firefox/0.8
User avatar
Antony
diamond member
diamond member
 
Posts: 15481
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby Rebelle » Fri 12 Mar, 2004 10:51 am

But look...

http://www.christellefv.com/blancsablon ... deshow.css

Now, it is in there the way you said with my colours.. but its still not working?
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Rebelle
new member
new member
 
Posts: 3
Joined: Thu 11 Mar, 2004 11:39 pm

Postby Antony » Fri 12 Mar, 2004 7:04 pm

Rebelle,
Try add a semicolon (;) to the end of
Code: Select all
scrollbar-arrow-color: #000000

The style sheet should be
Code: Select all
BODY {scrollbar-face-color: #ba483d;
scrollbar-shadow-color: #f6efc0;
scrollbar-highlight-color: #e4b3ad;
scrollbar-3dlight-color:#461c17;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #ba483d;
scrollbar-arrow-color: #000000;
margin-left: 1px;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
background-color: #BA483D;
}
UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-us) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.6
User avatar
Antony
diamond member
diamond member
 
Posts: 15481
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Postby Rebelle » Fri 12 Mar, 2004 11:56 pm

sorry to be annoying but it still isnt working.. now i have exactly what you said in the stylesheet but still no..

i think ill just give up :P :?
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Rebelle
new member
new member
 
Posts: 3
Joined: Thu 11 Mar, 2004 11:39 pm

Postby Antony » Fri 19 Mar, 2004 7:26 pm

Have you tried to link to the CSS from all pages (including the frameset page)?
UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-us) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.6
User avatar
Antony
diamond member
diamond member
 
Posts: 15481
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

Re: adding a css for colored scrollbars on a frameset index

Postby yorhekin » Tue 28 Feb, 2017 12:39 pm

That's a good question. I tried to play around with colored css scrollbars on my site http://www.history-of-aviation.eu.

It would be nice if I could add scpecific scrollbar colors to a spacific frame. ... I tried it but, unfortunately, it doesn't work.

Code: Select all
<frameset ...>
<frame class="frame_top" ...>
<frame class="frame_bottom ...>
</frameset>


or ... applying a class to a frameset

Code: Select all
<frameset class="new_browser_window ...>
<frame ...>
<frame ...>
</frameset>



Code: Select all
<style type="text/css">
.frame_top::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.frame_top::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
.frame_top::-webkit-scrollbar-thumb {
  background: #cacaca;
  border: 0px none #ffffff;
  border-radius: 0px;
}
.frame_top::-webkit-scrollbar-thumb:hover {
  background: #cacaca;
}
.frame_top::-webkit-scrollbar-thumb:active {
  background: #000000;
}
.frame_top::-webkit-scrollbar-track {
  background: #f0f0f0;
  border: 0px none #ffffff;
  border-radius: 0px;
}
.frame_top::-webkit-scrollbar-track:hover {
  background: #f0f0f0;
}
.frame_top::-webkit-scrollbar-track:active {
  background: #333333;
}
.frame_top::-webkit-scrollbar-corner {
  background: transparent;
}
</style>
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36
yorhekin
new member
new member
 
Posts: 1
Joined: Tue 28 Feb, 2017 12:32 pm


Return to Web Design and Page Coding

Who is online

Registered users: Baidu [Spider], Bing [Bot], Google [Bot], Majestic-12 [Bot], Yahoo [Bot]