Shop Mobile More Submit  Join Login
Pure + Night Gallery CSS by Gasara Pure + Night Gallery CSS by Gasara
09.10.2013 - Updated to remove dA's new default external link styles and fix the header height issue. The CSS has also been updated to work with all of deviantART's recent gallery changes including large thumbs, multiple display options, More Like This links and the rather huge submit button. Some of the changes meant that I couldn't make an exact copy of the original design but I've tried to keep it as close to the original as possible. I hope you like it.

If you are currently using the previous version of this skin I recommend updating it now.




I N F O
--------------------------------------------------

Works in IE, Chrome and Firefox
Works for user gallery and Favourites Gallery

Full installation instructions are included in the download.

F E A T U R E S
--------------------------------------------------
- Hidden comment count, print icons, feed icons, disabled page links, More Like This button, additional details (Favourites Gallery), submit button and pale border around transparent images.
- Styled literature and journal thumbs.

Sidebar Header -
< h3>...< /h3> (without spaces)

NOTE
- You must have content in your sidebar.
- Your sidebar must be displayed on the left.
- The sidebar will expand beyond the bottom of the skin if your sidebar content exceeds the length of the gallery content. To avoid this try to keep your sidebar content less than or level with the bottom of the gallery area.

T E R M S . O F . U S E
--------------------------------------------------

- This gallery CSS is free to use
- You can completely edit this CSS for personal use
- You may not redistribute this gallery CSS, edited or otherwise
- You may not sell this gallery CSS, edited or otherwise

J O U R N A L . C S S
--------------------------------------------------

:
Add a Comment:
 
:iconkelmeloo:
kelmeloo Featured By Owner Apr 7, 2015  Student Photographer
Is there a way/code for the blockquote title shown in the preview? I like it much much better than the regular font that is shown in my folders.
Reply
:iconheyabbyanne:
HeyAbbyAnne Featured By Owner Apr 16, 2015  Hobbyist
I am having the same issue. Just shows up as the default title font in the upper right corner.. I was hoping for that nice blockquote-ish title too. xD
Reply
:iconkelmeloo:
kelmeloo Featured By Owner Apr 16, 2015  Student Photographer
I still haven't figured it out, but I haven't really looked into the css/html either. I'm sure after a little bit of research I could figure it out maybe, unless that's something that isn't included in the css to begin with. In that case it would take a little longer to learn how to code it. But I agree, it's just so much better looking!
Reply
:iconheyabbyanne:
HeyAbbyAnne Featured By Owner Apr 16, 2015  Hobbyist
I fiddled around with the code a bit, and can't seem to find the issue. Looking through other people's galleries, I see the same exact font everywhere.. so maybe it's just a new change in dA's CSS? I dunno. I just hope there is a fix! :no:
Reply
:iconkelmeloo:
kelmeloo Featured By Owner Apr 16, 2015  Student Photographer
I sure hope so too!
Reply
:iconannaluci:
annaluci Featured By Owner Mar 9, 2015  Hobbyist Digital Artist
Thank you!!!

I used your CSS in my galleries as a template because I could't understand wher to begin with the code!!
Thanks a lot!
Reply
:iconemralie:
Emralie Featured By Owner Feb 16, 2015  New member Hobbyist General Artist
I can't download it D: Is there a chance you can note me the code? :c
Reply
:iconjustflamingo:
JustFlamingo Featured By Owner Jan 31, 2015  Hobbyist Traditional Artist
Using ^ ^
Oh and, how do I turn it to show 4 in line and not only 2?
Reply
:iconroomeg:
roomeg Featured By Owner Jan 7, 2015  Professional General Artist
Using on my Profile, Thanks a bunch!Love 
Reply
:iconsiburu:
Siburu Featured By Owner Jan 4, 2015
owo Would it be stupid to ask you how this works? I recently got my PM, been trying to work with CSS but it seems like some weird language to me. ;; 
Reply
:iconburqer-kinq:
burqer-kinq Featured By Owner Dec 27, 2014  Hobbyist Digital Artist
What do you copy and paste into the CSS editing area ??
Reply
:icondovahkiinstyles:
DovahkiinStyles Featured By Owner Jan 20, 2015
Little bit late but I thought I'd tell you just incase you never found out
you need to download the file,, the file has the code ;w;
Reply
:iconandorada:
Andorada Featured By Owner Nov 17, 2014
Hi, I used and modified this in several of my collections. Can you please tell me were should I put you credit?
Reply
:iconimrandall:
ImRandall Featured By Owner Nov 14, 2014  Student Photographer
This is so cool :)
Reply
:iconclivimati:
Clivimati Featured By Owner Oct 31, 2014  Hobbyist General Artist
Use .

French: Merci pour tout , grace , en grande  partie du moins, à toi j' ai un joli profil!! donc merci!
Reply
:iconselfmadecannibal:
selfmadecannibal Featured By Owner Oct 18, 2014  Hobbyist Digital Artist
dA's new layout makes the tags go off to the side in a weird way.
Example: Gallery Skin + Tags
Reply
:icongasara:
Gasara Featured By Owner Oct 19, 2014
I didn't even know you could have tags in gallery folders. I'll see what I can do.
Reply
:iconselfmadecannibal:
selfmadecannibal Featured By Owner Oct 19, 2014  Hobbyist Digital Artist
It came with the new update. 
Reply
:iconleafaye:
leafaye Featured By Owner Oct 12, 2014  Professional Digital Artist
I Used it!
Reply
:iconayamekurosami:
AyameKurosami Featured By Owner Oct 4, 2014
I got a question, I tried to use some gallery skins and on every person who got those gallery skins the whole folder is in that skin. on one tutorial there is an Icon what says "Show Profile Bar" I dont have that in my folder options, is there another way how I can use the skins ? (Sorry if my explanation sucks ^-^) 
Here is one Tutorial: How to Install a Gallery CSS (The whole gallery is in that skin)
Here is my Gallery folder: ayamekurosami.deviantart.com/g… (the skin is not on my folders on the left)

I'm sorry for bothering you ^-^'  

Reply
:iconethereal-foxx:
ethereal-foxx Featured By Owner Sep 7, 2014  Hobbyist Digital Artist
Amazing, I love the simplicity and clean look.
Thank you for providing it!
Reply
:iconsunflowerintherain:
SunflowerInTheRain Featured By Owner Aug 23, 2014  Student Traditional Artist
This is perfect for a manga folder... which is what I'm using it for.Bucktooth 
Reply
:icongasara:
Gasara Featured By Owner Aug 24, 2014
I have to say it does look good with your manga pages ♥
Reply
:iconsunflowerintherain:
SunflowerInTheRain Featured By Owner Sep 16, 2014  Student Traditional Artist
Thanks ^w^
Reply
:iconcactuskilos:
cactuskilos Featured By Owner Aug 21, 2014   Artist
using! and i credited you <3
Reply
:icongasara:
Gasara Featured By Owner Aug 24, 2014
:hug:
Reply
:iconalari-jejunen:
Alari-Jejunen Featured By Owner Jun 12, 2014
How do you install it? *~*
Reply
:iconlil-miss-scribble:
Lil-Miss-Scribble Featured By Owner May 15, 2014  Hobbyist Traditional Artist
How do I use it?
Reply
:iconcantatus-promise:
Cantatus-Promise Featured By Owner May 12, 2014  Hobbyist Digital Artist
Using!
I actually found a way to remove the sidebar, I hope you don't mind :)
Thank you so much, this is fantastic.
Reply
:iconbansini:
Bansini Featured By Owner May 24, 2014  Hobbyist General Artist
Would you mind sharing how you achieved that? :heart:
Reply
:iconcantatus-promise:
Cantatus-Promise Featured By Owner May 24, 2014  Hobbyist Digital Artist
Sure! I just removed some of the code and changed little parts of it until it worked.

body{
margin-left:10px;
font-family: verdana;
color:#888888;
border: 1px solid #4F4F4F;
background-color:#ffffff;
padding-bottom: 20px;
}

.folderview-top{
margin-left: -15px;
background-color:#4F4F4F;       
color:#888888;
font-size: 9px;
text-align: right;
padding: 50px 50px 50px 50px;   
height: 100px;            
}

.folderview-top h2 {
position: relative;
top: 50px;
font-family: trebuchet ms;
text-transform: lowercase;
color:#eeeeee;
letter-spacing: 4px;
font-size:11px;
text-align: right;
padding: 0px 5px 2px 0px;
border-right: 5px solid #666666;
}


.folderview-top .description h3 {
display: block;
padding: 3px 3px 3px 19px;
font-family: trebuchet ms;
text-transform: lowercase;
letter-spacing: 3px;
color: #ffffff; 
background-color: #4F4F4F;
text-decoration: none;
font-size: 11px;
text-align: center;
}

.folderview-top .description a:hover {
color:#ffffff;
background-color: #B272A6;
text-decoration: none;
}

strong {
color: #ffffff;
background-color: #B272A6;
padding: 0px 2px 0px 2px;
}

a {
color:#ffffff;
text-decoration:none
}

a:hover {
color:#B272A6;
text-decoration:none;
}

a.external:after {
display:none!important;
}

b {
color:#B272A6;
}

i {
background-color: #eeeeee;
}


.tt-a {
margin: 15px;
}

.tt-w {
background:#f7f7f7;
padding:12px 16px 12px 16px;
text-align: center; 
}

.tt-w:hover {
background-color:#c5c5c5;
text-decoration: none;
}

.tt-bb {
background: transparent;
text-align: center;
}

.t {
font-family: verdana;
font-size: 10px;
display: block;
color: #ffffff;
background-color: #aaaaaa;
font-weight: normal;
padding: 5px;
text-align: center;
margin-top: 10px;
margin-left: -6px;
margin-right: -6px;
text-decoration: none;
}

.t:hover {
color: #ffffff;
background: #B272A6;
}

.tt-fh-oe {
color: #ffffff;
}

.tt-fh-oe:hover {
color: #ffffff;
background: #B272A6;
}

.lit strong {
font-family: trebuchet ms;
color: #1e1e1e; 
letter-spacing: 1px;
background-color: transparent;
font-size:12px;
padding: 5px 0px 5px 0px;

.details {
text-align: center;
}

.u {
color:#aaaaaa;
text-decoration: none;
}

.u:hover {
color:#B272A6;
text-decoration: none;
}

.pagination-wrapper {
padding-top: 20px;
text-align:right;
}

.pagination ul.pages li.prev a, .pagination ul.pages li.next a, .pagination ul.pages li.number a, .pagination ul.pages li.dotdotdot a {
color:#aaaaaa;
text-shadow:none;
box-shadow:none;
background:#f7f7f7;
border: 1px solid #f7f7f7;
}

.pagination ul.pages li.next a:hover, .pagination ul.pages li.number a:hover, .pagination ul.pages li.dotdotdot a:hover {
color:#ffffff;
text-shadow:none;
box-shadow:none;
background:#B272A6;
}

.pagination ul.pages li.current a {
color:#ffffff;
text-shadow:none;
box-shadow:none;
background:#aaaaaa;
}

.pagination ul.pages li.current a:hover {
color: #ffffff;
background-color:#aaaaaa;
}

.center {
text-align: center;
}

span.lit.lit-bkmrk {
display: none!important;
}

q {
font-size: 10px!important;
}

a.thumb.lit strong {
font-size: 12px!important;
}
 
a.thumb.lit .wrap {
background: #ffffff!important;
margin-left: 0px;
}

.shadow {
background-image:none!important;
}

small, .icon, .frontbutton, .feedbutton, .disabled, .tt-bb, .frame-button.submit {
display: none;
}
Reply
:iconroomeg:
roomeg Featured By Owner Jan 7, 2015  Professional General Artist
Used your modified code for the sidebar removal! Thanks !:happybounce: 
Reply
:iconcantatus-promise:
Cantatus-Promise Featured By Owner Jan 7, 2015  Hobbyist Digital Artist
No problem !! c;
Reply
:iconxaveysaur:
xaveysaur Featured By Owner Apr 30, 2014  Student General Artist
how do i get the thumnails to be square like in the image?
mine are all different sizes and i want to make them look neat and organized
thank you!
Reply
:iconstarlitstables:
StarlitStables Featured By Owner Apr 8, 2014  Hobbyist General Artist
used! thank you <3
Reply
:iconshadowfairycc:
ShadowFairyCC Featured By Owner Apr 7, 2014
Lovely!I use them!
Reply
:iconplatinasi:
PlatinaSi Featured By Owner Apr 4, 2014  Hobbyist Digital Artist
Thank you so much for this lovely CSS! :heart: One thing I'd like to ask though, what exactly are the 'styled literature and journal thumbs'? I noticed that my literature thumb here is just a plain white box when I use the CSS, and I'm just wondering why it doesn't show its text like the default thumb- is the whiteness perhaps the 'stylization' for the aesthetic minimalist look to the gallery? o v o
Reply
:icony-n-1-f:
Y-N-1-F Featured By Owner Mar 15, 2014
Awesome---using it!

Thank you, Laura!

Youre-awesome by Your-Numbr1-Fan  
Reply
:iconjkl-designs:
JKL-Designs Featured By Owner Mar 9, 2014  Student Artisan Crafter
This is looking awesome! Thanks for taking the time to code it! :D 
Using in my gallery :dummy:
Reply
:icon2perfect:
2perfect Featured By Owner Mar 2, 2014  Hobbyist Digital Artist
Love it and using!
Could you possibly make a custom box background out of this?
Reply
:iconbigsisnat533:
Bigsisnat533 Featured By Owner Feb 22, 2014  Hobbyist General Artist
Thanks for making this! I'm going to use it in my gallery
Reply
:iconmimikascraftroom:
mimikascraftroom Featured By Owner Feb 19, 2014   Digital Artist
Thank you!:hug:
Reply
:iconkaiwukki:
Kaiwukki Featured By Owner Feb 17, 2014
thank you! *^*
Reply
:iconcoroners:
coroners Featured By Owner Feb 15, 2014
I used your nice gallery css as base/reference for my own gallery css. Take a look if you want to in my gallery and give me a heads up if you would like the code I would be happy to share it with you as thanks. PEACE!
Reply
:iconzahrahleona:
ZahrahLeona Featured By Owner Jan 24, 2014  Hobbyist Photographer
Thank you!! :heart:
Reply
:icongasara:
Gasara Featured By Owner Feb 5, 2014
You're welcome!
Reply
:iconnami-star:
Nami-Star Featured By Owner Jan 15, 2014   Digital Artist
Yay! I will use this!
Reply
:icongasara:
Gasara Featured By Owner Feb 5, 2014
:iconcocoloveplz:
Reply
:iconnami-star:
Nami-Star Featured By Owner Feb 5, 2014   Digital Artist
:iconplzhug:
Reply
:iconwhitespringpro:
WhiteSpringPro Featured By Owner Jan 10, 2014
Nice Work!! ^^ :iconfacebooklikeplz:
Reply
Add a Comment:
 
×
Download ZIP download, 394 KB




Details

Submitted on
July 18, 2012
File Size
394 KB
Submitted with
Sta.sh
Link
Thumb
Embed

Stats

Views
14,891 (21 today)
Favourites
1,133 (who?)
Comments
184
Downloads
4,034 (12 today)
×