Creating a User Style For The New DeviantArt

2 min read

Deviation Actions

danlev's avatar
By
67 Comments
4K Views

The cool thing about DeviantArt's new design is that it's super easy to make user style skins for. Our code uses CSS variables, so you can pretty much skin the entire site in just a few dozen lines of CSS. (If you're not familiar with CSS variables -- it's super simple.) It'll take some tweaking to make it look perfect on all pages, but it's super simple to make a skin that works across most of the site.


You can use a browser extension like Stylish.


For example, this code will replace the background color and top nav across the whole site on the DARK theme:

:root {

--D1:#202035;

}


Background color and top nav on the LIGHT theme:

:root {

--L1:#d0cde4;

}


The other cool thing is that there are variables for the light, dark, and green theme. So you could create a skin that has three variants, that will automatically switch when you use DeviantArt's theme toggle.


I just threw together a purple skin in <20 lines of CSS and 90% of the site is customized. It took less than half an hour. I admit it though -- my purple theme is ugly. 😂 But it's pretty cool how easy it was.

Screen Shot 2020-05-28 at 9.43.42 PM
Screen Shot 2020-05-28 at 9.45.11 PM
Screen Shot 2020-05-28 at 9.48.14 PM

If anyone creates any skins, please share them!

Published:
© 2020 - 2021 danlev
Comments67
Join the community to add your comment. Already a deviant? Log In
AlenaBF's avatar

Hi, if I get it correctly, this only affects the page when viewing it in a browser, right ?

danlev's avatar
AlenaBF's avatar

thank you, tbh I was hoping the usage of CSS could be helpful in some way to tweak my profile page

TheadoraWolf's avatar

Has somebody made a Mid-Gray style? Not White. Not Black. Just Grays?


If so, please tell me what it's called so I can find it and use it. Thank you! [Cat Emote] Closed Eye Smile

tsadeviant's avatar

If you have an extension on your browser to inspect the code (web developer/firebug/etc) you can find the :root section in the css file. It's toward the bottom for me.

Here's some of the variables (NOT all) with comments above showing what they are.


:root{

/*Dark theme below*/

--D1:#202035;

/*Light theme below*/

--L1:#d0cde4;

/*Green theme below*/

--L5:#03770a;

/*Deviantart Logo color*/

--C14:#00e59b;

/*text box background*/

--D3:#22272b;

/*textbox border,comment hover*/

--D4:#ff0000;

/*published date/copyright*/

--D5:#ffb002;

/*"Add a new comment"*/

--D6:#e4f500;

/*Toolbar links,comment text*/

--D7:#10db05;

/*title,action bar,"load previous comments",bell,newest*/

--D8:#0d00ff;

/*unknown*/

--D9:#ea04fb;

/*"comments",commenters username,notes icon*/

--D10:#a063ee;

}

tsadeviant's avatar

L1 is not light theme, but it does change the comment background on the light theme. L5 is not a green theme either. try my theme above. It's themed to show exactly what everything is.

snazzie-designz's avatar

How interesting! I really like your skin and I love what you've done with it.


I wish this feature was within DeviantArt rather than an external thing because the difficulty with it is that (as far as I understand) it only works for you and not for anyone visiting your page. That's the key thing. There's not really much point in customising your page if only you can see it.


One of the big difficulties I have with Eclipse is that unlike the original deviantArt where you could change the look of the page and <b>it would be the same for everybody who views it</b>, with Eclipse optimising images for dark theme they look crap on a light theme and each visitor to your page will have a different theme. so you can't optimise your images properly.

fireanubis's avatar

can you make it look and function like the old site?

I'd like to use a functioning site again

Dediggefedde's avatar

I think this is a neat feature.

Is there a list somewhere which variables are available and where they are used? I found the definitions in app.min.css, but no information, where for example --C14, --L17 or --D3_SISU are used. ^^


Eclipse is coded nicely in most parts in my opinion. Most complaints are due to problematic GUI or removed features. The only part that got worse regarding the code is class names. Since eclipse uses a template with automatically generated class names, scripts and styles relying on those break from time to time. Also, they are pretty unintuitive to use (e.g. div class="_3Lbo4 _3EbZ8").

Only once before have I seen a site self-immolate in the name of progress.


The year was 2008. The recession was upon us, Obama was campaigning, Youtube was new, the iphone was just around the corner. Hopes were high and Myspace was king of the internet.


And then Facebook arrived.


Myspace execs saw the writing on the wall and rushed to spruce up their aging website. Fundamental formats were changed. Features were removed, and bloatware was added. They threw their entire site into the fire in hopes of a phoenix moment.


A moment which never came.


Deviantart has the honor of being three years older than Myspace, and has somehow survived into the age of Instagram and Pinterest.


I sometimes wonder if those Myspace executives who oversaw the destruction of their site fled here, found sanctuary among the deviant artists, because with Eclipse, Deviantart is attempting the very same phoenix in the fire pivot as Myspace did all those years ago.


Good luck gentlemen. You seem anchored to the dumpster fire that is Eclipse, hell-bent on tearing your own website to the ground in a half-baked attempt to blend in with the bland social media landscape.


I expect to hear soon of your acquisition by Facebook.

Icaros-must-die's avatar

I had styled my old deviantArt..... Rage


now i have to start by zero.... wtf.

Shinerai's avatar

This is definitely something that would be cool to experiment with in the future, thanks for promoting it Dan c:


Do you know if there are plans to let users skin journals some time in the future?

KhaleesiKiyiyaWolf's avatar

For those complaining; I can also clear some confusion up on the 'third party' download.


This app has been used by many people to customize even Facebook (which by the way your classic version will be going buh bye come 2021 so you best download Google Chrome Beta! And no, you don't get a say in this esp. if you use the site to live stream anything).


That said @danlev isn't asking you to fix the Eclipse site. He's showing you a neat feature that's been made possible for the Eclipse website by users who've been using third party applications for years but only now, have these features become more easily available on DeviantArt minus any coding security risks which is what CSS on the old site, had.


I truly do wish, people would learn to read a journal before jumping the gun on someone whose simply showing us a fun new feature.

Lachtaube's avatar

This is cool and will be incredibly helpful, especially if we can control padding and margins.

But I thought that one of the arguments for removing customization/journal skins was because "not everyone knows CSS"? Uh? Oh well.

danlev's avatar

This is a third party extension that people have been using for years -- not related to profile customization / journal skins or anything native on DeviantArt.

Lachtaube's avatar

Yeah I'm familiar with how it works, I didn't realize it could change stuff to this extent. I'm just more surprised that you're promoting it.

Branka-Artz's avatar

I used an extension "Stylus" on the Old Site and had a darker background

long before we had it in Eclipse :D

What I actually wanted to say is that "Stylish" is only for Chrome users. I wanted to download it now and it says you need Google Chrome :(

Branka-Artz's avatar

Oh thank you so much :glomp:

danlev's avatar

Oh yeah, there's plenty of extensions like that for any browser. :)

acebutterflygirl's avatar

Someone say purple!? If you can come up with a purple theme, I would be a extremely happy person! :happybounce: (or even say how to get one would be okay, too :D )

Update: No clue how to do this. I can't code. Can you make a journal explaining how this extension works, please?

MelMuff's avatar

Purple is my fav colour. I would luv this purple skin.

Kittyi3's avatar

i got a question how do you access notes if now you have chat??

danlev's avatar

There's a "Notes" button at the bottom of the Chat dropdown. :)

Join the community to add your comment. Already a deviant? Log In