HOME | DD
GinkgoWerkstatt — .:Gallery Structure
Published: 2011-03-31 18:24:05 +0000 UTC; Views: 14524; Favourites: 291; Downloads: 38
Redirect to original
Description
edit4: 25.04.2015H2 is now H1, which might be the reason why some folder titles are not styled right anymore.
edit4: 30. September 2012
Just another update. Added a few bits of the new big thumbs addition.
Another reference sheet will follow soon.
edit3:
And another update. Added the comment counter section.
edit2:
When i asked if any tutorial needs an update i was made aware that the galleries have new page-listing elements. And here we go with the update.
Code for the menu button was added as well.
There have been some other things i fixed (because the code before wasn't 100% right) as well.
edit:
Added the code for the gallery page listing at the bottom. Just while working on all these templates for the contest i realized that it was missing here, so now it's there.
---
Since i started working on galleries i always loved the gallery reference sheet by janvanlysebettens , but every now and then i still had to look up additional classes - in case available - to work on templates and realized that there are much more elements you can make use of.
Making a reference sheet wasn't really planned, but it will be handy for something i have planned for the future, so i thought i just give it a try. That way others might are more motivated to give it a try with gallery templates as well. Because there aren't many yet!
Hope this is useful for some of you!
Detailed Information about Big Thumbs:
Inspiration:
But i guess also out of date.
---
My tutorials/guidelines 
CSS Guideline ginkgografix.deviantart.com/ar… Old vs Gruze Journals ginkgografix.deviantart.com/ar… Ungruze your Journals ginkgografix.deviantart.com/ar… How to add image paths ginkgografix.deviantart.com/ar… How to add a gallery CSS ginkgografix.deviantart.com/ar… How to make a journal layout ginkgografix.deviantart.com/ar… ABC of dA CSS Part I ginkgografix.deviantart.com/ar… ABC of dA CSS Part II ginkgografix.deviantart.com/ar… How to add CSS to Groups ginkgografix.deviantart.com/ar… How to create a new Stylish Script ginkgografix.deviantart.com/ar… More can be found here: ginkgografix.deviantart.com/ga…
Related content
Comments: 100
That's nice to hear!
Haven't really worked much with CSS for DA lately, but last time it wasn't possible to style anything of the sidebar. Maybe it has changed, but I highly doubt that, so you would have to use it as it is.
👍: 0 ⏩: 2
Hey, I do wanna tell you, for others that may be struggling with that blue "More Like This" bar, you can use this code to completely hide it:
small .mlt-link, .mlt-icon, .mlt-text{display:none;}
small:hover .mlt-link, .mlt-icon, .mlt-text{display:none;}
Took me some time to figure that one out, but it works!
👍: 0 ⏩: 1
There are many more classes you can use, but for someone who just started it is too confusing to list them all. Usually I just list the most important stuff. Those who are more experienced or want to try more advanced things will find a way to get the other class names - like you
Will highlight your comment for others, they might find it helpful
And the gallery code got several updates since I made that tutorial, keeping up with all changes is a pain. So as long as the basics are still covered I am too lazy to edit it.
👍: 0 ⏩: 1
Yeah, took some work, but did figure that out. The Web Console was my best friend for figuring this out!
Just calling the "small" class with {display:none;} gets rid of both the "More Like This" bar and the comment counter. Handy if you wanna condense some code! Looks like this:
small{display:none;}
I can't blame you for waiting between editing and updating! Just updating the files for my gallery design was a multi hour process.
👍: 0 ⏩: 1
You often can "erase" several things with just one class. Can be handy, but sometimes tricky when you remove something by accident.
Haha, yeah. Working on gallery code is a pain, as you have no preview and if there is an error the code will be set back. Can be quite annoying if you work on details.
👍: 0 ⏩: 1
Yeah, *{display:none;} will probably cause some issues!
I do wish the folder options had a "Preview" function like journal skins do! I only discovered the roll back annoyance sometime after starting my customization with CSS. This is mainly because I started off writing my code in an external program, then just copied it over when ready. Textastic is an awesome developer/editor for Mac!
👍: 0 ⏩: 0
Indeed, you can see the results of my designing here: hsoj95's Gallery
Huh, if you can't access the classes for the sidebar directly, then how did CypherVisor get his folder gallery to look like this?
Cypher's Gallery
I'd ask him, but it seems like he hasn't been around lately.
👍: 0 ⏩: 1
He might has used the given classes to move the gallery content to the left. That's how it looks like after a quick look at the source code.
👍: 0 ⏩: 1
Ah! That makes sense actually! I didn't think about being able to do that!
👍: 0 ⏩: 0
This was exactly what I needed!
It's so much easier instead of using inspect element until you find the right one to change ^^
You don't happen to know how to change the color of the deviation title when hovering over it? The thing is that if I write .details a{#ffffff } both the title and commentcount will be white, suggesting that both the title and commentcount are affected by .details a. However, if I try to use .details a:hover{#ffffff } only the commentcount turns white when you hover. I've tried using .details a .t a:hover{#ffffff } and .details a .t:hover{#ffffff } without success =\
👍: 0 ⏩: 1
Sometimes it can be really tricky to find the right class with those browser tools, especially if the yhave characteristics from their parents. Had a lot of desperate moments because of that already
If you try it with .ff-fh .tt-fh-oe:hover it should work, hopefully.
👍: 0 ⏩: 1
I've done some webprogramming before, but I still find it hard 
It worked with .tt-fh .tt-fh-oe:hover 
👍: 0 ⏩: 1
Hahaha, totally
My pleasure!
👍: 0 ⏩: 0
How come we have to write the code.. instead of copying the code in your description? i know you dont have but, it would be nice if you did.
👍: 0 ⏩: 1
First of all because that code explained above is not the code you will use. In fact you will only need parts of it (like the single class names) - depending on what you want to style and in which way you want to change your gallery.
Additionally it will be easier to remember, if you write things down on your own, instead of just copy&paste.
Also if i provide the tutorial, people could spent a little effort on their skins as well - even if it is just writing down a few words on their own
👍: 0 ⏩: 1
Oh Alright, thank you
👍: 0 ⏩: 0
How would I add a css to the main gallery? :c
Like when you click gallery on someone's page and it's the first page you see.
👍: 0 ⏩: 1
It's not possible to add any skin there, it works just for custom folders.
👍: 0 ⏩: 1
Oh okay. D:
Thank you for answering.
👍: 0 ⏩: 0
I can't figure out how to add color to .commentcount . Is it right this:
.commentcount {color:red;}?
👍: 0 ⏩: 2
Yes that should work. Or maybe .commentcount a {...} to adress it directly.
👍: 0 ⏩: 0
Never mind I figured it. It's:
.commentcount a {color:red;}
👍: 0 ⏩: 0
I read it. Then I blanked out. Then I once again reached the conclusion that I am in no way whatsoever technically minded.
👍: 0 ⏩: 1
Just reading alone rarely helps. You need to try to work on the things while reading. And this is just the structure along. Until you understand CSS a bit you won't understand here much anyway - or know what to do with the information
👍: 0 ⏩: 1
Oh, okay. Thanks for telling me 
👍: 0 ⏩: 0
Hey, I compiled a list of the structure which has some more. I didn't make a neat box model or anything, but you can see my file on GoogleDoc: [link] You can add comments (w/out logging in), so feel free to comment.
👍: 0 ⏩: 1
Yeah there are usually more classes, but i stick to the basic/most important ones. Mainly because it will confuse people if there is too much and i never used any of those other classes before. Not sure if they are really handy. Do you work with them?
👍: 0 ⏩: 1
Well, the .tt-bb one has the background that shows up behind the new thumbs and looks awful. =somrat has discovered this. That's why I have it in bold on the document and background:transparent; set. It is a good tip to add, even though it might be confusing. There sure are a lot of extra elements. I've been using "inspect element" to explore the structure, it has a 3D display available. Made it pretty easy to tell how each will effect. Also some things, you need to specify the "a" link otherwise it doesn't effect.
I just wrote down the entire list that I saw so I can weed out what I need, but have something extra there if I feel so inclined to add extras. There's a different thing for skinny thumbs, with the sides and left and right:
.tt-bbh-side{}
.tt-bbh-l{}
.tt-bbh-r{}
I noticed when I was setting a glow around a thumb that it wouldn't work quite right on the vertical thumbs that are cut off at the bottoms. [link] See, hover works on the landscape but not the portrait (cut off bottom). It's kind of annoying to need to add in extra for it. I was messing the other day, but forget where I left off. It may need "img" added into the code to remedy it.
If you want to link to my GoogleDoc, you may, but I might edit it. Add notes or something to it. Since I think the vertical cut off thumbs are important. Most people won't be all hover crazy like me though, so not need it. I like glow! There needs to be glitter CSS, right? glitter:1.0; Increase the percent of glitter around an element!
👍: 0 ⏩: 1
It might be just a beta-feature yet and i usually don't update or change anything until it will be released for the public. Just had a deviant contacting me about something that i wasn't able to see and help with because it was a beta-tester thing only for now.
Imo it's not useful to already make tutorials or something like that for things that might get changed more.
"inspect element" <- is that some kind of add-on? Just a bit lost here, that's why i am asking
To look up the structure i use Firebug. Works perfectly fine for me needs.
I might have been living under a rock, but what is a skinny thumb? Special thumbs or just those that would end up as long deviation and don't fill the entire thumb-space?
Haha, indeed!!
Maybe i will take a closer look at those .tt classes, but so far i haven't really been in the situation that i needed them. And those people the tutorials are made for are already happy if they figure out the simple stuff
👍: 0 ⏩: 1
I forget you do non-Beta... Yesh, all that I said is a Beta thing. The beta thumbs look good, however, there are some issues, like alignment and the skinny thumb thing. Hard to describe. Maybe I'll dig up the link to the article about them for you later. Have no clue when it will be active. I guess it's been Beta for about 2 weeks maybe.
Inspect Element is on the right-click drop down list in Mozilla. I think I'm running version 11... But it's been there a while. When we reformatted the other day, I did not even bother installing Firebug, as it completely negated it. I'm running minimum on add-ons now, since I think it slowed my browser down. I was setting up my son's computer last night with themes and such, I might try my hand at making some FF themes. Since it is CSS and all. ;D
👍: 0 ⏩: 1
It's sometimes difficult with all this beta/non-beta stuff to know how to help people or to get what they are talking about
Will take a look at that once it is available for everyone.
Wanted to give that a try once as well, but then there are so many things i want to try that i need to focus on "important" onces.
👍: 0 ⏩: 0
Ooooh. How did I not see this earlier? Thanks for the update.
~D~
👍: 0 ⏩: 1
No idea
And it's my pleasure.
👍: 0 ⏩: 0
Thanks for putting this together. When I start reworking my gallery, this will be very useful.
👍: 0 ⏩: 1
My pleasure. Hope it will help you
👍: 0 ⏩: 0
Really helpful and eye-opening, thank you for taking the time to make this
👍: 0 ⏩: 1
My pleasure!
👍: 0 ⏩: 0
Hey. I am trying use a css at my gallery. Here: [link]
I just can't find out why my all links except the first one are dead, when I customize skin...
Possibly?
👍: 0 ⏩: 1
Did you change something already? Because it seems to work for me D:
👍: 0 ⏩: 1
This is normal gallery: [link]
This is the one with css: [link]
In folder description link go blind when I change the css.
I can handle the margin-padding thing but I can not find out why my links are dead.
👍: 0 ⏩: 1
Ah, now i got it. The .folderview-art part must be overlapping the description. Add a border to that area first to see if that is right. If yes, add a margin to the left side of that class and it should work again
👍: 0 ⏩: 1
Ah, you're right. It seems ok now. Thank you so much.
👍: 0 ⏩: 1
| Next =>