logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-29-2011, 05:42 PM   #1
FethrdWlf
FethrdWlf's Avatar
 
Join Date: Jan 2011
Location: Arizona
Posts: 146
Question Customize scroll bar for one div only?

I have a page* consisting of four parts: The header, the main content, and then two floating divs below that (they're side by side). The one on the right has a scroll bar. I'm looking to change the CSS of just that one bar. I've found some CSS** online that will change it, but it changes all of them, meaning the one that scrolls the whole page.

How can I achieve the change of just one specific bar?

* - View the page here.
** -
Code:
/* Turn on a 13x13 scrollbar */
	::-webkit-scrollbar {
		width: 13px;
		height: 13px;
	}
	 
	::-webkit-scrollbar-button:vertical {
		background-color: red;
		border: 1px dashed blue;
	}
	 
	/* Turn on single button up on top, and down on bottom */
	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment {
		display: block;
	}
	 
	/* Turn off the down area up on top, and up area on bottom */
	::-webkit-scrollbar-button:vertical:start:increment,
	::-webkit-scrollbar-button:vertical:end:decrement {
		display: none;
	}
	 
	/* Place The scroll down button at the bottom */
	::-webkit-scrollbar-button:vertical:increment {
		background-color: black;
		border: 1px dashed blue;
	}
	 
	/* Place The scroll up button at the up */
	::-webkit-scrollbar-button:vertical:decrement {
		background-color: purple;
		border: 1px dashed blue;
	}
	 
	::-webkit-scrollbar-track:vertical {
		background-color: blue;
		border: 1px dashed pink;
	}
	 
	/* Top area above thumb and below up button */
	::-webkit-scrollbar-track-piece:vertical:start {
		border: 1px solid #000;
	}
	 
	/* Bottom area below thumb and down button */
	::-webkit-scrollbar-track-piece:vertical:end {
		border: 1px dashed pink;
	}
	 
	/* Track below and above */
	::-webkit-scrollbar-track-piece {
		background-color: green;
	}
	 
	/* The thumb itself */
	::-webkit-scrollbar-thumb:vertical {
		height: 50px;
		background-color: yellow;
	}
	 
	/* Corner */
	::-webkit-scrollbar-corner:vertical {
		background-color: black;
	}
	 
	/* Resizer */
	::-webkit-scrollbar-resizer:vertical {
		background-color: gray;
	}
I know the above code makes everything look wacky, I was gonna' change it later on.
FethrdWlf is offline   Reply With Quote
Old 05-29-2011, 06:14 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Your link doesn't work
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 05-29-2011, 06:42 PM   #3
FethrdWlf
FethrdWlf's Avatar
 
Join Date: Jan 2011
Location: Arizona
Posts: 146
Default

Quote:
Originally Posted by DWcourse View Post
Your link doesn't work
Sorry, let's fix that: villaingogh.x10.mx
FethrdWlf is offline   Reply With Quote
Old 05-29-2011, 06:47 PM   #4
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Link works now but I'm not seeing any scrollbar customization.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 05-29-2011, 07:07 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

According to that code you have it's only for webkit browsers (Safari & Chrome).

If you want a cross-browsers solution then you should look into jscrollPane
http://jscrollpane.kelvinluck.com/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-29-2011, 08:45 PM   #6
FethrdWlf
FethrdWlf's Avatar
 
Join Date: Jan 2011
Location: Arizona
Posts: 146
Default

Quote:
Originally Posted by DWcourse View Post
Link works now but I'm not seeing any scrollbar customization.
I haven't used it because it totally messes up the look of the website. There's green and red and purple, and my website is kinda dark, not a kindergarten classroom.

Quote:
Originally Posted by gentleone View Post
According to that code you have it's only for webkit browsers (Safari & Chrome).

If you want a cross-browsers solution then you should look into jscrollPane
http://jscrollpane.kelvinluck.com/
Thanks gentleone, I'ma look into it soon.
FethrdWlf is offline   Reply With Quote
Old 05-29-2011, 10:02 PM   #7
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Quote:
Originally Posted by FethrdWlf View Post
I haven't used it because it totally messes up the look of the website. There's green and red and purple, and my website is kinda dark, not a kindergarten classroom.
It's just easier to help out if you post a sample page. A link to a page that doesn't have the issue isn't much help.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 05-29-2011, 10:29 PM   #8
FethrdWlf
FethrdWlf's Avatar
 
Join Date: Jan 2011
Location: Arizona
Posts: 146
Default

Quote:
Originally Posted by DWcourse View Post
It's just easier to help out if you post a sample page. A link to a page that doesn't have the issue isn't much help.
Okay, I'll add the CSS, just one sec... There.
FethrdWlf is offline   Reply With Quote
Old 05-30-2011, 02:07 AM   #9
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 9,445
Default

you could add moz scrollbars i suppose
__________________
If you're happy and you know it shake your meds!
different style links examples


Bali Villas Flights to Bali
edbr is offline   Reply With Quote
Old 05-31-2011, 02:03 AM   #10
FethrdWlf
FethrdWlf's Avatar
 
Join Date: Jan 2011
Location: Arizona
Posts: 146
Default

Quote:
Originally Posted by edbr View Post
you could add moz scrollbars i suppose
Oh, are the scrollbars not showin' up as being customized in Firefox?...
FethrdWlf is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:10 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com