My scrollbars are acting a fool

options
My scrollbars are acting a fool written Jan 8, 2022 7:08:26 GMT
aliasLudo
pronounsThey/Them
548written posts
Swag Messiahearned bits
offlinecurrently
Swag Messiah
Part of the Furniture
Swag Messiah Avatar
Hey, want to join my gay hivemind?
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 Swag Messiah
options
My scrollbars are acting a fool written Jan 8, 2022 20:04:44 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted 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 22:40:43 GMT
aliasLudo
pronounsThey/Them
548written posts
Swag Messiahearned bits
offlinecurrently
Swag Messiah
Part of the Furniture
Swag Messiah Avatar
Hey, want to join my gay hivemind?
OH THANK YOU, I edited them out and then tried putting the fonts at the bottom and it seems to have fixed the scrollbars! I'm thinking it was interfering by being above the scrollbars in the hierarchy? Either way they seem to be working now!
options
My scrollbars are acting a fool written Jan 8, 2022 23:18:08 GMT
937written 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
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted 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,847written 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!