HOME | DD
GinkgoWerkstatt β Code Basics: Sidebar- Floating
Published: 2010-04-11 13:05:17 +0000 UTC; Views: 9959; Favourites: 422; Downloads: 884
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.
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:
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: 32
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?
π: 0 β©: 1
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.
π: 0 β©: 1
For some reason it didn't install properly. Re-installing fixed the issue! 
π: 0 β©: 1
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)
π: 0 β©: 2
That's good to hear
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
Your headline
which shortens the HTML code a bit.π: 0 β©: 1
Oh, already find it out!
π: 0 β©: 0
Hi just a quick question. How would I go about making two sidebars? Thanks.
π: 0 β©: 1
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-
π: 0 β©: 0
Would you mind explaning how to change the background so that I have an image in the backgrownd behind and around the text? I have looked at tutorials and I have not understood them at all.
π: 0 β©: 1
If you want to use a background image somewhere you always have to use background: url(URL OF THE IMAGE);
That is the basic settings. If the image shouldn't repeat then it looks like background: url (URL OF THE IMAGE) no-repeat;
You can also add information if the image should be placed at the top, in the center or at the bottom (right after the no-repeat or the URL.
So if you want to add a background to the sidebar at the top left and the class name is .sidebar it would look like this:
.sidebar{
background: url(URL OF THE IMAGE) top left no-repeat;}
Does that help? If not, maybe look up [link] additionally
π: 0 β©: 1
Yes it does thank you. :3
π: 0 β©: 0
you are more than awsome and im more than thankful for all this tutorials and codes resourse.
π: 0 β©: 1
Aww, that's kind of you to say. thank you!
π: 0 β©: 0
You did a great thing!!
I think I'll try to use them somehow, thank you so much!^^
π: 0 β©: 1
Thank you! And good luck with it
π: 0 β©: 0
And i hope that it is useful for people, so that i don't have to answer the same questions again and again.
π: 0 β©: 1
If you want to have the sidebar at the left side:
- change float:left of .sidebar to float: right
Da hast du einen Fehler.
Ansonsten genial. 
π: 0 β©: 1
Shit kann ich nimmer Γ€ndern, weils im CSS ist
Naja, vllt ΓΌbersehen die Leute das ja
π: 0 β©: 1
Ich seh alles. 
Tut mir leid.
Ja, man versteht es schon.
π: 0 β©: 1
Ich hatte das vom anderen kopiert und das wohl ΓΌbersehen
π: 0 β©: 1
Very lovely, all of these. Especially for n00by coders like myself to learn from. ;D
π: 0 β©: 1
Especially made for people that want to have some basics to play around with. Might be easier at first, than coding from scratch
π: 0 β©: 0
