Custom Scrollbars 101
POST CREATED Jan 7, 2015 6:43:52 GMT -8
cheetah, LADY M ღ, and 3 more like this
Post by Nahara46 on Jan 7, 2015 6:43:52 GMT -8
[newclass=.what code]text-align:justify;[/newclass]
[attr="class","what"][googlefont="Engagement"]
Custom Scrollbars 101
Generally, I'm a big advocate of not using scrollbar templates. Partly because I'm in favor that post content should always be easily visible without jumping through hover/scroll hoops to view it. (I do, however, use them quite freely in plotter and trackers and the like templates.) And partially because the default scroll is absolutely hideous in a template. HOWEVER: if you are to use a scrollbar, whether it be in a posting template, or in a plotter or tracker or wanted ad or really anything else, I implore you to make it a customized one. And here's a tutorial of how to do it! This does require knowledge of the Style Tags plugin, which you can read about in the first part of THIS tutorial. It's kind of a lengthy tutorial for a relatively simple thing, but I like to be thorough. Note that custom scrollbars do not work in Firefox. Chrome is better anyway.
P.S. Sometimes scrollbars are weird and won't appear even if you put in all the CSS correctly, for me this can be fixed by literally going into the post and clicking 'save changes' again. I don't know why it does this at all, and sometimes it won't ever, while other templates seemed to be plagued with it while, as far as I can tell, there is nothing different in the methods I use to implement the scrolls.
P.S.S. I focus on coding in-posts, but all this will work with regular HTML and regular classes as well, in relatively the same manner.
Hopefully you already know how to make a box and get an overflow, but just in case let's go over it. Here we div that, inside of it, is unstyled text.
Yep that was it. Didn't look any different, did it? Well of course not, there's no styles! You can use any styles you like that are applicable to divs (so basically anything) but the two that you need to have in order to get a scroll are height:###px and overflow:auto. There are other values for the Overflow property, but Auto is the one that will result in a scrollbar. So let's get a quick box to work with.
There we go! A nice little box to work with, and with which to make not butt-ugly scrollbars with.
What do we do next? Well now, we need to convert the box to have it's styling in a class instead of inline, because custom scrollbars are made by selectors. A selector is a modification to the class name itself that tells the styles associated with it to effect a specific part of the class indicated. The syntax of it is like this: ".classname::selector". All selectors use the double colons. Taking that box before and converting it to using classes will look like this:
That's all the prelude stuff to actually getting started. Next we're going to talk about the different selectors and what they do. (There's only like 2 so don't worry it's not hard to remember!)
::-webkit-scrollbar This is the selector that looks for the scrollbar as a whole. It's the one you use to change the overall width of a scrollbar, mess with border radius and the background color of the total bar.
::-webkit-scrollbar-thumb Basically this is the handle. What you click and drag to pull the page/container up and down to view the content.
There are a few more selectors than these two, but I have never found myself in a position to utilize them and therefor will not talk about them, though you are free to look through the resources at the end of this tutorial to learn more.
Each of the selectors I provided are a lot like regular divs and such that you can style and will take a lot of the different possible properties. The ones that you will likely find most useful are:
background: The color that the object appears as, or you can put a picture. Or get fancy and try your hand at gradiants.
width: How wide the object is. Note that any width given to the track or thumb will be overridden by the scrollbar width, as in they cannot be wider. This property is synonymous with Height for side scrollbars.
border: Just as it says, the border around the object.
border-radius: Just as it says, the border radius of the object.
You know the selectors, you've made your box into a class, now how do you actually put it into action? Well, you just have to add the selector to your class, and then put in the different properties and values you desire. Here's an example:
Want to make it so that it looks like just a thumb?
Or maybe an invisible scrollbar altogether? Just a 0px width will do!
Honestly it's a really simple task that makes your templates 100% prettier without the gross gray scroll.
Want to learn more? Or have more examples? Have no fear, we have several resources here that have a LOT more info than this simple tutorial that's just mean to get you jumpstarted. (You COULD be doing fancy shit like having the scrollbar look different depending on whether you're using it or not, or whether they are vertical or horizontal by using double selectors!)
P.S. Sometimes scrollbars are weird and won't appear even if you put in all the CSS correctly, for me this can be fixed by literally going into the post and clicking 'save changes' again. I don't know why it does this at all, and sometimes it won't ever, while other templates seemed to be plagued with it while, as far as I can tell, there is nothing different in the methods I use to implement the scrolls.
P.S.S. I focus on coding in-posts, but all this will work with regular HTML and regular classes as well, in relatively the same manner.
i. creating a box
Hopefully you already know how to make a box and get an overflow, but just in case let's go over it. Here we div that, inside of it, is unstyled text.
Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
Yep that was it. Didn't look any different, did it? Well of course not, there's no styles! You can use any styles you like that are applicable to divs (so basically anything) but the two that you need to have in order to get a scroll are height:###px and overflow:auto. There are other values for the Overflow property, but Auto is the one that will result in a scrollbar. So let's get a quick box to work with.
Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[div style="margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say![/div]There we go! A nice little box to work with, and with which to make not butt-ugly scrollbars with.
ii. going custom
What do we do next? Well now, we need to convert the box to have it's styling in a class instead of inline, because custom scrollbars are made by selectors. A selector is a modification to the class name itself that tells the styles associated with it to effect a specific part of the class indicated. The syntax of it is like this: ".classname::selector". All selectors use the double colons. Taking that box before and converting it to using classes will look like this:
[attr="class","box1"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[newclass=.box1]margin:0px auto; width:200px; height:100px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass][div][attr="class","box1"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say![/div]
[newclass=.box1]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass]That's all the prelude stuff to actually getting started. Next we're going to talk about the different selectors and what they do. (There's only like 2 so don't worry it's not hard to remember!)
iii. selectors
::-webkit-scrollbar This is the selector that looks for the scrollbar as a whole. It's the one you use to change the overall width of a scrollbar, mess with border radius and the background color of the total bar.
::-webkit-scrollbar-thumb Basically this is the handle. What you click and drag to pull the page/container up and down to view the content.
There are a few more selectors than these two, but I have never found myself in a position to utilize them and therefor will not talk about them, though you are free to look through the resources at the end of this tutorial to learn more.
Each of the selectors I provided are a lot like regular divs and such that you can style and will take a lot of the different possible properties. The ones that you will likely find most useful are:
background: The color that the object appears as, or you can put a picture. Or get fancy and try your hand at gradiants.
width: How wide the object is. Note that any width given to the track or thumb will be overridden by the scrollbar width, as in they cannot be wider. This property is synonymous with Height for side scrollbars.
border: Just as it says, the border around the object.
border-radius: Just as it says, the border radius of the object.
iv. making it pretty
You know the selectors, you've made your box into a class, now how do you actually put it into action? Well, you just have to add the selector to your class, and then put in the different properties and values you desire. Here's an example:
[attr="class","box2"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[newclass=.box2]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass][newclass=.box2::-webkit-scrollbar]width:10px;background:green[/newclass][newclass=.box2::-webkit-scrollbar-thumb]background:red;border:2px solid blue[/newclass][div][attr="class","box2"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say![/div]
[newclass=.box2]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass]
[newclass=.box2::-webkit-scrollbar]width:10px;background:green[/newclass]
[newclass=.box2::-webkit-scrollbar-thumb]background:red;border:2px solid blue[/newclass]
Want to make it so that it looks like just a thumb?
[attr="class","box3"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[newclass=.box3]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass][newclass=.box3::-webkit-scrollbar]width:5px;[/newclass][newclass=.box3::-webkit-scrollbar-thumb]background:red;[/newclass][div][attr="class","box3"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say![/div]
[newclass=.box3]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass]
[newclass=.box3::-webkit-scrollbar]width:5px;[/newclass]
[newclass=.box3::-webkit-scrollbar-thumb]background:red;[/newclass]Or maybe an invisible scrollbar altogether? Just a 0px width will do!
[attr="class","box4"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[newclass=.box4]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass][newclass=.box4::-webkit-scrollbar]width:0px;[/newclass][div][attr="class","box4"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say![/div]
[newclass=.box4]margin:0px auto; width:200px; height:70px; background:#e9c5b7; border:2px solid black; overflow:auto; padding:3px;[/newclass]
[newclass=.box4::-webkit-scrollbar]width:0px;[/newclass]Honestly it's a really simple task that makes your templates 100% prettier without the gross gray scroll.
v. resources
Want to learn more? Or have more examples? Have no fear, we have several resources here that have a LOT more info than this simple tutorial that's just mean to get you jumpstarted. (You COULD be doing fancy shit like having the scrollbar look different depending on whether you're using it or not, or whether they are vertical or horizontal by using double selectors!)
- csstricks- Where a good deal of my own knowledge came from and definitely the best of them all!
- csstricks- another resource from them that has essentially everything restated in a different format.
- csstrick- on the same site, here you can go in and actually practice- try editing that code and see what happens!
- cssdeck- look at a bunch of example of what you can do
Five years ago, the Pokemon League formed Lux to create a new world order of peace and harmony. A rebellion formed, under the name of Nox, cries tyranny at Lux's new microcosmic control. Their civil war now tears the Pokemon world apart. The world hangs in the balance of predormitum. Which side will you choose?
is a high stakes RP set in a dystopian Russian society recovering from an apocalyptic war between the armies of Heaven and Hell. Greater Russia now stands free from the influence of God and the Devil, and all non-humans run the risk of execution. Outside the safe zones lies the contained wasteland of Moscow, where demons and mutated shadowbeasts continue to terrorize the remaining human survivors who have been penned in with them. As of late, increasing evangelic disturbances threaten the peace that has ruthlessly maintained by the secret police.
