Webkit Scrollbars

[Loki Laufeyson]

I am not entirely certain if this is the correct place for this thread, but I would like to add a webkit scrollbar to my forum so that the scrollbar matches the skin. I believe this would be done through Admin > Themes > Advanced Styles & CSS > Style Sheet.

However, what I do not know is where I would input the webkit style into the style sheet in order for it to work and not break anything.

[Stinky666]

Jun 9, 2013 12:30:21 GMT -8 Loki Laufeyson said:

I am not entirely certain if this is the correct place for this thread, but I would like to add a webkit scrollbar to my forum so that the scrollbar matches the skin. I believe this would be done through Admin > Themes > Advanced Styles & CSS > Style Sheet.

However, what I do not know is where I would input the webkit style into the style sheet in order for it to work and not break anything.

I just placed it directly at the bottom of the style sheet, and that seemed to work perfectly fine
The one I tested was: css-tricks.com/examples/WebKitScrollbars/

[Loki Laufeyson]

I did that as well, and while it changed the site scrollbar, it did not change scrollbars universally. CBox and temblates still have the default scrollbar as opposed to the site one.

[Stinky666]

Jun 9, 2013 13:00:05 GMT -8 Loki Laufeyson said:

I did that as well, and while it changed the site scrollbar, it did not change scrollbars universally. CBox and temblates still have the default scrollbar as opposed to the site one.

I assume you'd need to manually add the selectors (is that right? .shoutbox for example) for each. I am not too sure, looking at the code, where to put it.

[Loki Laufeyson]

Hmmm maybe! I will tweak about with it. Thanks!

EDIT

Oh hey! It is universal; it simply doesnt show as such on the preview option <3

[Stinky666]

Jun 9, 2013 13:04:37 GMT -8 Loki Laufeyson said:

Hmmm maybe! I will tweak about with it. Thanks!

EDIT

Oh hey! It is universal; it simply doesnt show as such on the preview option <3

Oh right ok brilliant. That's even better knowing there wasn't anywhere needed to insert the selectors lol.
I don't feel quite so stupid haha

[Stinky666]

Edit: Wtf. PB completely stopped working for me, so I assumed (obviously) that my post didn't post.

[Loki Laufeyson]

PB Stopped for me as well; they had a mini-server error. But yes, yay for things being simple; selectors can get messy xD

[Loki Laufeyson]

UPDATE

Placing it at the bottom of the stylesheet results in code errors for logging in and logging out; still need to find where to place this so that it doesnt break anything.

[Stinky666]

Jun 9, 2013 14:09:08 GMT -8 Loki Laufeyson said:

UPDATE

Placing it at the bottom of the stylesheet results in code errors for logging in and logging out; still need to find where to place this so that it doesnt break anything.

I think it will have the same outcome, but how about trying the headers/footers adding <style="text/css"> to the start of the code, and </style> to the end ?


Edit:
The Stylesheet way also messes up the banner. It adds a huge gap above it. No idea why

[Loki Laufeyson]

No, that failed unfortunately. It showed up as test at the top of the forum D;

[Stinky666]

Jun 9, 2013 14:21:06 GMT -8 Loki Laufeyson said:

No, that failed unfortunately. It showed up as test at the top of the forum D;

What issues do you have btw for the logging in and out?
I don't see any my end

I am using:

/* For the "inset" look only */
/*html {
   overflow: auto;
}
body {
   position: absolute;
   top: 0px;
   left: 20px;
   bottom: 20px;
   right: 0px;
   padding: 30px;
   overflow-y: scroll;
   overflow-x: hidden;
}*/

/* Let's get this party started */
::-webkit-scrollbar {
   width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   -webkit-border-radius: 5px;
   border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background: rgba(134,163,154,0.8);
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(134,163,154,0.4);
}


I commented out the first section.

[Loki Laufeyson]

When I had it at the very bottom of the style sheet, the switch account & switch forum minibar stopped working.

My code is this:

/* For the "inset" look only */
html {
   overflow: auto;
}
body {
   position: absolute;
   top: 20px;
   left: 20px;
   bottom: 20px;
   right: 20px;
   padding: 30px;
   overflow-y: scroll;
   overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
   width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   -webkit-border-radius: 10px;
   background: rgba(19,19,19,0.4);
   border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: rgba(86,70,96,0.8);
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(86,70,96,0.4);
}

[Stinky666]

Loki Laufeyson, try commenting out the html and body sections (for the inset). See if that makes a difference.

[Loki Laufeyson]

Jun 9, 2013 15:22:29 GMT -8 Stinky666 said:

Loki Laufeyson, try commenting out the html and body sections (for the inset). See if that makes a difference.

Im not quite sure what you mean by commenting out? I'm sorry, Im still a bit new with CSS