My scrollbars are acting a fool

options
My scrollbars are acting a fool written Jan 8, 2022 7:08:26 GMT
pronounsThey/Them
544written posts
Coyoteearned bits
offlinecurrently
Coyote
Part of the Furniture
Coyote Avatar
So I'm trying to get some webkit scrollbars working on this site but they keep either just not changing or changing and then going back to default after I refresh?

ontir.jcink.net/index.php?act=idx

::-webkit-scrollbar {
width: 2px;
height: 2px;
}

::-webkit-scrollbar-thumb {
background: #FF9C61;
border: 0px none #FF9C61;
}


This is the code I'm using, I'm not sure if there's a specific way it needs to be formatted for Jcink or if it's just a me issue? The scrollbar worked fine for a moment right when I put this code in, but it changed back upon a refresh.

Help is super appreciated!

EDIT

I've also tried this code, it does the same thing!
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { width: 2px; background-color: #130e0c; }
::-webkit-scrollbar-thumb { width: 2px; border-left: 2px solid #FF9C61;  background-color: #130e0c; }
last edit on Jan 8, 2022 7:26:26 GMT by Coyote
options
My scrollbars are acting a fool written Jan 8, 2022 20:04:44 GMT
pronounsfeminine
383written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
Heya, looked through your code for a bit and found a possible solution:

In your stylesheet, above your webkit scrollbar codes, there's a bunch of font-family codes, ye? Specifically: 

/*----------------------------------------------- *

  FONTS

 -----------------------------------------------*/

font-family: 'Amatic SC', cursive;

font-family: 'Cinzel Decorative', cursive;

font-family: 'IM Fell English SC', serif;

font-family: 'Macondo Swash Caps', cursive;

font-family: 'Mate SC', serif;

font-family: 'PT Sans', sans-serif;

font-family: 'Vollkorn SC', serif;
Can you try removing/commenting these out? Tested the stylesheet in my local and it works when it's removed, so probs syntax error. o3ob
options
My scrollbars are acting a fool written Jan 8, 2022 23:18:08 GMT
932written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
Popping in to add that the font-familys were breaking the code because you don't have them applied to a specific selector. For best practice, I'd suggest wrapping them, and all such kinds of notes, in a /* */ the same way you did for that FONTS section header. That'll mark everything between the asterisks as something to ignore instead of leaving them floating and interfering with whatever css you might try to put afterโ€”as happened with the scrollbarโ€”and is what Idindin meant by commenting them out.
last edit on Jan 8, 2022 23:19:29 GMT by gimmick
options
My scrollbars are acting a fool written Jan 8, 2022 23:29:59 GMT
pronounsfeminine
383written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
Hmm not exactly a frontend expert but I'll try explaining it!! It's more that the font-family's applied like that isn't the syntax(code pattern) the browser expects, so it breaks. By moving it down to the bottom, you successfully apply all the styles above it and let the bugged code break by itself after everything's done (and so affecting nothing). CSS 'gets back on track' after you get back to the correct coding methods though, which is why only webkit scrollbar broke but not the rest of the styles below it.

(You can test this by duplicating "::-webkit-scrollbar { width: 2px; }" below itself in the original stylesheet. )

FYI, the bunch of font-family codes don't do anything when coded like that. At the very least, it'll need to be within body {}, and only the last font-family will be applied. If you want to apply font fallbacks, it's usually done like this:

p, body {

   font-family: "Lucida Console", "Courier New", monospace;

}

So ye, not hierarchy! That was my first guess though hahaha.
options
My scrollbars are acting a fool written Mar 4, 2022 2:40:06 GMT
internally screaming
pronounsshe/her
1,793written posts
Nekoearned bits
offlinecurrently
Neko
Administrator
Neko Avatar
stressed, depressed, and probably not well-dressed
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

This thread hasn't had any replies since a month ago - feel free to repost if you wish!