HOME | DD
GinkgoWerkstatt — Code Basics: Tabs Outside
Published: 2013-02-04 13:44:55 +0000 UTC; Views: 2667; Favourites: 94; Downloads: 191
Redirect to original
Description
You need to have a Premium Account or to be a staff member/volunteer to use this 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.
Dumb fairy moment is over. It's possible to have these at the outside - which looks better - without major changes. Instructions of how to move them to the right side are included in the CSS. Other Code basics: (click for more )Have suggestions for more? Just leave a comment or note me!
Related content
Comments: 23
I'm having a hard time figuring out how to get content into each tab, every guide I pull up uses id or # which deviantart doesn't support. Would you mind explaining to me what you need to do to fill in the body of each tab? I'm referring to the "Ich bin Blindtext." portion if that was unclear.
👍: 0 ⏩: 1
When you click "Edit Skin" you can see the code for the tabs in the "Skin Header" section. There you can edit the tabs.
A blank space after each letter is required to make sure the text goes from the top to bottom, instead from left to right.
Hope this helps.
👍: 0 ⏩: 1
I saw that part, I was referring to the text in the body of the journal. Since the tabs look like they work by directing you out to a link, how do you get that link to go to the same journal and show text?
👍: 0 ⏩: 1
That are just normal links, not those that show any content on hover. To get that you would need to change several parts of the HTML & CSS code.
I don't do anything with DA CSS anymore, so I am not up to date if that still works or not and won't spent any time to write down or explain such things these days. There might be some tutorial or helpful code snippet, but right now I can't think of any. Maybe ask for help in the forum or over at eCSSited , so someone more active could help you with that.
👍: 0 ⏩: 0
Quick question for you. If you're coding a journal skin from scratch: How do you know what "class" it's under? Is the class the same term for the same function as when you're CSS-coding a web page?
👍: 0 ⏩: 1
Classes will usually be defined by yourself. When you code a regular web page from scratch there are a few default classes/containers you work with, the rest is up to you.
Here on dA you are a bit restricted as there are pre-defined structures. Still you can create your own, but only for the actual text area.
For what is already there please take a look at this:
👍: 0 ⏩: 1
Ahh, gotcha. Thank you very much, that's good to know!
👍: 0 ⏩: 0
This is probably the most beautiful code I have ever seen for journals. //happy tears// It will make group organizations so much easier. Thank you!
👍: 0 ⏩: 1
(Just asking to not break any rules)
So, basically, I can use this for making a new journal skin? Sorry if I sound like a complete idiot, but I'd rather be safe than sorry. 
👍: 0 ⏩: 1
Yes, these are made to make skinning a bit easier for those who aren't that familiar with CSS, but still want nice features for their skin
You can do whatever you want with it. Ok maybe not redistributing them as is
👍: 0 ⏩: 0
Are you going to do top/bottom inner/outer ones as well?
👍: 0 ⏩: 1
Hm, don't think so.
You think it is needed/wanted?
Because basically you can create that with the help of what i have done already. You just need to change the values a bit.
👍: 0 ⏩: 1
I think maybe a small note in the artist description to describe how to do the change. Like changing display to inline, etc. I didn't look at your code, but I assume that is what you have going on ;D
👍: 0 ⏩: 1
Just how to change it to have it at the right side. Explaining more would mess up the code too much.
👍: 0 ⏩: 1
Oh, okay. I guess don't worry about it unless people ask for it.
👍: 0 ⏩: 0