Shop Mobile More Submit  Join Login
.:Walkthrough Gallery Template by ginkgografix .:Walkthrough Gallery Template by ginkgografix

It appears you don't have PDF support in this web browser. Download PDF

Finally the tutorial/walkthrough for coding a gallery template is finished. I know this took way too much time, but eh i'm lazy and was able to fix the image "bug" some days ago.


Like always this is just one way to code and not perfect nor anything that claims to be the best solution. It's my way of working on gallery templates, but i hope it's helpful and you can retrace why i did what. If not... feel free to ask as always :aww:

It's always difficult to explain everything that you need to take care of. Mostly because it always depends on the layout you've created and the way it should work. Should the size vary, should it be fixed etc.


This was requested by ~KatiBear.
And a big thanks to ~Espiroth for beta reading - she said my english improved. YAY! :hug:


---
Divider brushes [link] by ~ro-stock

:pointr: My tutorials/guidelines
:bulletgreen: CSS Guideline [link]
:bulletgreen: Old vs Gruze Journals [link]
:bulletgreen: Ungruze your Journals [link]

:bulletgreen: How to add image paths [link]
:bulletgreen: How to add a gallery CSS [link]
:bulletgreen: How to make a journal layout [link]

:bulletgreen: ABC of dA CSS Part I [link]
:bulletgreen: ABC of dA CSS Part II [link]


:pointr: My walkthroughs
:bulletgreen: How to code a gallery template [link]
:bulletgreen: How to code a journal [link]
:bulletgreen: How to code a journal II [link]


:pointr: My video tutorials
:bulletgreen: Changing sidebar settings [link]
:bulletgreen: Adding Gallery CSS II [link]
Add a Comment:
 

Daily Deviation

Given 2009-06-11
" Very helpful and great free Gallery tutorial. "

.:Walkthrough Gallery Template by `ginkgografix ( Suggested by JurgenDoe and Featured by PurpelBlur )
:iconmah-chan:
Critique by Mah-chan Apr 19, 2009, 4:26:49 AM
The tutorial idea itself is original - I haven't seen much people willing to share knowledge about coding galleries, mainly because it was shown that's kind of tricky.
When you start explaining how it's done, you make it so simple that beginners like myself and others that have no knowledge whatsoever about CSS coding can understand and try their hand at it!
I do realize, though, that nothing is easy at the very beginning, but when you put up a tutorial, you make it seem so. The explanation is extensive and covers basically everything, explaining the bits of code and whatnot.
Very in-depth. Great job!
What do you think?
The Artist thought this was FAIR
9 out of 9 deviants thought this was fair.

:iconjurgendoe:
Critique by JurgenDoe Apr 19, 2009, 4:55:42 AM
I don't need to say to much about your CSS and coding skills and here we are getting another prove of those skills again. I love the background and the way hw you play always with the colors. Everything is very harmonized and didn't hurt the eyes at all. The lines under each thumb and the lines on top and the side looking wonderful and giving the whole gallery a nice touch up.

You did again an outstanding job with this Gallery CSS and hopefully you'll receive a DD for this. Your resources makes it very easy for everybody who does not understand CSS very well.

Thanks again for another wonderful and helpful CSS :hug:
What do you think?
The Artist thought this was FAIR
38 out of 39 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconbaldwitch:
BaldWitch Featured By Owner Jul 11, 2013
I'm happy that I found your tutorial :) It helps me to understand many of my past mistakes, but nonetheless I give up. Maybe there is no power on this world which could helps me to understand it to such an extent that I will be able to creat even one journal skin :saddummy:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jul 11, 2013
Sometimes it just needs a little while until you fully understand what is going on. So maybe after a break you will find yourself giving it a try again?

The only thing i could suggest is to start with a simply layout. Play around with any graphic program and create something easy you would like as a skin. From there go step by step.
Reply
:iconbaldwitch:
BaldWitch Featured By Owner Jul 12, 2013
Actually it was my secend go, layout was simple but again it came to nothing. I'm able to change background and that's it. From this moment everything stoped working :tantrum:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jul 12, 2013
Oh, that's not good :/
Reply
:iconbaldwitch:
BaldWitch Featured By Owner Jul 17, 2013
Well I really give up. I read all of your tutorials and nothing helps. Nevertheless thank you for advices.
Reply
:iconbaldwitch:
BaldWitch Featured By Owner Jul 12, 2013
Wonders will never cease! I finally know how it works! :dummy: Obviously it puts my fervour to the test because on the horizon is a horror of adding journal skins :XD: But this part of black magic will come in the course of time.
Thank you so much for help :tighthug:
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Feb 28, 2013  Hobbyist Digital Artist
Fantastic! thanks so much.
:iconredsparklesplz:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Feb 28, 2013
:hug:
Reply
:iconcosmicbrambleclaw:
CosmicBrambleclaw Featured By Owner Feb 19, 2013
wish I could see it x3 Im trying to make a gallery skin and im so lost DX
Reply
:iconginkgografix:
ginkgografix Featured By Owner Feb 19, 2013
It should work, maybe try to refresh or to download it?
Reply
:iconcosmicbrambleclaw:
CosmicBrambleclaw Featured By Owner Feb 20, 2013
i couldnt get it to load i dont think, maybe it did *doesnt remember*
Reply
:iconblackwolfgrimm:
BlackWolfGrimm Featured By Owner Oct 5, 2012  Hobbyist Digital Artist
I kind of skimmed through this real quick and I can tell that this will be a help to me. I have been trying to create my on CSS skins and usually it's a hit or miss with meXD; This looks great and I'll be coming back to this once I figure out all the colors and all I want to use for mine. Thanks for making this!~
Reply
:iconginkgografix:
ginkgografix Featured By Owner Oct 6, 2012
A lot of information is already rather old, but this shouldn't confuse you too much as you can still learn the basics from it :aww:
Reply
:iconkittykittyhunter:
kittykittyhunter Featured By Owner May 11, 2012   Writer
Thank you very much for this. :)
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 12, 2012
My pleasure.
Reply
:iconuiizaelic:
UiiZaelic Featured By Owner Jan 21, 2012  Professional
this should come in handy, thanks! :D
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 22, 2012
My pleasure!
Reply
:iconlaxmi-arts:
Laxmi-Arts Featured By Owner Dec 8, 2011  Hobbyist General Artist
It's loading,loading and loading :cries:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 8, 2011
Hm, even with my slow connection it is loading without problems.
Did you try to refresh? And did it happen with other pdf-files as well? D:

There is a donwload button as well, did you try that?
Reply
:iconlaxmi-arts:
Laxmi-Arts Featured By Owner Dec 8, 2011  Hobbyist General Artist
Oh now i got it :dance:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 8, 2011
:w00t:
Reply
:iconlaxmi-arts:
Laxmi-Arts Featured By Owner Dec 8, 2011  Hobbyist General Artist
:glomp:
Reply
:iconeternal-skye:
Eternal-Skye Featured By Owner Dec 4, 2011  Hobbyist Interface Designer
This was great! Thanks a lot :heart:
If you are curious,
this is what my gallery looks like now: [link]
Reply
:iconginkgografix:
ginkgografix Featured By Owner Dec 4, 2011
Thank you too!
Enjoy your brand new gallery skin. Looks good! :aww:
Reply
:iconeternal-skye:
Eternal-Skye Featured By Owner Dec 4, 2011  Hobbyist Interface Designer
Thanks :D
Reply
:iconphoenix71991:
Phoenix71991 Featured By Owner Sep 18, 2011  Hobbyist Traditional Artist
Kannst du mir bitte mal den ganzen Code per note schicken? Bitte!
I habe mir das PDF Runtergeladen aber ab dem hier ist immer ein Fehler ---> .description{
margin: -50px 0 0 60px;
}

Ich verzweifele langsam... TT^TT
Reply
:iconginkgografix:
ginkgografix Featured By Owner Sep 19, 2011
Ich hab keine Code-Datei davon mehr bzw damals nicht gespeichert, weil es nicht gebraucht worden ist. Da dies aber schon älter ist und Gallerien seit dem ein Update hatten, kann es sein, dass es deswegen Probleme gibt.

Was genau gibt es denn als Fehler? Notfalls schick mir mal, was du bislang hast(mit dem fehlerhaften Teil) und ich guck mir das mal an.
Reply
:iconphoenix71991:
Phoenix71991 Featured By Owner Sep 28, 2011  Hobbyist Traditional Artist
Schon ziemlich am Anfang... Jetzt habe ich blos einen Farbigen Hintegrund aber der Rest geht nicht...
Reply
:iconginkgografix:
ginkgografix Featured By Owner Sep 28, 2011
Aber bis zum Schritt "Adjusting the Description" funktioniert alles? Wenn ja, schick mir mal deinen Code. Anders kann ich dir schlecht helfen.
Reply
:iconphoenix71991:
Phoenix71991 Featured By Owner Sep 28, 2011  Hobbyist Traditional Artist
body{
background: url([link]);
color: #a6a487;
font-family: Tahoma, Times New Roman, serif;
font-size: 13px;
}

Ab da gehts nicht mehr...
Reply
:iconginkgografix:
ginkgografix Featured By Owner Sep 30, 2011
Also ich hab den Code bei mir jetzt mal eingefügt und auch das mit .description und es funktioniert alles so wie es soll (laut Code) :o

Zu sehen hier: [link]
Reply
:iconphoenix71991:
Phoenix71991 Featured By Owner Oct 6, 2011  Hobbyist Traditional Artist
Nur das die Beschreibung zu weit oben sitzt. Aber trotzdem Danke! Ich werde es auch mal selbst probieren (geht ja schließlich vor studieren XD ) Außerdem habe ich jetzt eine "blanke Gallerie vorlage" und dank deines tollen Turtorial kann ich die verändern! Also vielen lieben Dank!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Oct 6, 2011
Das es soweit oben sitzt liegt daran, dass du den oberen Bereich erst noch anpassen bzw vergrößern musst. Einfach den negativen Wert ändern und es schiebt sich weiter nach unten. Dann ist das Problem beseitigt.
Reply
(1 Reply)
:iconmannylinn:
Mannylinn Featured By Owner Aug 10, 2011  Hobbyist Digital Artist
How do I edit the "Futured" (main page in the gallery)?
'cause there is no "edit this widget" there..
Reply
:iconginkgografix:
ginkgografix Featured By Owner Aug 10, 2011
You can't edit it or apply any CSS to it. That is defined by dA, to keep the basic gallery similar all over the site.
Reply
:iconmannylinn:
Mannylinn Featured By Owner Aug 10, 2011  Hobbyist Digital Artist
Okay, I see (:
Reply
:iconmisslunarose:
MissLunaRose Featured By Owner Jul 5, 2011   General Artist
Thank you for making this tutorial! I tried it; it was really helpful.

I hope you don't mind that I used your template for my CSS folder. I made sure to credit you! (I also provided a link back to this.)

I had a lot of fun with this tutorial. I was able to make pretty folders! [link] You inspired me to share the custom backdrops I was making so that other premium members can make cool stuff too. Thank you so much for making this helpful resource. It really helped me beautify my gallery.

P. S. If you're interested, I found an awesome link for CSS colors. [link]
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jul 6, 2011
Glad to hear that this was helpful for you! Always makes me happy! :aww:

Will check that link, thanks for sharing! :thanks:
Reply
:iconlajoyli:
LaJoyLi Featured By Owner Jan 1, 2011  Hobbyist Digital Artist
excellent! thanks so much for putting up this resource!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 2, 2011
My pleasure!
Reply
:iconmorningstarskid:
morningstarskid Featured By Owner Oct 30, 2010  Hobbyist Photographer
Love the gifted ones as are you...share such as this for us XDs to use..:iconbowplz:...:rose:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Oct 31, 2010
:hug:
Reply
:iconaeltari:
Aeltari Featured By Owner Sep 27, 2010  Professional Digital Artist
Hi, this stuff makes me so angry. I cannot grasp it :(

My problem:
I could not get the left side of the image to show up completely. I messed with the code and got this:
.description{
background: url([link]) top left no-repeat;
z-index: 1;
position: absolute;
top: 157px;
left: 0px;
padding: 90px 0 0 90px;
}

Now its perfect, right? Wrong. When I hit the DONE button, half that left side lower image vanishes. So it shows up until I want to finish editing :(

I cannot figure it out.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Sep 28, 2010
The image is sliced and that's why only a part shows up. And the layout of that tutorial wasn't meant to be used, it was just an example. If you want to have a fancy gallery skin, take a look at the complete journal/gallery css gallery. There you can find plenty of them with instructions of what to do :aww:
Reply
:iconaeltari:
Aeltari Featured By Owner Sep 28, 2010  Professional Digital Artist
Im sorry to be such a pest :( This CSS is the one thing I have completely been stumped by, and cannot seem to grasp. I have gone into the CSS gallery but all that is in there are the ones for the journals, that install instantly. I wish to make something unique but no matter what it just goes over my head :(
Reply
:iconginkgografix:
ginkgografix Featured By Owner Sep 29, 2010
Then you have looked in the wrong gallery. Try this: [link]
I'm sure there is something you will like :aww:
Reply
:iconaeltari:
Aeltari Featured By Owner Sep 29, 2010  Professional Digital Artist
Oh ty so much! Its confusing for me, and I found something right away with your link!!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Oct 1, 2010
Oh, that's good!
Reply
:iconfudgecakekamy:
FudgecakeKamy Featured By Owner Mar 19, 2010
Can you make a gallery css with this image? [link]

I followed your tutorial and i got a error that said:
token description. { margrin

Umm can you help me :thanks:
Reply
Add a Comment:
 
×
Download PDF download, 1.2 MB


More from DeviantArt



Details

Submitted on
April 18, 2009
File Size
1.2 MB
Thumb

Stats

Views
23,158 (2 today)
Favourites
592 (who?)
Comments
150
Downloads
2,354
×