Shop Mobile More Submit  Join Login

PE: A Guide to Gallery CSS

Thu Jul 4, 2013, 9:35 AM


A Guide to Gallery CSS

Learn the basics of Gallery CSS with this easy-to-follow guide! :dummy:

In this tutorial, we'll cover:



Adding Gallery CSS

First of all, some important facts about Gallery Skins:

  • Only Premium Members are allowed to add CSS to their galleries
  • Skins can be added to both the Gallery and the Favorites
  • Skins can only be added to the Gallery folders and Favorites collections (shown in the sidebar) but not the main page itself

Step 1: Click on one of your Gallery or Favorites folders in the sidebar.


Pick a Folder by SimplySilent

Step 2: Click the button called "Folder Options" or "Collection Options."

This button is located at the top right of the gallery.

Button by SimplySilent

Step 3: Click on the blue "CSS" link at the top of the box.

Then click on the link called "Add CSS..." and then click the "OK" button on the pop-up box. You'll end up with a white text box like the one shown below.

Css by SimplySilent

Step 4: Paste your CSS into the box and click "OK" to save.

Your CSS will automatically be added to the folder.


Coding Your Own Gallery Skins

Step 1: Understand the basic layout.

In this tutorial, we'll focus only on the three main parts of the gallery layout: the body, the folder title, and the description. Now don't worry, I promise that it'll be easier than you think! In the pop-up box that you get after you click "Folder Options" or "Collection Options," you are shown several options.

  • Name: Folder Title
  • Text: Description
  • Text Placement: Where your description goes. See the images below to see how these two formats look:

Box by SimplySilent

Here's what you get if you select "Left" for your text-placement:

Folder Layout by SimplySilent

And here's what you get if you select "Right" for your text-placement:

Right by SimplySilent

Please note how I have color-coded the three different parts of a gallery layout.

  • body (blue) covers the entire gallery folder
  • h2 (pink) contains the folder title
  • .description (yellow) contains the folder description

In this tutorial, we'll be working with the Left format, since that is the default option.

Step 2: Changing backgrounds and text colors

The first thing you'll probably want to do is change the colors of the backgrounds and text. Here's the basic format you can copy and edit:

body{
background:#color; }

h2{
background:#color;
color:#color; }

.description{
background:#color;
color:#color; }


For example, say I wanted a light gray background (#f1f1f1) for the body with a dark blue background for the folder title (h2) and description (#213457). I would type the following code into the CSS text box:

body{
background:#f1f1f1;}

h2{
background:#213457;
color:#fff;}

.description{
background:#213457;
color:#fff;}

The result would look like this:

Gallery by SimplySilent

Step 3: Changing margins and padding


Notice how the formatting looks rather ugly in the preview above. There's a gap that I don't like above and to the left of the title, and the title is jammed right above to the image thumbs. The text of the title and description also look quite cramped, making them a bit difficult to read. But no worries, we'll fix those up nicely with margins and paddings!

:lightbulb: Remember: margin refers to the space outside of a box, while padding refers to the space inside of the box!

In the paragraph above, I complained about the gaps around the title box (h2). Since that is outside of the box, we'll be dealing with margin. I want less of a gap at the top and the left, while I want more of a gap at the bottom. In CSS talk, this translates to:

margin-top: -15px;
margin-left: -15px;
margin-bottom: 30px;

or, if you are more experienced, you can condense the above into just one simple line :la: :

margin: -15px 0px 30px -15px;


Now, I also didn't like how the text looked cramped in the title and description. Since this is inside the box, we'll work with padding.

For the title (h2), I want a padding of 30px all around, while for the description, I want a padding of 20px all around. In CSS talk, this would be:

padding: 30px;

and

padding: 20px;

Since we added padding to the description, this makes it become too large and start to squeeze into the image thumbs. To fix this, I'll limit the size of the description to a smaller size of 160px by adding:

width: 160px;

Now we get this much prettier result:

Gallery2 by SimplySilent

Putting it all together, the code looks like this:

body{
background: #f1f1f1;}

h2{
background: #213457;
color: #fff;
margin: -15px 0px 30px -15px;
padding: 30px;}

.description{
background: #213457;
color: #fff;
padding: 20px;
width: 160px;}


Step 4: Experiment!


For those who are more experienced with CSS, here are just a few of many elements you can use:

  • .folderview-art {} contains all the image thumbs
  • .tt-w {} contains the thumb, title, comments, and artist
  • .thumb {} formats the image thumbs
  • .details {} contains the title, comments, and artist
  • .details .t {} formats the thumb title
  • .details .u {} formats the artist
  • .commentcount {} formats comments

:lightbulb: Tip! Use display:none!important; to get rid of any element you don't want. For example, if you want to hide the comments, type .commentcount{display:none!important;}.

Adding Background Images:

If you prefer patterns or textures instead of solid blocks of color, then you can add background images with this code:

background: url('INSERT IMAGE LINK HERE');

For those with more experience with CSS, you can also work with background color, background repeat, and background position. You can combine all these into one line like so:

background: #color url('INSERT IMAGE LINK HERE') no-repeat top;

To learn about all of the different options you can use, I suggest reading about backgrounds on www.w3schools.com



Some Useful Resources

Tutorials/Layouts:


Gallery Skins:

Browse through Gallery Skins on deviantART.

Groups:

:iconecssited: :iconcss-dyk:




Learn the basics of gallery CSS with this easy-to-follow guide! In this tutorial, we'll cover:

1. Adding gallery CSS
2. Coding your own gallery skins
3. Some useful resources
Add a Comment:
 
:iconsheeppoops:
SheepPoops Featured By Owner Apr 13, 2015  Student Digital Artist
I cant figure out how to put a background ;A;
I put the code in there, and replace the words, not the ' or ( and paste a background url.

Am I supposed to leave the Background colour? or am I supposed to remove it? D:
Reply
:iconrippleart:
RippleArt Featured By Owner Mar 29, 2015  Hobbyist General Artist
very useful and informative!! thank you very much!!
Reply
:icontheghin:
TheGhin Featured By Owner Mar 7, 2015  Hobbyist Traditional Artist
hello loved the tutorial
which css code you used?

Step 4: Paste your CSS into the box and click "OK" to save.

Reply
:iconkawaii-nurse:
Kawaii-Nurse Featured By Owner Mar 1, 2015  Hobbyist General Artist
Thank you so much for making this!
Do you have on for journal skin CSS?
Reply
:iconkittykittyhunter:
kittykittyhunter Featured By Owner Feb 26, 2015   Writer
Thank you so much for putting this together! It's really helpful.
Reply
:iconenatia-tsu:
Enatia-tsu Featured By Owner Feb 23, 2015   Digital Artist
Thanks so much, coming from a person who knows CSS for customization. this is very useful for customising my gallery and favourites. c:
Reply
:iconkojiana:
Kojiana Featured By Owner Feb 20, 2015
Thanks a lot. :thumbsup:
Reply
:iconmisterdoe:
misterdoe Featured By Owner Feb 18, 2015  Hobbyist Digital Artist
Great and useful tutorial. I hope to put it to work right away. :)

One little thing -- those anchor links to the different sections of this post all lead to blank Sta.sh documents... :|
Reply
:iconpromisedeclipse0988:
PromisedEclipse0988 Featured By Owner Dec 25, 2014  Hobbyist General Artist
Sorry never mind .u.'
Reply
:iconpromisedeclipse0988:
PromisedEclipse0988 Featured By Owner Dec 25, 2014  Hobbyist General Artist
How do i make the gallery folder pic in general change?
Reply
:iconensodancer:
EnsoDancer Featured By Owner Dec 23, 2014
What if I want to code a lit thumb in the description? I understand the basics of coding lit thumbs but how do I get to the ones within the description? I would at least like to take out the little blue journal icon. Thanks.
Reply
:iconsuirenhime:
SuirenHime Featured By Owner Dec 15, 2014  Hobbyist Digital Artist
This is SO helpful thank you ever so much for making this!

You have made mad scientist DA gallery CSS easy as pie! <3

(Also, I recommend adding other peoples problems and solutions
to your description, because I was having a few problems, but
by scrolling through others questions and answers, I got
everything to work out nwn)
Reply
:iconxxdreamdealerxx:
xxDreamDealerxx Featured By Owner Aug 23, 2014  Student General Artist
I'm trying to figure out how to create translucent white boxes behind the thumb image/description with an opacity of 0.4
I pretty much got it, but the thumb image is translucent as well! I'm not sure how to fix this, could you please help? Thanks =^.^=
Reply
:iconcreator-kami:
Creator-Kami Featured By Owner Aug 21, 2014
I have a couple questions for you pertaining to Gallery CSS. I'd like to know how to manipulate the previous and next buttons and the page number buttons in the gallery. I'd like to remove the buttons if at all possible and leave just the text. 

Also, is there a way to recolor links? I've been having a hellish time with that.

Also is there anyway to incorporate the gallery subfolders into the CSS code?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 21, 2014
1. Eurg, I'll have to go in a see the code again, as I never modify those. If you know how to Inspect Element (right click on the page and select Inspect Element) you can examine the HTML for those buttons yourself. :D

2. Only in Chrome. In firefox, DA's code overwrites anything you might try.

3. No, not that I know of.
Reply
:iconcreator-kami:
Creator-Kami Featured By Owner Aug 21, 2014
1. Ooh thank you so much!

2. Yay, I use Chrome! Okay, how exactly do you do it?
Reply
:iconlittlegreencreatures:
LittleGreenCreatures Featured By Owner Aug 17, 2014  Hobbyist Traditional Artist
I still don't know how to add the background image ): It keeps saying it's invalid. 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 17, 2014
This guide needs major overhauling, but this should still do the trick:

body{
background: url('IMAGE URL');
}

Make sure you're using the image url correctly.
Reply
:iconlittlegreencreatures:
LittleGreenCreatures Featured By Owner Aug 17, 2014  Hobbyist Traditional Artist
wait but i did put the image url in the IMAGE URL section and it still pops out and says that it's invalid D: 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 17, 2014
Paste me  your Image URL. You might be using one that's not good for DA.
Reply
:iconlittlegreencreatures:
LittleGreenCreatures Featured By Owner Aug 17, 2014  Hobbyist Traditional Artist
www.themesltd.com/iphone/light…

it's the same one i used for my profile custom boxes 0: 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 17, 2014
Try:

body{background:url('http://www.themesltd.com/iphone/light_green_polka_dots.png')!important;}
Reply
:iconlittlegreencreatures:
LittleGreenCreatures Featured By Owner Aug 17, 2014  Hobbyist Traditional Artist
prntscr.com/4dv44w
this is what happens when i copy and pasted in ): 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 17, 2014
Are you putting that in the description box where the "Here are the sketches" part is? It should be in the CSS box.
Reply
(1 Reply)
:iconkittyface27:
kittyface27 Featured By Owner Jul 5, 2014  Hobbyist Digital Artist
what is a css? i understand how to do it once i have one, but i cant tell what the css is or looks like?? please help.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 5, 2014
CSS is a coding language. All the code in this journal is CSS. :)
Reply
:iconkittyface27:
kittyface27 Featured By Owner Jul 5, 2014  Hobbyist Digital Artist
im sorry, i still dont understand. what is the code in this journal? i just found about the css today and googleing what it is isnt helping me. sorry. :(
like what does it look like. is it a really long string of letters and symbols?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 5, 2014
CSS looks like this:

body{
background:#color; }

h2{
background:#color;
color:#color; }

.description{
background:#color;
color:#color; }

All the code in the white boxes in the journal are CSS codes. :)
Reply
:iconkittyface27:
kittyface27 Featured By Owner Jul 5, 2014  Hobbyist Digital Artist
thank you. i guess the one i was trying to figure out didnt  make too much sense. :)
Reply
:iconshiryobukai-uta:
Shiryobukai-Uta Featured By Owner May 29, 2014  Hobbyist General Artist
the collections options isn't visible
how i customize gallery buttons?
Reply
:iconflick15:
Flick15 Featured By Owner May 7, 2014  Hobbyist Digital Artist
Is there a way to round the corners on the description box?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 16, 2014
Sorry about how late this is. >.>

This should do the trick:

border-radius:10px;
-moz-border-radius:10px;
Reply
:iconflick15:
Flick15 Featured By Owner May 16, 2014  Hobbyist Digital Artist
Oh its ok! Thank you so much!
Reply
:iconinkuy:
inkuy Featured By Owner Apr 29, 2014  Hobbyist Digital Artist
<D I used this code: background: url('INSERT IMAGE LINK HERE'); to try to put the image in the CSS in the gallery settings but it said: 
  • The css provided was invalid. (Array)


    I have no idea wut to do. Please help :C

    -Kim
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 29, 2014
Make sure that you're inserting the correct image url in the INSERT part. Right click over your image and click the option most similar to "Copy Image URL" and paste that into the INSERT part. :)
Reply
:iconinkuy:
inkuy Featured By Owner Apr 30, 2014  Hobbyist Digital Artist
<D thank you so much! Neko Emoji-28 (Nyaa) [V2] 
Reply
:iconbaconbloodstrike:
BACONBLOODSTRIKE Featured By Owner Apr 20, 2014  Hobbyist Digital Artist
The background image isn't working for me :(
Reply
:iconbaconbloodstrike:
BACONBLOODSTRIKE Featured By Owner Apr 20, 2014  Hobbyist Digital Artist
Plz help
Reply
:iconyinukume:
YinUkume Featured By Owner Apr 7, 2014  Hobbyist General Artist
Thanks for the tutorial! It was very helpful :3
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 7, 2014
Great! I'm afraid it's a little outdated due to an update by dA on the structure, but hopefully I'll get around to fixing it back up. :)
Reply
:icongoodnight-melbourne:
Goodnight-Melbourne Featured By Owner Apr 1, 2014   Traditional Artist
I need to change the colour and hover-colour of the links (and :dev...: links too) in Description area. How to do so?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 1, 2014
dA's gallery code becomes fairly complicated as you try to get into more of the details. I believe the links might be able to be changed through .description a{} or .description small a{}. If all fails, you can always use Inspect Element on your browser (right click somewhere and click the option most similar to Inspect Element) to identify the right selector.

However, do note that some things cannot be changed for the Firefox browser. I've been attempting to find a way to work around it, but some of the links will not change color when viewed in Firefox.
Reply
:icongoodnight-melbourne:
Goodnight-Melbourne Featured By Owner Apr 2, 2014   Traditional Artist
.description a{} and .description a:hover{} worked.
Thank you :)
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 2, 2014
Well look at that, I actually remembered that code from way back. :XD: Glad it all worked out. :aww:
Reply
:icongoodnight-melbourne:
Goodnight-Melbourne Featured By Owner Apr 3, 2014   Traditional Artist
yeah :D
Thanks to you.

Just I dont understand....maybe devianart's gallery layout changed after this journal or something else. Because the description placement is not at there anymore where you showed.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 4, 2014
Yes, dA's format changed, which means that this guide is rather outdated. I am currently working on fixing some of my journal skin tutorials, but after those are done, I will try to get around to updating this one. :) 
Reply
:icongoodnight-melbourne:
Goodnight-Melbourne Featured By Owner Apr 5, 2014   Traditional Artist
Not entirely outdated. dA included that big "Submit here" button there just - that can't be removed.
Your journal skins are pretty nice :)
Good luck tweaking them.
Cheers.
Reply
:iconharacchii:
haracchii Featured By Owner Mar 14, 2014  Hobbyist General Artist
Nnngg-- How to know the CSS? I don't now-- ._.)
Reply
:iconkeralice:
Keralice Featured By Owner Mar 5, 2014  Hobbyist Digital Artist
thanks a lot for this ! *^*
But, my description don't wanna go to the left Q_Q
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Mar 5, 2014
This tutorial is a bit outdated, I'm afraid. dA's changed their layout since I wrote this, so it's a bit different.

To make the description go to the left, I believe you have to set it's float to left and also specify a width. Try:

.description{
float:left;
width:200px;
}
Reply
Add a Comment:
 
×

:iconsimplysilent: More from SimplySilent


Featured in Collections

Customization by Kusachii


More from DeviantArt



Details

Submitted on
July 4, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
14,695 (9 today)
Favourites
758 (who?)
Comments
159
×