HOME | DD
Talei —
TUT: Using CSS Scroll Boxes
Published: 2008-05-15 19:51:11 +0000 UTC; Views: 46041; Favourites: 907; Downloads: 4716
Redirect to original
Description
Quite a few people have asked me about this now. So here is a full tutorial/documentation on how to do it, with complete instructions, including how to use multiple boxes of different sizes.
This includes the following files;
Scrolling Boxes CSS
Using more than one box
Journal Entry
Preview
This is now a .zip file. If you would prefer a .rar, just drop a comment and I'll up one for you.
DO NOT USE MY CODES. IT WILL NOT WORK. IF YOU FOLLOW THE DOCUMENTATION YOU WILL KNOW WHY RATHER EASILY. ITS A MATTER OF CLASS NAMES, AND IF YOU DON'T UNDERSTAND WHAT I'M ON ABOUT, YOU OBVIOUSLY DIDN'T LEARN SO GO OVER IT UNTILL YOU DO. IF YOU TRY AND COME TO ME LIKE THE PAST FEW HUNDRED PEOPLE SAYING "IT DOESN'T WORK!" I'M GOIN TO SCREAM. YOU'RE SUPPOSED TO LEARN HOW TO DO IT YOURSELF, NOT TAKE MY CODE.
You do not have to credit me in your Journal CSS if you use this if you do not want to, but I'd appreciate it if you left a comment to let me know you used it and added it to your favourites if it was useful. Especially if you use my template!
Please don't note me with questions about using this, please leave a comment on this deviation. That way, if someone else has a similar issue, I can try and avoid repeating myself.
In the preview, a header THEN the scroll box is shown.
This tutorial is for the SCROLLBOX ONLY.
If you're looking for the header tutorial that matches, please check in my gallery. You can find it here [link]
EDIT: HOLY CRAP A DD. I'm gobsmacked. I went to sleep feeling like shap last night. Yes shap, its a word I invented, and if you can't guess what words I put together there, you may still be calling people "poo-poo head"
But yez, so to wake up to a DD was a really, really nice surprise, it hadn't ever even crossed my mind, so seeing some "congrats on the DD" comments made me have to check and do a double take! Thank you, Anni, for suggesting me! If you don't know her already, go and visit her over at =soulful-tears because she's so damn lovely.
Related content
Comments: 546
i always wanted to know how to do this-thankyou so much
👍: 0 ⏩: 1
Very cool tutorial here, Talei! Thank you very much!
👍: 0 ⏩: 1
Thanks for this! My scroll boxes right now are kind of blah... thanks for the great CSS!
👍: 0 ⏩: 1
No problem.
👍: 0 ⏩: 0
I am definitely going to need these to start organizing my journals!
👍: 0 ⏩: 1
div.scrollbox {
div.scrollbox {
background-image:url(''
width:150px;
height:200px;
border-width: 1px 1px 1px 1px;
border-color: #FFFFFF;
border-style: solid;
background-repeat : no-repeat;
background-position : scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color:#000000;
overflow: auto;
Isn't working? Do I have something wrong?
And yes I do have -
CONTENT HERE
around my text.
👍: 0 ⏩: 1
Ehhh
CONTENT HERE
should be
CONTENT HERE
Incorrect class name.
OR change
div.window {
Also, you have
div.scrollbox {
twice there. Whether that was accidental or not iunno.
👍: 0 ⏩: 1
You're super welcome. Glad it helped.
👍: 0 ⏩: 0
Could you make the .zip file? I can't open the .rar file and I am in great need of this tutorial right now~
👍: 0 ⏩: 1
Have you tried WinRAR?
If not, its free. Jus' google it.
Though ill upload the zip asap. Internet isn't cooporating with me right now. D=
👍: 0 ⏩: 1
Okay, I'll go lok it up~
Thank you so much.
👍: 0 ⏩: 1
No problemo.
I managed to upload the zip now though 
👍: 0 ⏩: 1
Oh thank you!! 
👍: 0 ⏩: 1
Ehh. Yeah sure thing.
👍: 0 ⏩: 1
Okie Dokie~ Thank you so much.
👍: 0 ⏩: 1
Sorry for being the slow one here... ehh how did you made this??? I seriously can't figure out how you get this stuff into you journal
sorry again for being slow
👍: 0 ⏩: 1
Uhh...the thing has full instructions...what exactly *don't* you understand?
👍: 0 ⏩: 1
think it was because it was late here maybe... because I think I have figured it out now... but anyway thank you for uploading this... maybe I ask if I have problems with it later... if that is okay of course
👍: 0 ⏩: 1
Too bad we can't color the scroll, if not, it will be prettier
👍: 0 ⏩: 1
I guess you could if you wanted but it only works in IE and other lame browsers. :3 Imo it looks tacky anyways, though.
👍: 0 ⏩: 2
if its matched to the background colour its not lame =3
👍: 0 ⏩: 1
Naw, in my general opinion, coloured scroll bars look poopy, but thats just imo, I'm classic ya see. But then again, IE is poop anyways.
This just got a DD, shock and happy dances!
👍: 0 ⏩: 0
Yes, I know, but majority here using Firefox, including me!
👍: 0 ⏩: 1
Yep, and me!
I say good call firefox not having lame color scroll bars. Still, some people like them.
Oh wait, I don't even think it works in the new IE either. Not sure.
👍: 0 ⏩: 1
They say we can use FF skin theme to do it. But only we ourselves that can see it. Other won't...
👍: 0 ⏩: 1
Yeah. Then it'll look bad on others who have scroll bars. But imo it still looks tacky. Looks better as-is. Though scrollbars in some browsers are eww. Mine is nice and shiny. I think thats due t vista. Even though theres a really simple theme that does the same thing, sorta like the latest shiny IE. Ewww...IE...XD Safari scroll bars....o.o That would work if your journal was blue. XD
👍: 0 ⏩: 1
Yeah, vista's appearance is cool, but many softwares won't work there...
So that means we have to adjust our CSS design colors to the default scrollbar, not the other way around.
👍: 0 ⏩: 1
Yeah. I hate vista.
Well yeah. You put the scrollbar color in the CSS. :3 But most browsers will just cut it out. And it looks tacky. XD
👍: 0 ⏩: 1
Haha. Not for me. But some people like that stuff. For me, its not aesthetically pleasing. D=
And if it doesn't look good, its like arghhhhhhhh YOU MURDERED IT! T__T Or something? XD
👍: 0 ⏩: 1
People do have different tastes
👍: 0 ⏩: 1
👍: 0 ⏩: 1
👍: 0 ⏩: 1
wow that's so nice, I bet a lot of people find this useful
👍: 0 ⏩: 1
Thanks.
Good to hear it. Hope its of some use and understandable. ^_^
👍: 0 ⏩: 0
<= Prev |