Creating a User Style For The New DeviantArt
|2 min read
danlev's avatar
By danlev   |   
73 59 1K (5 Today)
Published:

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!

Comments59
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
Dediggefedde's avatar
DediggefeddeHobbyist

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").

Blingdenstone's avatar

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
ShineraiHobbyist Digital Artist

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
KhaleesiKiyiyaWolfHobbyist General Artist

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.

BrankaArts's avatar
BrankaArtsHobbyist Digital Artist

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 :(

West-Ninja's avatar
West-NinjaHobbyist Digital Artist

Stylish is also available for Firefox!

https://addons.mozilla.org/en-CA/firefox/addon/stylish/

BrankaArts's avatar
BrankaArtsHobbyist Digital Artist

Oh thank you so much :glomp:

danlev's avatar

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

whovianmiss's avatar
whovianmiss Digital Artist

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
MelMuffHobbyist General Artist

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

Kittyi3's avatar
Kittyi3New Deviant

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. :)

Isi-Daddy's avatar
Isi-DaddyHobbyist Digital Artist

I already did one about 2 weeks ago, but I didn't only changed the colours but made the thumbs smaller (about the size on the old dA), because on big screen it causes headaches when you work on dA for a long time. ^^;

Here is the style: https://userstyles.org/styles/182758/

and some explanations what it can do:

HaruTotetsu's avatar

How exactly is this a feature of DA that you should be proud of, when you have to download a 3rd party app to do so?

RensKnight's avatar
RensKnightHobbyist Writer

I think because over 20 years it became a security risk/code stability problem for dA to allow it server-side. With that restriction in mind I think it was pretty smart to code with the intent of making client-side adjustments easy with said third-party tools.

danlev's avatar

I didn't say it was a DA feature. They're extensions that you can use to customize any site to your liking. People have been using them on DA for ages. :)

red2blaze's avatar
red2blazeHobbyist Digital Artist

O that is cool to know thanks

DarkAluminum's avatar
DarkAluminumHobbyist General Artist

This is actually kinda cool. I never thought this was possible, given the three default themes provided for Eclipse.

ZackBehney's avatar
ZackBehneyNew Deviant

This is pretty neat, actually. Thanks for sharing.

uhhlias's avatar

we shouldn't have to download a third-party extension to fix your website.

anonymous's avatar
Join the community to add your comment. Already a deviant? Log In