HOME | DD
Talei —
TUT: Using CSS Scroll Boxes
Published: 2008-05-15 19:51:11 +0000 UTC; Views: 46036; 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 LEARNED HOW TO DO IT THANKS TO YOU ~ Headers too !
THANK YOU SO MUCH * ^*
I gave you a credit link in my example journal . :3c Thanks again !!
👍: 0 ⏩: 1
You're welcome! I'm glad you found it helpful!
👍: 0 ⏩: 0
Thank you for your tutorial! I found it very helpful! :3
👍: 0 ⏩: 0
I just wanted to say that this tutorial has been of great help to me to become better at CSS coding. 
👍: 0 ⏩: 1
I'm so chuffed you found it so helpful!
👍: 0 ⏩: 0
still reading through it, but I have a well enough understanding of programing languages to understand it simple enough. Having it set up the way it is is the best way for helping the viewers be more likely to remember it. And if they can't handle how simple this is, programing might not be their thing
👍: 0 ⏩: 1
I have a .rar file thingy... But I don't understand CSS codes
👍: 0 ⏩: 1
Errr.... read the explanation?
👍: 0 ⏩: 1
I do, but it is my own and I have not and will not release it. Sorry.
👍: 0 ⏩: 0
I may sound really stupid, but where do you find the css box? I can't find it anywhere?
👍: 0 ⏩: 1
..You have to be a subscriber...
👍: 0 ⏩: 0
I finally figured it out! 
👍: 0 ⏩: 1
thanks so much!! This was exactly what I was looking for
👍: 0 ⏩: 1
Thanks so much!
This really helped! It really helped make my commission info journal look so much neater!
👍: 0 ⏩: 1
You're so welcome! I'm happy to have helped.
👍: 0 ⏩: 0
I've learned how to do scrollboxes a year ago thanks to your tutorial
But now I'm redesigning my journal and have a problem: I want to make two boxes next to each other and one under them. How do I do the two next to each other? I want to have a heading abouve both boxes too and all I got so far is this [link] :C
I know it's a big question but I'd love you forever if you answer me ;w;
👍: 0 ⏩: 1
If you adjust the padding, that may move them... In all honesty, I'm not too sure. D: I'm sorry I can't be of more help.
👍: 0 ⏩: 0
Many thanks for your tutorial!
Nice and functional.. I mean.. PERFECT!
👍: 0 ⏩: 1
You're welcome! I'm glad you helped.
👍: 0 ⏩: 0
This was a very helpful tutorial! I was a little confused but a quick look at the comments helped.
Just one question; Do you by chance know how to change the look of the scroll bar?
👍: 0 ⏩: 1
Follow it carefully, if you try and just copy and edit it, two things won't match up. Its been done deliberatley so people don't just do that and steal my coding, its a tutorial, not a template. If you figure it out, you learned.
👍: 0 ⏩: 1
Thanks for this! It was a TON of help! I'm proud to say that I now know how to code scroll boxes.
I do have a question: is there any way to change the look of the scroll bar? For example, say I wanted to replace the bar with a smiley face (
~Ness
👍: 0 ⏩: 1
Not on dA, I don't think so. I only know of being able to change the mouse pointer, but I don't know exactly *how* to do that... I'm so out of practice.. *sigh* Sorry for rambling, anyway! Lol. Yeah, as far as I know, you can't do that, but I may be wrong, but I've never seen it either, only coloured scrollbars.
👍: 0 ⏩: 0
Is this possible to use in 'custom' boxes on a deviant page? Before I go and try, since I'm lazy like that
👍: 0 ⏩: 1
Honestly, I have no idea, I haven't tried to
👍: 0 ⏩: 1
Thanks for making the tutorial.
I haven't made a Journal skin yet.
But I'll use your tutorial if I did.
👍: 0 ⏩: 1
wow .. this was very easy to follow.
i have just added a scrollbox to my #CD-Art-Display group.
if you'd scroll down that group's page you could also find yourself being credited there.
i'm wondering tho .. is there any way to maybe add some inner shadow to the scrollbox, without actually using a background image?
or maybe there's a way to add a second border to the box, so that a 2nd border could be used to somewhat "outline" the first one?
either way .. thanks for the generous share and help.
👍: 0 ⏩: 1
| Next =>