HOME | DD
GinkgoWerkstatt — .:Code Basics: Scroll Box
Published: 2010-04-11 12:42:32 +0000 UTC; Views: 23086; Favourites: 536; Downloads: 3426
Redirect to original
Description
Every now and then it happens that i get asked how to code certain features for journals and similar to that i often see journals where someone struggles with coding from scratch or doesn't exactly know how to do what.
That's why i figured out that it might be helpful to have several very(!) basic code snippets, people can use to get started.
All these code snippets are rather plain code, mostly without any fancy images and much colors. They should just show the start. The possibilities of what can be done with that code are endless.
Also these snippets do not affect the journal in general, they will just add that featured "journal element" and nothing more.
I hope that this will be helpful for some people. To use the code snippets just click install. Everything can be found in the Skin Header or Footer and in the CSS form area.
No additional content code is needed!
Keep in mind that all these code snippets will refer to the gruze-structure, in case special journal classes will be affected by the code.
Have suggestions for more basic codes? Just leave a comment or note me!
Code Basics:
Planned:
Depending on my time, motivation and how useful this will be for people i might add more advanced code snippets later as well.
Related content
Comments: 113
Like mentioned in the description "To use the code snippets just click install. Everything can be found in the Skin Header or Footer and in the CSS form area. No additional content code is needed!"
Once you installed a journal, you need to select it at the journal page, when you click edit you will see the code that can be copied and used within other skins.
This is just a code part/journal feature, not an entire journal skin. So more code will be required.
👍: 0 ⏩: 0
Hello, I have a question,
is there a way to resize the scroll box? For example I have three boxes but I want one of them to be taller than the other two. How can I do this?
👍: 0 ⏩: 1
Yes, if you change the height value you can get different boxes.
If you go to the CSS code you have to create a new class for the scroll box with the different height thought. Otherwise all boxes will have the same height again.
For example this is the original code
.scrollbox{
overflow: auto;
height: 200px;
padding: 10px;
border: 1px solid #536a5d ;}
for any other use
.scrollbox2{...}, .scrollbox3{...} etc
This might help you to understand scroll boxes and how to modify them
How to: Scroll BoxesTransferred 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,
👍: 1 ⏩: 1
ahhhhhh I see now! Thank you!!
👍: 0 ⏩: 0
If you don't mind my asking, why can't non-core members use this?
Are we unable to, or something else?
I'm asking because I would like to install this and use it, but I noticed that only core members were allowed to. And I can't find anyone who offers anything else like this in the first place, let alone for non-core members.
(I'm sorry if I sounded harsh or rude aaaskjvjkbdm)
👍: 0 ⏩: 1
CSS isn't supported for Non-Core Members. You would be able to install it and also could see the preview(as far as I remember), but you can't apply it to any journal skin.
👍: 0 ⏩: 0
Sag mal, kennst du einen Code für eine durchsichtige Scroll box für Custom Boxes? Ich hab rumgesucht aber bisher keine gefunden. Vielleicht aber auch übersehen bei all den Angeboten da draußen..aber vielleicht kennst du was?
Ich wollte meine Page umgestalten mit Customboxen, in denen Scrollboxen integriert sind. Die Custombox mit Hintergrund versehen.
Die meisten Scrollboxen die ich gefunden hatte hatten weißlichen bzw den dA farbenen Hintergrund. Nicht das was ich suche für einen zB dunklen Sternenhintergrund.
Hast du da eine Idee?
👍: 0 ⏩: 1
Hm, ne. Also mit diesem Custom Box Zeug hab ich mich bislang ja nur sehr wenig beschäftigt. Wüsste jetzt auch gar nicht, ob mir schon mal was transparentes über den Weg gelaufen ist.
Wenn du es allerdings mit nem Fake-Journal machst (so wie bei mir auf der Seite), dann hast du ja natürlich alle CSS Freiheiten, die dir das Journal bietet.
Ansonsten mal evtl bei SimplySilent nachfragen. Soweit ich weiß, war sie eine der Ersten mit den Scrollboxen auf'm Profil
👍: 0 ⏩: 1
Fake Journal? Wo ich so gut css und so kann xD
Ich werd bei mir mal schauen ^^ Danke dir
👍: 0 ⏩: 1
Na da gibt es ja auch schon teilweise Templates - auch bei SimplySilent
Da sind dann diese Übersichten mit Links, wo du dann evtl nur die HIntergründe anpassen müsstest.
👍: 0 ⏩: 1
Ja gesehen. Hab sie denoch mal gefragt, vielleicht weiß sie ja was ^^
👍: 0 ⏩: 0
I know its a journal skin, but I want to put a scrollbox into a journal skin
this here for example: xxjustforfunxx.deviantart.com/…
It doesnt matter where I put the code in the skin css or other, nothing happens
👍: 0 ⏩: 1
The code comes it two parts, the CSS code and the HTML code. Did you add both to that other skin? And if yes, have you added enough content? The scrollbar just appears when there is too much content for the defined height. Otherwise it will look like normal text.
👍: 0 ⏩: 1
well, okay it worked, but I dont want all the text in the scrollbox. One part normal and one part scrollbox.
👍: 0 ⏩: 1
Then you just have to wrap the scrollbox HTML code around what should be inside.
👍: 0 ⏩: 1
Oh, I've got it! Thank you very much ^^
👍: 0 ⏩: 0
hello! ;v;
i was wondering if you knew how to get the scroll bar to be only a solid colored bar? (i'm sure you do but >n<)
like in um these journals: spashai.deviantart.com/journal… or koiifiishes.deviantart.com/jou…
i've looked everywhere but can't seem to find a code for it, and i've played around as well with the css but can't get it right :c
👍: 0 ⏩: 2
can you tell me the font you use in this comment please?
👍: 0 ⏩: 1
Hm, i don't see what you mean as scrollbars depend on the browser + possible styles/themes you are using. So i might see something different than you do.
Usually you can style the appearance of a scrollbar only for InternetExplorer. It won't work in general and for all browser. Still it can be overriden by browser themes.
So it's nothing i would recommend to change, it's not really worth the effort. On dA you might not find anything about it. Try a google search for scrollbar CSS for Internet Explorer otherwise.
👍: 0 ⏩: 1
Oh okay, well thanks anyways! 8D
👍: 0 ⏩: 0
No, this is only for journals.
For profile stuff, check either `CypherVisor or go to #eCSSited and take a look at the "Custom Widgets" folder
👍: 0 ⏩: 1
I can't get the scrollbox to appear inside the journal without starting at the top of the journal. For example, when I placed the (I've done this countless times so I am doing it right) code at the top of the box it works with the closing div tag. However, when I place the code anywhere below any other text to get a scrollbox underneath a paragraph or two (I don't want to include those paragraphs), it doesn't work.
👍: 0 ⏩: 1
When you install this code, it will automatically be placed at the top, as the HTML code is part of "Skin Header". So when you take that code from there and place it at you actual content area (where you type your journal text), there shouldn't be any problem.
Just to make sure i did a test here: [link] (it's just the scrollbox code and a limited width for the whole journal).
Have you changed anything of the code itself or already have any other code applied? If you have a live preview for me to look at that would already help, as i can directly look for the bug. Or maybe send me the HTML and CSS code you have used via note. Otherwise i wouldn't know what to suggest to be able to fix that.
👍: 0 ⏩: 1
I double checked it and I accidentally wrote forgot a ' " ' in the div. 
👍: 0 ⏩: 1
Well that was an easy way to fix it then. Glad to hear, that you have been able to resolve the problem
👍: 0 ⏩: 0
I love this code but its putting my journal footer in it as well and I really dont want that..
please
how do i fix it?
👍: 0 ⏩: 1
Sounds like you have forgotten to close the scrollbox. Please check if there is a after the content of the scrollbox.
👍: 0 ⏩: 1
Do you know how we can have the same scroll box for a custom box (so not a journal)? =0
(but good work for this css! \o/)
👍: 0 ⏩: 1
It doesn't work for custom boxes, as they allow default dA CSS only.
👍: 0 ⏩: 1
okay but you don't know when I can find this for a costum box? =o
👍: 0 ⏩: 1
I mean it doesn't work in general, not just this code. It's not possible to add any scrollbox to custom boxes.
👍: 0 ⏩: 1
Ok! Thank you for your answer! ^^
👍: 0 ⏩: 0
Is there a way to change the color of a scrollbar? I used the regular color code but it doesn't seem to work.
👍: 0 ⏩: 1
As far as i know it only works for IE and Opera. Last time i have used it was around 2002, so i am not sure if it is still supported by any of the newer browsers.
👍: 0 ⏩: 0
Thank you so much for making these! You are really helpful. I may not have money for a subby but when I can I will get the goods!
👍: 0 ⏩: 1
My pleasure. Hopefully you don't have to wait for too long to get a sub
👍: 0 ⏩: 1
*nodnod* I hope so too. Thank you.
👍: 0 ⏩: 0
Thank you greatly for this. I'm going to try to use it to modify a current skin I have put up. 
👍: 0 ⏩: 1
Thank you! I hadn't even thought of it, just looking for how to format the journal text. Learned a bunch about the skins, today.
👍: 0 ⏩: 1
That's good to hear
👍: 0 ⏩: 0
| Next =>