HOME | DD

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

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

    👍: 0 ⏩: 0

    Peter-The-Knotter In reply to ??? [2013-07-04 21:22:13 +0000 UTC]

    beautifully put.... gonna send you a note tho'... chuckle.... P.

    👍: 0 ⏩: 1

    SimplySilent In reply to Peter-The-Knotter [2013-07-04 22:52:12 +0000 UTC]

    👍: 0 ⏩: 0

    Chivi-chivik In reply to ??? [2013-07-04 20:51:20 +0000 UTC]

    OH MY GOD you're my savior! I never understood the different customizable parts of Gallery CSS, but now thanks to this I do! It's a pity that it's easier to find good tutorials about Journal CSS than Gallery CSS...
    Thanks

    👍: 0 ⏩: 1

    SimplySilent In reply to Chivi-chivik [2013-07-04 22:53:57 +0000 UTC]

    Aw, you're so sweet! I'm glad this was helpful to you~


    Yeah, it is rather strange that there are so many journal skins and tutorials, but so few gallery ones. CSS is CSS, and they really aren't that different from each other.

    👍: 0 ⏩: 1

    Chivi-chivik In reply to SimplySilent [2013-07-04 22:55:33 +0000 UTC]

    No probs

    Yep, that's true

    👍: 0 ⏩: 1

    SimplySilent In reply to Chivi-chivik [2013-07-04 22:57:01 +0000 UTC]

    👍: 0 ⏩: 0

    PurpleInk777 In reply to ??? [2013-07-04 20:25:21 +0000 UTC]

    A rocking good tutorial on spicing up one's gallery/ies!

    Thanks for sharing!

    👍: 0 ⏩: 1

    SimplySilent In reply to PurpleInk777 [2013-07-04 20:36:31 +0000 UTC]

    Aw, thank you very much! And no problem~

    👍: 0 ⏩: 1

    PurpleInk777 In reply to SimplySilent [2013-07-05 04:34:18 +0000 UTC]

    You're very welcome.

    👍: 0 ⏩: 0

    Swiftalunar In reply to ??? [2013-07-04 20:23:07 +0000 UTC]

    Aaaaa
    I was hoping to look for a guide on gallery CSS sometime. This is very useful, it will definitely come in handy.

    👍: 0 ⏩: 1

    SimplySilent In reply to Swiftalunar [2013-07-04 20:36:41 +0000 UTC]

    Great! I certainly hope so~

    👍: 0 ⏩: 0

    Riemea In reply to ??? [2013-07-04 19:46:01 +0000 UTC]

    Awesome and very helpful!

    👍: 0 ⏩: 1

    SimplySilent In reply to Riemea [2013-07-04 19:51:53 +0000 UTC]

    Thanks!

    👍: 0 ⏩: 1

    Riemea In reply to SimplySilent [2013-07-04 20:17:17 +0000 UTC]

    You're welcome!

    👍: 0 ⏩: 1

    SimplySilent In reply to Riemea [2013-07-04 20:22:18 +0000 UTC]

    👍: 0 ⏩: 1

    Riemea In reply to SimplySilent [2013-07-04 20:31:41 +0000 UTC]

    (One more thing on my CSS-To-Do-List hehe)

    👍: 0 ⏩: 1

    SimplySilent In reply to Riemea [2013-07-04 20:36:45 +0000 UTC]

    👍: 0 ⏩: 0

    LabLayers In reply to ??? [2013-07-04 18:40:57 +0000 UTC]

    Awesome!
    So I made a really random and rambunctious gallery CSS with your tutorial: lablayers.deviantart.com/galle...

    👍: 0 ⏩: 2

    Semantot In reply to LabLayers [2013-07-05 02:29:35 +0000 UTC]

    LOVEEEE IT!

    👍: 0 ⏩: 1

    LabLayers In reply to Semantot [2013-07-05 02:56:50 +0000 UTC]

    Thanks!

    👍: 0 ⏩: 0

    SimplySilent In reply to LabLayers [2013-07-04 18:46:40 +0000 UTC]

    So many colors!    And the colors keep changing!

    That is one epic gallery skin

    👍: 0 ⏩: 1

    LabLayers In reply to SimplySilent [2013-07-04 18:58:54 +0000 UTC]

    Haha, thanks!
    I put up the source here if you want to take a look at it: gist.github.com/LabLayers/5929...

    👍: 0 ⏩: 1

    SimplySilent In reply to LabLayers [2013-07-04 19:24:22 +0000 UTC]

    👍: 0 ⏩: 0

    CouchyCreature In reply to ??? [2013-07-04 18:23:33 +0000 UTC]

    nice work, thanks.

    👍: 0 ⏩: 1

    SimplySilent In reply to CouchyCreature [2013-07-04 18:36:05 +0000 UTC]

    👍: 0 ⏩: 0

    JEricaM In reply to ??? [2013-07-04 17:56:13 +0000 UTC]

    Amazing Very useful thx!

    👍: 0 ⏩: 1

    SimplySilent In reply to JEricaM [2013-07-04 18:01:35 +0000 UTC]

    Thanks, and no problem! Hope you find it helpful

    👍: 0 ⏩: 0

    TOBproject In reply to ??? [2013-07-04 17:06:21 +0000 UTC]

    Very useful and easy to understand. Thank you! ^^ Coincidentally, some hours ago I was looking for a clear list of css classes for galleries. This will come in handy.

    👍: 0 ⏩: 1

    SimplySilent In reply to TOBproject [2013-07-04 17:12:52 +0000 UTC]

    No problem! And glad this is helpful for you!

    👍: 0 ⏩: 0

    Astrikos In reply to ??? [2013-07-04 16:57:19 +0000 UTC]

    Super useful!

    👍: 0 ⏩: 1

    SimplySilent In reply to Astrikos [2013-07-04 17:00:08 +0000 UTC]

    Thanks!

    👍: 0 ⏩: 1

    Astrikos In reply to SimplySilent [2013-07-30 00:50:36 +0000 UTC]

     

    👍: 0 ⏩: 0

    KovoWolf In reply to ??? [2013-07-04 16:56:13 +0000 UTC]

    Oooo thank you for this! Most helpful! I've been wanting to dabble in gallery CSS but never knew a good place to start. This is extremely helpful! Thank you!

    👍: 0 ⏩: 1

    SimplySilent In reply to KovoWolf [2013-07-04 16:59:56 +0000 UTC]

    Great! Once you learn what all the parts are called, then it's just like creating a journal skin.

    👍: 0 ⏩: 1

    KovoWolf In reply to SimplySilent [2013-07-04 17:08:04 +0000 UTC]

    Indeed ^_^ can't wait to experiment!

    👍: 0 ⏩: 1

    SimplySilent In reply to KovoWolf [2013-07-04 17:12:59 +0000 UTC]

    👍: 0 ⏩: 0

    GinkgoWerkstatt In reply to ??? [2013-07-04 16:40:43 +0000 UTC]

    👍: 0 ⏩: 1

    SimplySilent In reply to GinkgoWerkstatt [2013-07-04 16:42:19 +0000 UTC]

    👍: 0 ⏩: 0


    <= Prev |