kittymmeow
(?)Community Member
Fashionable Fatcat
Offline
- Report Post
- Posted: Wed, 03 Oct 2012 10:04:24 +0000
Diamond Nines
I have tried using a hidden scroll bar for comments,but for some reason when I did my about me and wishlist the page stretches and a scroll bar appears. I have tried to play around with the numbers,but I just want the exact#.
edit: Take a look at my profile. I did the code for hidden scroll bar for my comments,wishlist and about me. My about me and wishlist I still see a blue scroll bar. Am I doing something wrong or it just doesn't work for Google Chrome?
edit: Take a look at my profile. I did the code for hidden scroll bar for my comments,wishlist and about me. My about me and wishlist I still see a blue scroll bar. Am I doing something wrong or it just doesn't work for Google Chrome?
Making a hidden scrollbar for wishlists doesn't seem to work the same way as the rest, because of how hidden scrollbars actually work. They use an outside element and an inside element, which the comments panel has and for the about panel you can create, but wishlists don't have an inner element, only an outer one. If it doesn't have both, it won't work.
For about panels, it starts getting more confusing because you have to actually create an inner element for the panel using BBCode. You have to add a list tag around your entire about content, and then style that list as if it were the inner element for the scrollbar code, and if you didn't do this entirely and exactly, it won't work.
The BBCode needed:
[list=1]your about me content here[/list]
The CSS needed (not using the guide's code, if you notice, since the guide is done terribly. This code is miles better and much easier to work with. Most of the time all you will need to change are the selectors and the height and it'll work on any panel that the guide's ones do):
#id_about{
overflow:hidden;
}
#id_about ol{
overflow-y:scroll;
width:100%;
height:300px;
padding-left:50px;
}
If the panel is too short or too tall, change 300px to higher or lower numbers.overflow:hidden;
}
#id_about ol{
overflow-y:scroll;
width:100%;
height:300px;
padding-left:50px;
}
And I see that you still want colored scrollbars, so since Knight Yoshi won't give it to you, I will. As he said, it's impossible to make a custom scrollbar that works for everyone, since the two options that do exist (at this point) only work on Google Chrome+Safari, or Internet Explorer, and like he said, it's usually advised against to use anything that is that limited in crossbrowser compatibility.
Since you still want it despite that, you can use this code, which is the code for the Chrome+Safari scrollbars (I don't know how to do the IE ones, even if you wanted them, and I don't plan on learning). I'm actually gonna kinda put this in multiple sections because this can get confusing.
::-webkit-scrollbar{
width:5px;
height:5px;
}
Just use this for the size of your scrollbar. As long as you keep both the width and height the same number, you can adjust how big you want your scrollbar by changing the numbers– higher numbers are thicker, lower numbers are thinner. Test it out to see what you like.width:5px;
height:5px;
}
::-webkit-scrollbar-track{
background:#ffffff;
}
This is the track of the scrollbar, which on most computers is white or gray and you usually don't click on it. I've set it to white, but you can change it to other colors or add an image by changing #ffffff to another hex code or color name for a color, or to url(your url) for an image.background:#ffffff;
}
::-webkit-scrollbar-thumb{
background:#666666;
}
This is the handle of the scrollbar, which on most computers is blue or gray and is the part you click and drag to scroll. I set it to a darkish gray, but you can change it to another color or an image the same way as with the track. background:#666666;
}
