HOME | DD

SimplySilent — PE: A Guide to Gallery CSS
Published: 2013-07-04 16:35:53 +0000 UTC; Views: 51482; 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; }




Community Week



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
  • Coding gallery skins
  • Some useful resources




    • 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!


    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:


    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


     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:






    Related content

    SimplySilent - Make a Profile Directory v.4 (Updated!)

    SimplySilent - Fullsized Gallery Directory

    SimplySilent - Clean Gallery CSS v.3

    SimplySilent - Vivacious Gallery CSS

    SimplySilent - Petite Gallery Skin

    [ TEXT ]


    SimplySilent - CSS/Profile Commission List

    [ TEXT ]


    SimplySilent - The things I will do for a badge...

    [ TEXT ]


    SimplySilent - Got Tagged x.x

    [ TEXT ]


    SimplySilent - Profile Directory Updated!
    Comments: 240

    proCHRISTinator In reply to ??? [2013-12-08 21:55:34 +0000 UTC]

    Paste your CSS in the box. What is a CSS, and how do I copy it?

    👍: 0 ⏩: 1

    JeffrettaLyn In reply to proCHRISTinator [2013-12-16 20:07:50 +0000 UTC]

    CSS is a code that translates to graphics when put into the correct place on deviantART. You can usually find CSS in downloadable files in the Gallery CSS section of deviantART. You would highlight and copy it from the file after downloading.

    👍: 0 ⏩: 0

    MarthaTuma In reply to ??? [2013-11-10 19:33:24 +0000 UTC]

    So... you can't change the CSS of the actual gallery? Like the very first screen that pops up when you go to my gallery?

    👍: 0 ⏩: 1

    SimplySilent In reply to MarthaTuma [2013-11-11 04:09:59 +0000 UTC]

    Nope, unfortunately not. You've got to stick with the regular deviantart green.

    👍: 0 ⏩: 1

    MarthaTuma In reply to SimplySilent [2013-11-11 07:32:38 +0000 UTC]

    Strongly worded letters are about to happen....

    👍: 0 ⏩: 1

    SimplySilent In reply to MarthaTuma [2013-11-12 01:12:06 +0000 UTC]

    It might be about just trying to keep things consistent with all users, the same way that dA keeps enforcing the rule that Art widgets go on the left and journals go on the right. I do hope they reconsider though, and give us some more customization abilities~

    👍: 0 ⏩: 1

    MarthaTuma In reply to SimplySilent [2013-11-12 01:26:12 +0000 UTC]

    Facebook and dA both... Wish myspace would come back haha

    👍: 0 ⏩: 0

    ArolinaK In reply to ??? [2013-10-25 23:42:58 +0000 UTC]

    Thank you!

    👍: 0 ⏩: 1

    SimplySilent In reply to ArolinaK [2013-11-02 19:28:22 +0000 UTC]

    No problem!

    👍: 0 ⏩: 0

    Forty-Fathoms In reply to ??? [2013-09-16 02:36:12 +0000 UTC]

    I can't figure out how to hide the artist name in my gallery. I don't need it, cause it's obviously my gallery and I just like the simplicity of just the title. What's the code for it? I've seen it done before.

    👍: 0 ⏩: 0

    Hamasan In reply to ??? [2013-08-14 15:45:58 +0000 UTC]

    Will this work with the newer gallery designs?

    👍: 0 ⏩: 1

    SimplySilent In reply to Hamasan [2013-08-14 23:34:27 +0000 UTC]

    As far as I know, the only thing that changed was that .folderviewtop{} became different. Other than that, the rest should be the same.

    👍: 0 ⏩: 1

    Hamasan In reply to SimplySilent [2013-08-15 11:27:09 +0000 UTC]

    Thanks!

    👍: 0 ⏩: 1

    SimplySilent In reply to Hamasan [2013-08-16 00:47:00 +0000 UTC]

    No problem

    👍: 0 ⏩: 0

    jane-beata In reply to ??? [2013-08-07 18:31:37 +0000 UTC]

    Hello, I just wanted to let you know that your helpful resource has been FEATURED

    👍: 0 ⏩: 0

    Rosenfox In reply to ??? [2013-07-22 17:21:19 +0000 UTC]

    Thank you for sharing

    👍: 0 ⏩: 1

    SimplySilent In reply to Rosenfox [2013-07-22 19:16:43 +0000 UTC]

    No problem at all~

    👍: 0 ⏩: 0

    Mamandil In reply to ??? [2013-07-17 15:59:03 +0000 UTC]

    Oh this is pretty cool, thank you very much for sharing!

    Btw I tried that no comment display tip you mentionned and it doesn't seem to work for me.
    Should the line " .commentcount{display:none!important;} " be included in something else in order to work properly ?

    👍: 0 ⏩: 1

    SimplySilent In reply to Mamandil [2013-07-17 18:52:21 +0000 UTC]

    Hmm, not exactly sure why it doesn't. The only reason why it shouldn't work is if you have more !important s added in the code that contradict it. I suggest placing the line at the very bottom of your code, and see how that works out.

    👍: 0 ⏩: 1

    Mamandil In reply to SimplySilent [2013-07-17 22:47:10 +0000 UTC]

    Placing it at the end seems to do the trick, it works now. Thanks!

    👍: 0 ⏩: 1

    SimplySilent In reply to Mamandil [2013-07-18 00:13:53 +0000 UTC]

    You must have had some other code in there that overrode the display none

    👍: 0 ⏩: 0

    iAmAneleBiscarra In reply to ??? [2013-07-14 00:53:23 +0000 UTC]

    very helpful! i have been playing around with journals, but i had no idea on how to code galleries! thank you so much for this!

    👍: 0 ⏩: 1

    SimplySilent In reply to iAmAneleBiscarra [2013-07-15 01:40:23 +0000 UTC]

    No problem! If you ever need any help, feel free to ask~

    👍: 0 ⏩: 1

    iAmAneleBiscarra In reply to SimplySilent [2013-07-15 13:48:38 +0000 UTC]

    awesome! thanks!

    👍: 0 ⏩: 0

    Cre8aRt4LifE In reply to ??? [2013-07-06 09:53:01 +0000 UTC]

    your awesome!!! I am working w/your skin I purchased in my Favs Gallery, love it!

    👍: 0 ⏩: 1

    SimplySilent In reply to Cre8aRt4LifE [2013-07-06 21:19:53 +0000 UTC]

    👍: 0 ⏩: 0

    Altair-E In reply to ??? [2013-07-06 08:19:34 +0000 UTC]

    I don't why I haven't the button called "Folder Options" or "Collection Options" however I'm a premium member.
    Is there something special to do to make this button appear on the pages of favorites.
    Thanks for answering me

    👍: 0 ⏩: 1

    SimplySilent In reply to Altair-E [2013-07-06 21:20:56 +0000 UTC]

    Make sure that you are within one of your gallery or favorites folder. So not the main folder you get when you click on the Gallery or Favorites tab. Does your page look like the screenshots I have in the article?

    👍: 0 ⏩: 1

    Altair-E In reply to SimplySilent [2013-07-06 21:59:33 +0000 UTC]

    That's what I do. [link]

    👍: 0 ⏩: 1

    SimplySilent In reply to Altair-E [2013-07-06 22:31:58 +0000 UTC]

    I see, right now you are in the main favorites folder. You see all your subfolders on the side called Drawings, Photos, etc.? You can only add css to those folders. If you click on them, you'll see the Collection Options button.

    👍: 0 ⏩: 1

    Altair-E In reply to SimplySilent [2013-07-06 22:34:05 +0000 UTC]

    Ok!!! Thank you for your help, it's nice!

    👍: 0 ⏩: 1

    SimplySilent In reply to Altair-E [2013-07-06 22:59:42 +0000 UTC]

    👍: 0 ⏩: 0

    Infinitai In reply to ??? [2013-07-06 06:28:41 +0000 UTC]

    How do you again put backgrounds in gallery css? whenever i try, it says 

    • The css provided was invalid. (Array).

    👍: 0 ⏩: 2

    SimplySilent In reply to Infinitai [2013-07-06 07:00:37 +0000 UTC]

    Whoops, sorry, no dot before the body


    body{

    background: url('IMAGE URL HERE');

    }

    👍: 0 ⏩: 0

    SimplySilent In reply to Infinitai [2013-07-06 06:59:25 +0000 UTC]

    If it's the body you want to change, then you could type:


    .body{

    background: url('IMAGE URL HERE');

    }


    Make sure you're getting the image url, not the page url.

    👍: 0 ⏩: 0

    Lady-Compassion In reply to ??? [2013-07-06 03:33:11 +0000 UTC]

    You have made a complicated process (to me anyway) seem a little easier and possibly attainable to someone like me....thanks for sharing!

    👍: 0 ⏩: 1

    SimplySilent In reply to Lady-Compassion [2013-07-06 04:12:48 +0000 UTC]

    No problem! And it's really not as bad as it may look. I personally learned CSS from looking at other people's installable journal skins, as strange as that sounds.


    When I got a premium membership several months back, the first thing I looked at were the journals. I spent a few weeks fiddling with different skins, seeing how changing something would affect the journal, and then soon enough I could make my own. Then I found that there were good tutorials and resources on dA I could have used so I wouldn't have to manually figure out everything on my own.

    👍: 0 ⏩: 0

    ryu1151010 In reply to ??? [2013-07-06 01:13:30 +0000 UTC]

      Thank-youuuu <3

    👍: 0 ⏩: 1

    SimplySilent In reply to ryu1151010 [2013-07-06 01:18:10 +0000 UTC]

    No problem! Hope this helps~

    👍: 0 ⏩: 0

    Valz138 In reply to ??? [2013-07-05 07:26:53 +0000 UTC]

    Thanks for this!!! I've looked for this kind of guide for a long time!!! Thanksthanksthanks!!!

    👍: 0 ⏩: 1

    SimplySilent In reply to Valz138 [2013-07-05 20:14:40 +0000 UTC]

    Haha, glad you like it!

    👍: 0 ⏩: 0

    Semantot In reply to ??? [2013-07-05 02:23:58 +0000 UTC]

    This is really helpful~ Thanks. I will do this once I got the right time and have a PA.
    Sgtlah brguna pakey org nok sesat ngn xtwk pa2 sal Css.

    👍: 0 ⏩: 1

    SimplySilent In reply to Semantot [2013-07-05 02:58:46 +0000 UTC]

    You're welcome!

    👍: 0 ⏩: 0

    arurue [2013-07-05 00:27:23 +0000 UTC]

    Wow, it's a really helpful article dear! Kudos for you!~

    I'm still need to learn about margins and padding! And I guess this is the right time to. :3

    Thank you for this~

    👍: 0 ⏩: 1

    SimplySilent In reply to arurue [2013-07-05 00:59:19 +0000 UTC]

    No problem!

    👍: 0 ⏩: 0

    C-A-Harland In reply to ??? [2013-07-04 23:15:31 +0000 UTC]

    This is really helpful, thanks
    Is there an easy way to move the heading text, e.g. so it is higher up?

    👍: 0 ⏩: 1

    SimplySilent In reply to C-A-Harland [2013-07-04 23:19:39 +0000 UTC]

    Higher than the default you mean? You could work with margin-top and make it negative ( margin-top:-10px; ). Don't make it too high though, because the heading will actually go off the gallery page

    👍: 0 ⏩: 1

    C-A-Harland In reply to SimplySilent [2013-07-04 23:30:06 +0000 UTC]

    I tried that, it just moves the banner, not the actual text. Oh well, thanks anyway

    👍: 0 ⏩: 1

    SimplySilent In reply to C-A-Harland [2013-07-05 01:11:03 +0000 UTC]

    Ahh, you mean move the text out of the banner? I didn't go into too much detail here since I didn't want to confuse anyone, but h2 is the actual text of the folder title. If you give it a colored background, then that will make the "banner". Behind h2, is a bigger container called .folderview-top{}.


    You can give .folderview-top{background: #color;} and then don't put a background on h2. Now try margin-top with h2 and you can freely move it around without the "banner" moving anywhere

    👍: 0 ⏩: 1

    C-A-Harland In reply to SimplySilent [2013-07-05 02:32:09 +0000 UTC]

    I see what you mean, thanks, I'll give it a go

    👍: 0 ⏩: 1


    <= Prev | | Next =>