HOME | DD

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

    xFurriwolf [2019-07-15 12:49:33 +0000 UTC]

    tysm! it worked, but I sadly can't figure out the patterns so I'll just do plain color :3

    👍: 0 ⏩: 0

    Kitty1Cat2 [2018-10-13 23:10:41 +0000 UTC]

    This was very helpful and easy to understand.

    👍: 0 ⏩: 0

    AliyahHollins [2018-09-29 01:06:30 +0000 UTC]

    Hey, how do you export it to Lioden though?

    👍: 0 ⏩: 0

    LiPino [2018-04-25 09:15:08 +0000 UTC]

    Some links are dead

    👍: 0 ⏩: 0

    Darkwolfhellhound [2018-03-22 21:29:53 +0000 UTC]

    I'm so confused

    👍: 0 ⏩: 0

    Crescenti-C [2017-06-10 21:43:14 +0000 UTC]

    How do you add css to the featured folder? Like when you click on gallery of someone's page the skin will come up?

    👍: 0 ⏩: 0

    Chinny-FlareySnowzz [2017-04-24 07:29:39 +0000 UTC]

    aaaa how??

    👍: 0 ⏩: 0

    PuniCross [2017-04-19 23:03:14 +0000 UTC]

    I tried adding a background but it didn't work

    👍: 0 ⏩: 0

    Dj-Edi [2017-03-11 19:20:20 +0000 UTC]

    I have seen before some people add borders to their pictures. How can I do this too?

    👍: 0 ⏩: 0

    partybugcreations [2017-02-25 14:26:34 +0000 UTC]

    i'm so confused.. :c .. what is a css anyway?

    👍: 0 ⏩: 1

    PuniCross In reply to partybugcreations [2017-04-19 22:59:32 +0000 UTC]

    Cascading style sheet. In a nutshell it's the code that makes a website look how it looks.

    👍: 0 ⏩: 1

    partybugcreations In reply to PuniCross [2017-04-20 22:01:08 +0000 UTC]

    kay thank you for explaining it <3

    👍: 0 ⏩: 0

    TantrissTheWitch [2016-09-13 13:08:32 +0000 UTC]

    I'm having trouble with the gallery elements (thumbs, title, comments, etc). It seems to be very limited in what it will allow me to change. I can't change text color or font.
    I would like to use a dark background in my gallery so I would appreciate some help.

    👍: 0 ⏩: 0

    the-gayest-chuna [2016-08-13 01:30:22 +0000 UTC]

    Whenever I click on the CSS button it says Adding CSS... but it never lets the name or text slots show up for me.

    👍: 0 ⏩: 2

    EtherialIce In reply to the-gayest-chuna [2016-11-29 02:09:56 +0000 UTC]

    I think it's a feature only for people with the core subscription.

    👍: 0 ⏩: 0

    Warrior-Ponies69 In reply to the-gayest-chuna [2016-09-05 04:15:26 +0000 UTC]

    Click adding ccs then a box will pop up. Click yes.

    👍: 0 ⏩: 1

    the-gayest-chuna In reply to Warrior-Ponies69 [2016-09-05 05:51:38 +0000 UTC]

    Before I had attempted that and nothing popped up.

    👍: 0 ⏩: 1

    Warrior-Ponies69 In reply to the-gayest-chuna [2016-09-05 14:54:29 +0000 UTC]

    Idk then. works for me

    👍: 0 ⏩: 0

    Tsukiiyo [2016-08-07 08:53:23 +0000 UTC]

    Thank you for sharing !
    Thanks to it, I can easily custom my gallery.

    This is no more h2 but h1, by the way !

    👍: 0 ⏩: 1

    FEislandqueen In reply to Tsukiiyo [2017-08-01 02:29:26 +0000 UTC]

    thanks, no wonder nothing was happening to my heading.

    👍: 0 ⏩: 0

    BigClaudia [2016-07-18 11:58:09 +0000 UTC]

    can not I set it

    👍: 0 ⏩: 0

    RainyDogCo [2016-07-16 18:43:52 +0000 UTC]

    I cant find that button on my gallery?..

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-07 08:53:55 +0000 UTC]

    You need to have the premium membership !

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-08 23:47:16 +0000 UTC]

    I have premium ;u;

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-09 06:52:12 +0000 UTC]

    You can custom only folders in the gallery. After creating a folder, on the top and right, you can find a button "Folder Option". Clic on it and go to the CSS tab

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-09 13:31:23 +0000 UTC]

    I cant find a button as the one you describe.m

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-10 12:32:00 +0000 UTC]

    Do you use Adblock or something loke that ?

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-10 13:23:56 +0000 UTC]

    Not that I know of

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-11 07:10:46 +0000 UTC]

    Can I  have a screenshot of your gallery ?

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-12 01:15:55 +0000 UTC]

    prntscr.com/c4ng8f

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-12 06:54:43 +0000 UTC]

    Do you use any skin on deviantart ? Looks strange...
    Here, you can see my button : orig00.deviantart.net/31a8/f/2…
    (You have to go to one of your folders in your gallery. Because you cannot custom the homepage gallery)

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-12 13:06:47 +0000 UTC]

    I use Stylish? Maybe thats it?

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-12 13:59:45 +0000 UTC]

    Maybe, I guess... Try, to see ?

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-12 14:54:01 +0000 UTC]

    Nope, Oh well, I don't seriously need to customize my gallery. It's.. Well its a gallery but I people don't view my stuff so WvW *forever alone* But thanks for the help QAQ 

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-15 07:51:49 +0000 UTC]

    Have you tried with another browser?

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-15 12:53:27 +0000 UTC]

    Yeh. Still nothing.

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-15 13:36:37 +0000 UTC]

    Do you re in the galery folder ? You need to create some folders (OCS, fanarts, old stuff, etc) to do it. The main one is not custimisable... :/

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-15 16:57:35 +0000 UTC]

    I have done that before

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-16 13:00:20 +0000 UTC]

    Yes, but you need to go to one of your folders to have the button. In your screen you are on the featured one, clic on "My OCs", for instance. You will find the famous button !

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-16 14:04:21 +0000 UTC]

    *Desk plants* 

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-16 20:26:50 +0000 UTC]

    Is it okay now ?

    👍: 0 ⏩: 1

    RainyDogCo In reply to Tsukiiyo [2016-08-17 12:36:31 +0000 UTC]

    *Sobbing at my stupidity with a thumbs up*

    👍: 0 ⏩: 1

    Tsukiiyo In reply to RainyDogCo [2016-08-17 19:16:51 +0000 UTC]

    Hahaha, no problem !
    Tell me when you will have done with your custom CSS !

    👍: 0 ⏩: 0

    elytabby [2016-06-23 23:24:39 +0000 UTC]

    how do people do that thing where it just shows one picture and it says something like,, "click all for more" or whatever?

    👍: 0 ⏩: 0

    dawnchi [2016-04-08 05:38:12 +0000 UTC]

    I'm trying to use an image as my BG and it worked on the w3schools tryit editor, but when I use the code myself it says it's missing text..

    👍: 0 ⏩: 1

    Mad--Machine In reply to dawnchi [2016-07-16 13:09:14 +0000 UTC]

    Try this;
    background-image: url('URL');
    //Of course, replacing the URL with the url of your image uwu
    It worked for me (:

    👍: 0 ⏩: 0

    Dovegelic [2016-04-07 14:49:50 +0000 UTC]

    i cant add the image background

    👍: 0 ⏩: 1

    Mad--Machine In reply to Dovegelic [2016-07-16 13:07:16 +0000 UTC]

    Try this;
    background-image: url('URL');
    //if course, replacing the URL with the url of your image uwu
    It worked for me (:

    👍: 0 ⏩: 1

    Dovegelic In reply to Mad--Machine [2016-08-16 23:32:04 +0000 UTC]

    thanks so much love that icon!

    👍: 0 ⏩: 0

    Harendita [2016-03-24 19:26:32 +0000 UTC]

    If I have a dark gallery background how can I change the color of the deviations titles??

    👍: 0 ⏩: 1


    | Next =>