HOME | DD
SimplySilent — PE: A Guide to Gallery CSS
Published: 2013-07-04 16:35:53 +0000 UTC; Views: 51477; Favourites: 1328; Downloads: 0
Redirect to original
Description
body div#devskin10422895 .code { background:#eaf4e9; padding:15px; font-family:'Courier New'; margin:0 5%; } body div#devskin10422895 h1 { font-weight:bold; } body div#devskin10422895 h2 { font-weight:normal; } body div#devskin10422895 .text h2 { color:#B73E62; font-size:20px; font-weight:bold; } body div#devskin10422895 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin10422895 .gr-top { display:none; } body div#devskin10422895 .gr-top .gr { display:none; } body div#devskin10422895 .gr-top h2 img { display:none; } body div#devskin10422895 .gr-top h2 { display:none; } body div#devskin10422895 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; margin:0 5%; } body div#devskin10422895 .gr { background:transparent; border:none; } body div#devskin10422895 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin10422895 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin10422895 i.tri { display:none; } body div#devskin10422895 i.gr1 { display:none; } body div#devskin10422895 i.gr2 { display:none; } body div#devskin10422895 i.gr3 { display:none; } body div#devskin10422895 i.gb { display:none; } body div#devskin10422895 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin10422895 .top img { margin:0px auto; min-width:529px; } body div#devskin10422895 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin10422895 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin10422895 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin10422895 span.board { display:none; } body div#devskin10422895 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin10422895 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin10422895 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin10422895 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin10422895 a { color:#B73E62; text-decoration:none; } body div#devskin10422895 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin10422895 ul { margin:0px 0px 0px 0px!important; } body div#devskin10422895 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif')!important; } body div#devskin10422895 li b { font-weight:bold; } body div#devskin10422895 li b sup { font-size:10px; font-weight:normal; } body div#devskin10422895 .list { display:none!important; } body div#devskin10422895 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin10422895 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin10422895 .clear_ { clear:both!important; } body div#devskin10422895 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin10422895 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin10422895 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin10422895 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10422895 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin10422895 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10422895 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10422895 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin10422895 .links img { padding-left:8px; } body div#devskin10422895 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin10422895 .buttons img { padding-right:8px; }
A Guide to Gallery CSS
Learn the basics of Gallery CSS with this easy-to-follow guide!
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.
Step 2: Click the button called "Folder Options" or "Collection Options."
This button is located at the top right of the gallery.
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 colorsThe 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:
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!
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:
width: 160px;
Now we get this much prettier result:
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
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:
- How to download and use gallery skins: How to Use Gallery Skins by xXSnowDreamXx
- Some useful basics for understanding CSS: PE: The Gate to CSS by PizzaPotatoNBacon
- Some more elements you can use: DeviantART Gallery CSS Explanation by toonham
- An installable code snippet resource for styling thumbs: Multi Thumbstyles CSS Template by gillianivyart
- A walkthrough of coding a gallery skin: Walkthrough Gallery Template by GinkgoWerkstatt
Gallery Skins:
Browse through Gallery Skins on deviantART.
Groups:
Related content
Comments: 240
Paste me your Image URL. You might be using one that's not good for DA.
👍: 0 ⏩: 1
www.themesltd.com/iphone/light…
it's the same one i used for my profile custom boxes 0:
👍: 0 ⏩: 1
Try:
body{background:url('http://www.themesltd.com/iphone/light_green_polka_dots.png')!important;}
👍: 0 ⏩: 1
prntscr.com/4dv44w
this is what happens when i copy and pasted in ):
👍: 0 ⏩: 1
Are you putting that in the description box where the "Here are the sketches" part is? It should be in the CSS box.
👍: 0 ⏩: 1
yeah it is in the CSS box 0: but it still showed up as a link instead of covering the background u n u
👍: 0 ⏩: 2
Use the code background-image instead of only background on the original code. I was having the same issue but this worked for me!
👍: 0 ⏩: 0
Try uploading the image to your sta.sh and try again.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
CSS is a coding language. All the code in this journal is CSS.
👍: 0 ⏩: 1
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?
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
thank you. i guess the one i was trying to figure out didnt make too much sense.
👍: 0 ⏩: 0
the collections options isn't visible
how i customize gallery buttons?
👍: 0 ⏩: 0
Is there a way to round the corners on the description box?
👍: 0 ⏩: 1
Sorry about how late this is. >.>
This should do the trick:
border-radius:10px;
-moz-border-radius:10px;
👍: 0 ⏩: 1
Oh its ok! Thank you so much!
👍: 0 ⏩: 0
The css provided was invalid. (Array) I have no idea wut to do. Please help :C -Kim 👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
👍: 0 ⏩: 0
The background image isn't working for me
👍: 0 ⏩: 1
Thanks for the tutorial! It was very helpful :3
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
I need to change the colour and hover-colour of the links (and :dev...: links too) in Description area. How to do so?
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
.description a{} and .description a:hover{} worked.
Thank you
👍: 0 ⏩: 1
Well look at that, I actually remembered that code from way back. 
👍: 0 ⏩: 1
yeah
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.
👍: 0 ⏩: 1
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. 
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
Nnngg-- How to know the CSS? I don't now-- ._.)
👍: 0 ⏩: 0
thanks a lot for this ! *^*
But, my description don't wanna go to the left Q_Q
👍: 0 ⏩: 1
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;
}
👍: 0 ⏩: 1
It works ! Thanks a lot and hum, how can I delete this part please ? °u° img15.hostingpics.net/pics/686…
👍: 0 ⏩: 1
You can't delete that sidebar, if that's what you're asking.
👍: 0 ⏩: 1
Ohw okay ! Thanks a lot !
👍: 0 ⏩: 0
Is there a way to get rid of the "box" effect around images?
If you need an example: venomous-bunny.deviantart.com/…
I couldn't find an answer so I thought I'd ask you ;_;
👍: 0 ⏩: 1
Yep. Somewhere in the CSS, write the following:
.tt-bb{background:#000;}
And then stick the appropriate color that you want instead of 000
👍: 0 ⏩: 1
Ahhh okay I think I understand, let me go try xD
Thank-you!
👍: 0 ⏩: 0
I've done the coding though it won't allow my description of the folder to go to the left or right side of the page and allow the art to go along side it. -- any tips?
👍: 0 ⏩: 1
Ahh, the gallery structure changed since the time when I had posted this.
To move the description, I believe you can type:
.description{float:left;}
Or float:right, if you'd like to move it to the right. I'll have to re-do this article in order to make sure that it's up to date though.
👍: 0 ⏩: 1
I tried to add a background image but it didn't work. What did I did wrong?
👍: 0 ⏩: 1
Where'd you try to add it to?
And did you use the correct format of:
background: url('IMAGE URL HERE');
👍: 0 ⏩: 1
I wrote it like this and added the link 
body{
background: url('INSERT IMAGE LINK HERE');}
h2{
background: url('INSERT IMAGE LINK HERE');
color: #fff;
margin: -15px 0px 30px -15px;
padding: 30px;}
.description{
background: url('INSERT IMAGE LINK HERE');
color: #fff;
padding: 20px;
width: 160px;}
👍: 0 ⏩: 1
Huh, you want to send me the link of the gallery you tried to add it to?
👍: 0 ⏩: 1
rosephdream.deviantart.com/fav…
👍: 0 ⏩: 0
Thank you for this! I'm really familiar with CSS, but haven't done it in a long while, so this really refreshed my memory! Very useful.
👍: 0 ⏩: 1
Awesome, glad it helped out!
👍: 0 ⏩: 0
<= Prev | | Next =>