Shop Mobile More Submit  Join Login
×




Details

Submitted on
April 11, 2010
File Size
779 bytes
Link
Thumb
Embed

Stats

Views
5,471
Favourites
208 (who?)
Comments
32
Installs
637
×
Code Basics: Sidebar- Floating by ginkgografix Code Basics: Sidebar- Floating by ginkgografix
:iconfreeperm1::iconfreeperm2::iconfreeperm3::iconfreeperm4::iconfreeperm5::iconfreeperm6:
: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)


Planned:
: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:
 
:iconforty-fathoms:
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?
Reply
:iconginkgografix:
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.
Reply
:iconforty-fathoms:
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!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 7, 2014
Awesome!
Reply
:iconantonmoscowsky:
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)
Reply
:iconginkgografix:
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.
Reply
:iconantonmoscowsky:
AntonMoscowsky Featured By Owner Oct 24, 2012  Hobbyist Digital Artist
:iconletter-tplz::iconletter-hplz::iconletter-aplz::iconletter-nplz::iconletter-kplz::iconletter-splz::icontransparentplz::iconletter-aplz::icontransparentplz::iconletter-lplz::iconletter-oplz::iconletter-tplz::iconexclamationmark2plz:
Reply
:iconantonmoscowsky:
AntonMoscowsky Featured By Owner Oct 23, 2012  Hobbyist Digital Artist
Oh, already find it out! :#1:
Reply
:iconblueleviathan22:
BlueLeviathan22 Featured By Owner Jul 25, 2012
Hi just a quick question. How would I go about making two sidebars? Thanks.
Reply
:iconginkgografix:
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-
Reply
:iconcherryclover:
cherryclover Featured By Owner Jun 2, 2011  Hobbyist General Artist
can I use it?
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 2, 2011
Sure :nod:
Reply
:iconcherryclover:
cherryclover Featured By Owner Jun 3, 2011  Hobbyist General Artist
thankies!
Reply
:iconalianna013:
Alianna013 Featured By Owner Feb 22, 2011  Student General Artist
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. :(
Reply
:iconginkgografix:
ginkgografix Featured By Owner Feb 23, 2011
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 :aww:
Reply
:iconalianna013:
Alianna013 Featured By Owner Feb 23, 2011  Student General Artist
Yes it does thank you. :3
Reply
:icontycus:
TYCUS Featured By Owner Sep 28, 2010  Hobbyist Interface Designer
you are more than awsome and im more than thankful for all this tutorials and codes resourse. :)
Reply
:iconginkgografix:
ginkgografix Featured By Owner Sep 29, 2010
Aww, that's kind of you to say. thank you! :rose:
Reply
:iconerikari:
Erikari Featured By Owner May 11, 2010  Student Digital Artist
You did a great thing!!
I think I'll try to use them somehow, thank you so much!^^
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 11, 2010
Thank you! And good luck with it :aww:
Reply
:iconkjherstin:
Kjherstin Featured By Owner Apr 20, 2010
This is a great idea
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 21, 2010
And i hope that it is useful for people, so that i don't have to answer the same questions again and again. :B
Reply
:iconkjherstin:
Kjherstin Featured By Owner Apr 21, 2010
:giggle:
Reply
:iconpatrickruegheimer:
PatrickRuegheimer Featured By Owner Apr 12, 2010   Photographer

If you want to have the sidebar at the left side:
- change float:left of .sidebar to float: right


Da hast du einen Fehler. :giggle:

Ansonsten genial. :#1: :eager:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 12, 2010
Shit kann ich nimmer ändern, weils im CSS ist :shakefist:

Naja, vllt übersehen die Leute das ja :slow:
Reply
:iconpatrickruegheimer:
PatrickRuegheimer Featured By Owner Apr 12, 2010   Photographer
Ich seh alles. :evileye: :P
Tut mir leid. :lol:

Ja, man versteht es schon. :giggle:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 12, 2010
Ich hatte das vom anderen kopiert und das wohl übersehen :B
Reply
:iconpatrickruegheimer:
PatrickRuegheimer Featured By Owner Apr 12, 2010   Photographer
:giggle:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 11, 2010  Hobbyist General Artist
Very lovely, all of these. Especially for n00by coders like myself to learn from. ;D
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 12, 2010
Especially made for people that want to have some basics to play around with. Might be easier at first, than coding from scratch :aww:
Reply
:iconsilverdy:
Silverdy Featured By Owner Apr 11, 2010

Thank you! :nod:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 11, 2010
:hug:
Reply
Add a Comment: