Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. Scrollbar customization in CSS being ignored :(

Scrollbar customization in CSS being ignored :(

1 Sep 20, 2004 03:15    

Ok, so here's yet one more problem i'm facing. on the upcoming version of my site, the b2evo blog is on my main page, but in an iframe (http://www.cryocreations.com/beta). As you can see, the main page scrollbar is displaying correctly according to the CSS code i have in the index.html. I have put the same exact code into my custom.css template in b2evo yet its not going through. I opened the blog as a standalone, and noticed that the scrollbar was still showing as default, so i figured the fact that its in an iframe is not the problem. Here's what the beggining of my CSS looks like.

/* CSS Document */
/* Designed by Fran?ois PLANQUE - http://fplanque.net/ */

@import url(../../rsc/basic.css);	/* Import basic styles */
@import url(../../rsc/img.css);	/* Import standard image styles */
@import url(../../rsc/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/forms.css);	/* Import default form styles */
@import url(../../rsc/comments.css);	/* Import default comment styles */

BODY {
	scrollbar-face-color: #7BBAE5;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #7BBAE5;
	scrollbar-darkshadow-color: #7BBAE5;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-track-color: #7BBAE5;
	background-color: #7BBAE5;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
.style10 {font-size: 36px}
.style11 {font-size: 16px}
A:link {
	COLOR: #3399CC; TEXT-DECORATION: none
}
A:active {
	COLOR: #FFFFFF; TEXT-DECORATION: none
}
A:visited {
	COLOR: #597795; TEXT-DECORATION: none
}
A:hover {
	COLOR: #FFFFFF; TEXT-DECORATION: underline
}

h2 {
	color: #FFFFFF;
	font-size: 180%;
	margin: 0;

Anyone have any clues on why my scrollbar isn't showing up as i customize it? I did a forum search on this and got nothing :( Thanks a lot.

Back to top

2 Sep 20, 2004 05:38

The scrollbars in IE are blue. (As coded? I don't read colour codes easily.)

What browser are you using? It's IE specific css so firefox doesn't show anything unusual.

Back to top

5 Sep 20, 2004 23:09

look at my first post. it shows the CSS of the b2 page that loads in the iframe

Back to top

6 Sep 20, 2004 23:34

The page shadowfoot linked seems to contain a major clue.

Remember to write the code as a single line. I have had to break the line here to fit it in the space available. It's usually OK to split a line of HTML code as long as you don't split it it between the < > brackets of a tag.

Maybe you need to put all the dealies on a single line in your css file? Another possibility is to stick it right in the head section, but there is nothing in b2evo stopping it from working (AFAIK...). It doesn't validate so I don't really know anything about that gimmick, but it really does enhance the already soothingly comfortable/clean look of your site.

Back to top

7 Sep 20, 2004 23:59

sjcallas wrote:

look at my first post. it shows the CSS of the b2 page that loads in the iframe

I see the css but I can't tell whether it is for the page holding the iframe, or the page loaded into the iframe

Back to top

8 Sep 25, 2004 02:45

iframe is not affected by body style text just to tell you.

change the file your iframe is pointing to's style
or
add a style="scrollbar code:red;"> to it

Back to top

9 Jan 19, 2005 06:44

I am not sure if this will fix your problem, but I had alot of issues with conflicting css styles when using skins. I did a little research ... and I had actually never heard of this css element, but it worked for giving my css ids and classes priority when for some reason they wouldn't show up. Everyone probably already knows this but for dummies like me I will explain:

Sometimes when you use PHP etc and end up including several different stylesheets in one page you have conflicts. This means that one element is affected by two css styles. This happens quite a bit with the skins i use....so Im loading
/rsc/basic.css
/rsc/forms.css
/skins/myskin/skinstyle.css

when I load index.php.

Anyways the solution or temporary fix or hack or whatever you wanna call it is to add the "important" attribute to your css style properties. This gives that particular property priority over any conflicting declarations. Just open the stylesheet that contains the style that is being ignored and add ! important to every style you want to take priority.

So if your stylesheet read like this:

<style type="text/css">
.mystyle {
   color: red;
   font-weight: bold;
   text-decoration:underline;
}
</style>

and your find that for some reason the text is not showing up bold or underlined you would change the stylesheet to read :

<style type="text/css">
.mystyle {
   color: red;
   font-weight: bold ! important;
   text-decoration:underline ! important;
}
</style>

You should only add it to parts of the class or id that are being ignored tho.. because you run the risk of this affecting the style in other areas where you DONT want it bold or underlined etc.

Hope this helps... though Im not sure it will since you are talking scrollbar colouring.

Jeoffory

Back to top

10 Jan 19, 2005 16:46

just for information: the default settings of some browsers (like opera und firefox) don't allow websites to change the scrollbars.

Back to top

11 Feb 18, 2005 16:42

I'd just leave it out. Like EdB said, its not really a valid... css block or whatever you wanna call it. Javascript scrollbars are a hell of alot better to use... :roll:

Back to top

12 Mar 14, 2005 01:24

First off, colored scrollies don't work on any browser but IE.
Second, play with the bit that says: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I'm not sure which thing allows for colored scrollies, but if you get lazy to look around, just delete it and the css should work.

Back to top

13 Apr 29, 2005 11:01

Oriana wrote:

First off, colored scrollies don't work on any browser but IE.
Second, play with the bit that says: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I'm not sure which thing allows for colored scrollies, but if you get lazy to look around, just delete it and the css should work.

Oriana is right, just remove the line she says, and everything will work out fine. ;)

Back to top

14 May 11, 2005 00:31

*GASP* Remove the Document Type Declaration statment so that you can have colored scroll bars? Good GOD man, what is the World coming to? 8|

If there was a site to do if for, yours would be one! That grey scroll bar is begging for a face lift.

Back to top


Form is loading...