HOME | DD
Talei β
TUT: Using CSS Scroll Boxes
Published: 2008-05-15 19:51:11 +0000 UTC; Views: 46037; 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
Only if you put the box... inside a box really, re; border. Unless you change the border type (solid, dotted, dashed etc, theres a load of types to use, I see you already seem to know that as you're using a dotted border. You'd need to have an image for the shadow. There IS a way to add gradients in CSS but I honestly can't remember how to do it as I haven't done that since my CSS starter days about 6 years ago. I switched to images.
Sorry I can't be more helpful. And I'm glad the tut was useful, and also thank you for crediting me.
π: 0 β©: 1
you're by all means welcome. thanks for the reply.
π: 0 β©: 0
is it possible to use it on your profile page in ur deviant
ID box?
π: 0 β©: 1
I'm unsure, I've not tried it. I don't know if deviantART allows it, especially now all the layout has changed. D:
π: 0 β©: 0
Hello! Not to bother you though but is this how you do it? I combined the scroll box and the more boxes.
div.scrollbox {
background-attachment: scroll;
background-image:url([link] );
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: ##610B5E;
border-style: solid;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
background-color:##610B5E;
overflow: auto;
div.scrollbox {
div.scrollbox2 {
}
π: 0 β©: 1
no.
border-color: ##610B5E;
Two hexes.
div.scrollbox {
div.scrollbox2 {
Not needed.
Hope that helps.
If you want more boxes, you have to repeat. Eg
div.scrollbox {
background-attachment: scroll;
background-image:url([link]);
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: ##610B5E;
border-style: solid;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
background-color:#610B5E;
overflow: auto;
}
div.scrollbox2 {
background-attachment: scroll;
background-image:url([link]);
width:400px;
height:800px;
border-width: 1px 1px 1px 1px;
border-color: ##610B5E;
border-style: solid;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
background-color:#610B5E;
overflow: auto;
}
and have both in and then use scrollbox and scrollbox2 divtags as appropriate
π: 0 β©: 1
So like this? And if i wanted to i can add more boxes if i just repeat the code right? Thanks so much! Really useful!
div.scrollbox {
background-attachment: scroll;
background-image:url([link] );
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: #610B5E;
border-style: solid;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
background-color:##610B5E;
overflow: auto;
}
π: 0 β©: 1
Like I said
background-color:##610B5E;
should be
background-color: #610B5E;
No double hash's.
But yeah, just repeat and edit as needed
π: 0 β©: 1
Okay thank you
π: 0 β©: 1
Thank you so much for making this 
If you dont mind helping me?
Did I do this right?
div.scrollbox {
background-attachment: scroll;
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: #8A2BE2;
border-style: dashed;
background-repeat : no-repeat;
background-position : scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
[background-color:#FF4040;
overflow: auto;
}
And where the heck Do I put it? I dont understand, Please help?
π: 0 β©: 1
You have a random bracket in there o.o
That won't work... remove it. And you have spaces between the colons at the background bit...
Like background-repeat : no-repeat; gotta be
background-repeat: no-repeat;
You can put it anywhere in the CSS section.
π: 0 β©: 1
oh thank you! *_*
SO like this right? :3
div.scrollbox {
background-attachment: scroll;
width:400px;
height:500px;
border-width: 1px 1px 1px 1px;
border-color: #8A2BE2;
border-style: dashed;
background-repeat: no-repeat;
background-position: scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color:#FF4040;
overflow: auto;
}
I just put it at the end of the Skin css thing,
and then I put
CONTENT HERE!
Randomly anywhere in my journal?
Sorry im not that smart ;_;
π: 0 β©: 1
no, you put scrollbox. Because the class you are using is scrollbox not window2
This was a point of learning for the tutorial.
π: 0 β©: 1
;_;
THANK YOU! x3
You are serisouly insanly awesome!
π: 0 β©: 0
Very useful tutorial. Thanks for it.
π: 0 β©: 1
Hope I can understand this once and for all.
π: 0 β©: 1
Wow. You explained it very simply! Thank you so much!
π: 0 β©: 0
Hello 
However, I am CSS challenged XD Like, I have a CSS code already that I pretty much understand how it works. But then adding the scroll feature confuses meee. aha I apologize in advance cuz this post is long.
Here was my original code:
.journalbox {
background-color:#ffd4a5 !important;
border:3px #ff7777 solid !important;
}
.journalbox .list li {
background-color:transparent !important;
color:#ff7777 !important;
}
.journalbox .list li.a {
background-color:transparent !important;
color:#ff7777 !important;
}
.journalbox .journaltop {
border-bottom:3px #ff7777 solid !important;
background-color:#ffd4a5 !important;
color:#ff7777 !important;
}
.journalbox .journaltext {
border-bottom:3px #ff5757 solid !important;
color:#ff5757 !important;
}
.journalbox h2 {
color:#ff7777 !important;
}
.journalbox a {
color:#ff7777 !important;
}
.journalbox a:hover {
color:#fe2828 !important;
}
.journalbox .journalbottom a.commentslink {
color:#ff7777 !important;
}
.journalbox .journalbottom a.prevlink {
color:#ff7777 !important;
}
.journalbox .journalbottom a.commentslink:hover {
color:#fe2828 !important;
}
.journalbox .journalbottom a.prevlink:hover {
color:#fe2828 !important;
}
.journalbox .journalbottom {
background-color:#ffd4a5 !important;
padding-top:4px;
}
.journalbox .journaltop img {
display:none !important;
}
And that worked fine. But then there is the scroll one..and I dunno if I filled it out correctly:
div. scrollbox {
background-attachment: scroll;
width:400px;
height:500px;
border-color: #ff7777;
border-style: transparent;
background-position: scroll;
padding: 10px 10px 10px 10px;
margin-top: 1px;
background-color: #ffd4a5;
overflow: auto;
but then, where do I put that into my previous CSS? I'm sorry to be a pain :/
π: 0 β©: 1
It doesn't matter where in your CSS you place it as long as it isn't in the middle of another class [obviously]
π: 0 β©: 1
Hmmm... okay. Did I have the CSS for the scroll correct though?
π: 0 β©: 1
Indeed, if I remember right.
π: 0 β©: 1
Okay
Aww, no need to apologize. I hope you are feeling better
π: 0 β©: 0
Thank you so much for sharing this. I knew how to do scrollboxes for a regular website but this helps me understand how to incorporate it into the journal css.
π: 0 β©: 1
Thank you very much for this tut. 
I had some trouble at first, but looking back at some of the comments they helped me out.
Thanks again for this wonderful tut.
π: 0 β©: 1
I'm so glad it was useful
π: 0 β©: 0
thank you for made this, but I got a problem. this doesn't work with me D:
the journal says there's an error when I put this in the journal:
CONTENT HERE!
π: 0 β©: 1
Did you do exactly what the tutorial says? You need to make sure the classes match
π: 0 β©: 1
I think I did what it says.. or not? xD sorry I'm not sure because I'm not english I didn't understand everything D:
π: 0 β©: 1
In the CSS the .classname here needs to match the div-classnamehere.
π: 0 β©: 1
No problem. Glad you like <3
π: 0 β©: 1
Of course you can! Its why its here! To help others to learn to make scroll boxes!
π: 0 β©: 1
thank you so much for the tutorial it's great
π: 0 β©: 1
You're very welcome dear. I'm glad its useful to you. ^_^
π: 0 β©: 0
| Next =>