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

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.

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:

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

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

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:

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:

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!

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 :

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:

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.

(Also, I recommend adding other peoples problems and solutionsto your description, because I was having a few problems, butby scrolling through others questions and answers, I goteverything to work out nwn)

I'm trying to figure out how to create translucent white boxes behind the thumb image/description with an opacity of 0.4I 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 =^.^=

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?

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.

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

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?

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.

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.