HOME | DD
GinkgoWerkstatt β .:Code Basics: Scroll Box
Published: 2010-04-11 12:42:32 +0000 UTC; Views: 23333; Favourites: 531; 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
I love this code!! But I have a question on the little scroll bar to the far right;
I am using a border-radius on the border of my scroll box, but the rounded corners are obscured by the scroll bar...is there any way to shorten and center the scroll bar within the border?
Thank you for your time
π: 0 β©: 1
Hm, the only way would be to have a wrapping box with the round borders. Padding won't help as it does only affect the text here. So best way is to add a simple
Do you know what i mean?
π: 0 β©: 1
Oh alright! I will see if that works! Thank you so much!
I think I understand, but any particular place I should put the .border affects? Or does it matter?
π: 0 β©: 1
It doesn't matter where you place it. Just take any spot that works best for you.
If you have problems with it, let me know and i will see what i can do for you
π: 0 β©: 1
Okay!
Will do 
π: 0 β©: 0
I'm looking for a way to put my journal text in a scrollbox to save some space in my journal... It seems like I would have to change the header portion of the CSS for each new journal with this technique. Is there a better way?
Also, is there a way to use table layouts in journal CSS?
π: 0 β©: 1
It was just placed in the header here to have the code automatically installed to the journal, otherwise people would need to add it via copy&paste. So if you don't want it to be part of the Skin Header, then just place it anywhere else. Just keep the HTML tags to wrap around your content.
Tables like you can use for websites are not able to be used on journals. But you can get a similar result with CSS. There is a similar install deviation but for thumbs. If you install that, it shows you how to get a "table-look"
π: 0 β©: 1
Ah, thanks so much!! This was a great help
π: 0 β©: 0
Can you use this more then once in a journal? Say have a scroll box for your journal and then a second scroll box for stamps?
And can it be used for non journal things like the feature to make your whatever-you-want-it-to-be box?
π: 0 β©: 1
Of course you can do more, but if they should have different characteristics(like different font colors or backgrounds) you need to give them different names. For example like .scrollbox1 and .scrollbox2
No, for the widgets it won't work because the current ability to use CSS there is just a bug and not fully supported.
π: 0 β©: 1
Alrighty, Thanks you!
π: 0 β©: 0
Is there a way to change the scroll bar itself? Like, making it rounded, or a different color?
π: 0 β©: 1
The way your scrollbar appears depends on the browser you are using. And the only browser that allows to modify it via CSS is the Internet Explorer. It would be the colors only though.
π: 0 β©: 1
Ah. O'well. Thanks.
π: 0 β©: 0
Thank you for the code
I have just one question. Does the scroll box work in a custom widget?
π: 0 β©: 1
No, because you are very limited at the profile page. And the CSS feature for custom widgets is more a bug than an actual feature
π: 0 β©: 1
Ah, I see
Thank you very much for help
π: 0 β©: 0
Is it posible to add a background to it?
Like a picture or a white background?
π: 0 β©: 1
Yes with the help of the background-property.
You have to add:
background: ...;
to the CSS in the scrollbox class.
And for the ... you either add that white color (#ff/b>f;<) or an image (url(IMAGEPATH);)
π: 0 β©: 1
Oh me.. i dont quite understand what does codes mean or where must i place them :<
π: 0 β©: 0
I got a question, I'd like a scroll box added to my current journal CSS. How would I add one in?
π: 0 β©: 1
Install this one and just copy the code from it. It's just the basic code so it will work with any other journal as well
π: 0 β©: 1
That's my problem, WHERE would I copy the code into? The header, footer, what?
π: 0 β©: 1
After installing it, you will find it in the CSS area and in the Skin Header. CSS code goes to the CSS area of your journal and the code of the Skin Header either goes to that again or will be added to the area where you write down your journal content.
π: 0 β©: 1
Oh okay, thank you!
π: 0 β©: 0
Hi there! I haven't given up on doing some journal CSS.
Mostly I modify existing journal skins if allowed. But sometimes it's hard to find what I need.
Or better: to find the code which is responsible for what I want to change. The gruze code is somehow confusing.
Could you make a snippet where I can see and understand how to implement thumbs (surrounded by a border with hovering effect)?
Thanks in advance.
π: 0 β©: 1
When i worked the first time with gruze i was very confused as well. But once you finally went through it, it's getting better.
Let me know if this was what you were looking for: [link]
It's really just very basic.
π: 0 β©: 1
Thanks a lot! I have replied at the submission page.
π: 0 β©: 0
I just wanted you to know that I added this code to my journal ^w^ [link]
π: 0 β©: 1
As long as there is some code for download or to install, you can use it
So yes!
π: 0 β©: 0
hei I want a scrollbar in middle of my journal... or elsewere but not on top... how can I do that?
π: 0 β©: 1
I am not really sure if i understand what you mean. A scrollbar can just be at the left side or the bottom of any journal element.
π: 0 β©: 1
and how do I put the scroll bar at bottom? cause If I install it, its everytime at top
π: 0 β©: 1
Having a scrollbar at the top is not possible
If you used this code it can only be at the right, no where else.
π: 0 β©: 1
I add it to my css and then I have at top of my journal a long scroll bar :S
π: 0 β©: 1
Ich seh gerade du bist aus Deutschland. Hast du das irgendwo zum angucken? Kannst du nen Screenshot machen?
Weil bislang hatte niemand damit Probleme und eigentlich ist das so einfacher Code, dass nix schief gehen kann.
π: 0 β©: 1
[link]
hab ma fix eins gemacht
will nΓ€hmlich das ding etwa inna mitte haben und da meine comic seiten als thumbs reinpacken
so wie jetzt im journal... aber da ist kein scroller bei :S
π: 0 β©: 1
Achso, du meinst du willst die Scrollbox nicht oben haben. Die Scrollbar ist nur das Ding zum verschieben
Du musst den Code vom "Skin Header" unter Options auf der Journal Seite komplett ausschneiden und dann an der Stelle einfΓΌgen wo du es haben willst. Dann klappt alles.
π: 0 β©: 1
hat funktioniert OO
ich krieg hier noch n fΓΆn XD
ich arbeite schon fast 3 stunden an dem doofen css XD
π: 0 β©: 1
Manchmal sind es kleine Dinge die einen an den Rand des Wahnsinns treiben, ich kenn das
π: 0 β©: 0
Its a very cool journal skin!
Read my latest journal if you want to see how I put it to use!
π: 0 β©: 0
| Next =>