Shop Mobile More Submit  Join Login


Submitted on
April 11, 2010
File Size
779 bytes


198 (who?)
Code Basics: Sidebar- Floating by ginkgografix Code Basics: Sidebar- Floating by ginkgografix
:bulletgreen: You need to have a Premium Account or to be a staff member/volunteer to use this :bulletgreen:

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.

This code has additional information in the CSS code with explanation of how to move the sidebar to the right side.

Have suggestions for more basic codes? Just leave a comment or note me!

Code Basics:
:bulletgreen: Scrollbox
:bulletgreen: Topmenu
:bulletgreen: Sidebar (floating)
:bulletgreen: Sidebar (absolute)
:bulletgreen: Mood-List (absolute Position, without any background)
:bulletgreen: Topmenu (absolute Position)

:bulletgreen: Credit (absolute Position)

Depending on my time, motivation and how useful this will be for people i might add more advanced code snippets later as well.
Add a Comment:
Forty-Fathoms Featured By Owner Mar 6, 2014  Professional General Artist
I don't think this is working anymore (lucky me, just when I really need it). I used it a couple months ago and now it's not working. I'm using the same code and everything but it's just keeping everything all lined up and not floating. Even the line separating the sidebar from the regular wall of text has disappeared. Did this change with dA's ridiculous obsession with making everyone changing good-working codes all the time?
ginkgografix Featured By Owner Mar 7, 2014
Just installed it and had no problems. Worked right away. Maybe try to re-install it? Perhabs you have changed something by accident?
If re-installing doesn't help, send me the code you have used and i will take a look at it.
Forty-Fathoms Featured By Owner Mar 7, 2014  Professional General Artist
For some reason it didn't install properly. Re-installing fixed the issue! :thumbsup: Thanks!
ginkgografix Featured By Owner Mar 7, 2014
AntonMoscowsky Featured By Owner Oct 22, 2012  Hobbyist Digital Artist
Thank you so much! I am working on my own skin, your stuff helps a lot. Have a question: do you know how to make title field for sidebar? (with own font options and background)
ginkgografix Featured By Owner Oct 24, 2012
That's good to hear :thanks:

You can easily do it with
Your Headline
within your sidebar and then you create .headline in the CSS area and apply colors, backgrounds etc.
And if i am right you can use the h-tags (h1, h2, h3 etc) which are the regular headlines these days in journals as well. So you would only need <h2>Your headline</h2> which shortens the HTML code a bit.
AntonMoscowsky Featured By Owner Oct 24, 2012  Hobbyist Digital Artist
AntonMoscowsky Featured By Owner Oct 23, 2012  Hobbyist Digital Artist
Oh, already find it out! :#1:
BlueLeviathan22 Featured By Owner Jul 25, 2012
Hi just a quick question. How would I go about making two sidebars? Thanks.
ginkgografix Featured By Owner Jul 26, 2012
You have to duplicate the CSS code but rename the bits... like .scrollbar and .scrollbar2 - to be able to let the browser differ between them. And then you need to change the spacing-values for one of them-
Add a Comment: