HOME | DD
eCSSited — How to: Scroll Boxes
Published: 2012-05-16 17:28:42 +0000 UTC; Views: 18508; Favourites: 280; Downloads: 0
Redirect to original
Description
body div#devskin7726478 ::selection { color:#333; background-color:#acc0c0; } body div#devskin7726478 ::-moz-selection { color:#333; background:#acc0c0; } body div#devskin7726478 ::-webkit-selection { color:#333; background:#acc0c0; } body div#devskin7726478 .author { display:none; } body div#devskin7726478 .gr-box { max-width:700px; margin:auto; background:#transparent; padding:30px; padding-top:0; } body div#devskin7726478 .gr { background:transparent; border:none; } body div#devskin7726478 .gr1 { display:none; } body div#devskin7726478 .gr2 { display:none; } body div#devskin7726478 .gr3 { display:none; } body div#devskin7726478 .tri { display:none; } body div#devskin7726478 .gr-top { border:0; z-index:10; height:120px; background:transparent; } body div#devskin7726478 .gr-top img { display:none; } body div#devskin7726478 .gr-top h2 { color:#859a82; font-family:'Trebuchet MS', Verdana, sans-serif; font-size:18px; text-shadow:#AAA 0px 3px 5px; position:absolute; top:97px; left:6px; } body div#devskin7726478 h2 a:hover { background:none; border:none; } body div#devskin7726478 .gr-top span { color:#888; text-shadow:#FFF 1px 1px 0px; font-size:11px; position:absolute; top:128px; left:6px; margin-left:10px; letter-spacing:0.1em; } body div#devskin7726478 .gr-body { border:1px solid #AAA; background-image:url('https://fc02.deviantart.net/fs70/o/2010/237/6/8/176807312_146040_bg-entry.jpg'); background-repeat:repeat-x; background-color:#CFDBDB; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 0px 10px #CCC; -moz-box-shadow:0px 0px 10px #CCC; -webkit-box-shadow:0px 0px 10px #CCC; } body div#devskin7726478 .list { display:none; } body div#devskin7726478 .text { color:#3c3c3c; margin-top:20px; padding:40px 30px; font-family:Verdana, sans-serif; font-size:11px; line-height:16px; max-width:700px; } body div#devskin7726478 a { color:#5c8484; text-decoration:none; font-family:Verdana, sans-serif; } body div#devskin7726478 .bottom { margin-bottom:30px; padding:0 25px; } body div#devskin7726478 .commentslink { font-size:10px; padding:3px; color:#333; text-shadow:#FFF 1px 1px 0px; float:left; } body div#devskin7726478 blockquote, body div#devskin7726478 .example { background-color:#dde6e6; padding:10px 5px 5px 10px; border-left:5px solid #93a3a0; position:relative; } body div#devskin7726478 ul { margin:5px; } body div#devskin7726478 ol { margin:5px; } body div#devskin7726478 .scrollbox { height:100px; overflow:auto; } body div#devskin7726478 .scrollbox2 { height:100px; overflow:auto; border:1px solid #000; background:#536a5d; } body div#devskin7726478 .scrollbox3 { height:100px; overflow:auto; border:1px solid #000; padding:20px; margin:0 50px 0 130px; } body div#devskin7726478 .scrollbox4 { width:400px; white-space:nowrap; overflow:auto; border:1px solid #000; } body div#devskin7726478 h1 { background:url(https://e.deviantart.net/emoticons/b/bulletwhite.gif) no-repeat left center; color:#4c98b9; text-shadow:2px 2px 4px #fff; font-family:'Maven Pro', sans-serif; margin:20px 0 -10px -10px; padding:0 0 0 15px; font-weight:bold; letter-spacing:0.03em; } body div#devskin7726478 .text h2 { color:#4c98b9; text-shadow:2px 2px 4px #fff; font-family:'Maven Pro', sans-serif; margin:20px 0 -10px -10px; font-size:18px; font-weight:bold; letter-spacing:0.03em; } body div#devskin7726478 img { border:1px solid #93a3a0; }
Transferred from eCSSercise .
This is the first part of a tutorial series that I will be working on in the future and will be released whenever I find the time for it.
In order to know how I can make them better and to make it easier for you to understand the things I am talking about it would be appreciated if you would leave some feedback!
---
For this tutorial series I am explaining different elements you can create or modify with the help of CSS. The level of experience that is needed to be able to understand the tutorials can differ and will be in no order. I will try to explain the things as simple as possible though.
The Basics
To create a scrollbox you don’t need much, just a box with a limited height or width in order to enforce the scrollbar. If you don’t limit the dimensions of the box it will adjust itself to the space given by the browser resolution and settings.
The limited dimension itself doesn’t create the scrollbar, it just limits the area the content will be displayed. Therefore it is needed that you tell the box what it should do with the content that doesn’t fit into the box. That’s when overflow will be used. It defines how such ‘overflowing’ content will be handled.
We are using the auto value as it does only create the scrollbar when needed. If you use the scroll value the scrollbar will be visible all the time, even if the content does fit to the created box.
Our code for a simple version would look like this:
HTML
CSS
.scrollbox{
height: 100px;
overflow: auto;}
The result (added more text so that you can see the scrollbar):
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
And that is all, that’s where you start with when creating scroll boxes. You now can style the box itself to make the appearance a bit more fancy by adding colors, images, changing the size, adding extra feature to the box itself or giving it borders, placing it within other elements etc.
Below I will give you a few examples of what you can do.
Modify your Scrollbox
The code variations all use the base explained above.
With the help of the border and background property we are able to visually separate our scroll box from the regular content a bit more.
I am just using solid colors here, but of course you can vary that as well.
.scrollbox{
height: 100px;
overflow: auto;
border: 1px solid #000;
background: #536a5d ;}
The result
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Those properties can help you to arrange your scroll box within your journal(margin) as well as avoid that the content is too squeezed(padding).
The border was added so that it is easier for you to see the changes.
.scrollbox{
height: 100px;
overflow: auto;
border: 1px solid #000;
padding: 20px;
margin: 0 50px 0 130px;}
The result
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Even less used sometimes you can see scroll boxes with a horizontal scrollbar as well. For this version you need to limit the width instead of the height.
Additionally we need to tell the browser that it shouldn’t enforce new lines until we make use of
.
.scrollbox{
width:400px;
white-space: nowrap;
overflow: auto;
border: 1px solid #000;}
The result
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Example Usage
Have any questions or don't understand something?
Questions should be left in a comment directly to this blog so that people with similar problems can look them up later as well.
If there are certain things you want me adress the next time, either leave a comment here as well or note me directly.
Related content
Comments: 137
this isn't working for me. and it's confusing.
👍: 0 ⏩: 1
Is it possible to make a scrolling box not scroll? Is there a certain part of code that I should remove for that? :0
👍: 0 ⏩: 1
Change overflow:hidden; however it will cut off excess. When I do skins with that, I like to add a hover that switches overflow:visible. overflow:auto is what sets the scroll bar to appear if content exceeds size limits.
Sorry for the late reply, I am not active here any more.
👍: 0 ⏩: 0
the "overflow:auto;" with a fixed size makes the scrollbar appear. I am not currently active here, so it may be a long time before I am able to reply again. But what is it you are having trouble with, specifically? If I can, I will help.
👍: 0 ⏩: 0
Do you have to be a core member to put scroll boxes?
👍: 0 ⏩: 1
How do you make the background of the box translucent?(where you can see the picture still, but it's slightly covered by the scrollbar background so you can see the words easier.)
👍: 0 ⏩: 1
did you ever find out how to do this?
Wondering the same atm...
👍: 0 ⏩: 0
Is it possible to put two scroll boxes beside eachother, or a normal text area beside a scroll box? I want to be able to put text beside an image. I'm sure there's a way to add an image directly into the css but I'm not that skilled.
👍: 0 ⏩: 1
Yes, there is. If you take the scrollbox and, around it's coding, add
/div align="right"/CONTENT HERE\/div/
Changing the first '/' or '\' marks to '<' or '>' though
As long as you put the option you wanted to be first on the side before the right side's coding,
it should work fine
👍: 0 ⏩: 0
No, all the CSS related editing is for Core members only. Sometimes, dA has free membership days, which would be an opportune time to take advantage of and set up your profile with such widgets. I think they stay... 
👍: 0 ⏩: 0
Is there anyway that you can change the width of it or put it to the left/right?
👍: 0 ⏩: 1
Are you trying to achieve a horizontally scrolling content box? For that, you would set a fixed width and then you would need to use word-wrap and white-space. I haven't done one in a while, but maybe I can find an explanation of it real quick....
I have an example of it in use in this free snippet of mine. You may use this to work from, I don't mind. It should be in the part called .box{} in the CSS. Simply install, find the code and use that as your example of how it works to apply to your own design. This code can be altered and used in your own skins as well. If you use the entire snippet, I do request a mention or credit.
I'm not finding a tutorial off hand.
👍: 0 ⏩: 0
Were do you put the CSS code? Like if that makes sense ; A ;
I would like to make the whole body of the journal a scroll box
Nvm figured it out < 3
👍: 0 ⏩: 0
Is there anyway to add it to the custom widgets on your profile?
👍: 0 ⏩: 1
To use CSS in your widgets, you have to trick dA into using a journal skin instead of a lit deviation as the featured deviation.
1) create blank/plain text w/out html as a lit deviation.
2) feature it in the featured deviation widget. add any formatting to that widget you like to add bg, etc or leave blank for transparent look.
3) go back to the deviation and edit it to add HTML formatting and "edit skin" to add the style.
Check on your profile page that the design fits your box area, as the space is limited.
👍: 0 ⏩: 0
Where are you supposed to put the text at? I can't figure that out XD maybe I should try harder.... hhmmmm...
👍: 0 ⏩: 1
It would go in the HTML portion of the journal. So, basically, type your journal entry as normal between the opening/closing tags of your HTML div container which has been coded in the CSS portion of your journal.
I've taken some screenshots if this helps. I switch to HTML mode, enter my text in the div tags, and edit the skin to enter the CSS that controls the div tag.
👍: 0 ⏩: 1
Oh ok thank you so much!!
👍: 0 ⏩: 1
...I don't understand any of this....
Could you explain in greater detail?
👍: 0 ⏩: 1
Hi, I'm sorry that I am just seeing this now and you have not received help yet. Has your CSS question been resolved or do you still need assistance? I can explain the scroll boxes in greater detail, but I'd need to know what you need help with.
👍: 0 ⏩: 1
I did resolve the issue, but thank you anyway. If I have any other questions, I'll ask.
👍: 0 ⏩: 1
Glad to hear 
👍: 0 ⏩: 0
Uhh I still don't understand where to put the CSS.
Sorry, I'm new to coding <.<
👍: 0 ⏩: 1
Hi, sorry for the late reply. Has your CSS problem been fixed or do you still need help?
👍: 0 ⏩: 1
yep tysm! it has been fixed
👍: 0 ⏩: 1
HIII, why my friends can put a scroll in a CUSTOM BOX? ;w;
👍: 0 ⏩: 1
Sorry for the late response. This is done via the "Featured Deviation" widget instead of your typical custom box. Feature a lit deviation (with no formatting yet), then edit the deviation to add CSS/journal skin. Thus making your featured deviation like any journal. You can use the CSS and HTML you would use for a journal. However, the height of this box is limited. Hence the popularity of using this widget for a profile menu of links or using scroll boxes.
Hope this is helpful!
👍: 0 ⏩: 1
Is okay in any way now my custom box have scrollroll ty!
👍: 0 ⏩: 1
Where do you put the HTML code, btw?
That's the only thing I don't understand
👍: 0 ⏩: 1
OH nevermind XD
This tutorial helps!! A lot!!
👍: 0 ⏩: 1
i have mine in, but the scollbar is outside the journal skin by a few pixels. i cant figure out how to fix it without the middle box becoming mis aligned
👍: 0 ⏩: 0
Is there a chance that we could change the width of the scroll bar? ^^'
👍: 0 ⏩: 1
No, that is something defined by the browser you are using. Just by using browser skins (if available) you can change their appearance as far as I know.
👍: 0 ⏩: 1
Oh too bad. But thank you very much for your help!
👍: 0 ⏩: 0
Does this work in custom boxes on ur profile?
Edit:
Just noticed a comment down here that it doesn't
Thing is i dont like the scolling boxes from those tutorials.. I rlly like this one..
but idk how to ?
👍: 0 ⏩: 1
| Next =>