The editing of the UI happens through Cascade Stylesheet files. Knowledge in the syntax of CSS[www.w3schools.com] and JSON is benifitial.
In addition please look into downloading a good editor, such as visual studio code, which is able to format your document and intellisense.
In addition you need the Kon4mi code achievement which unlocks extra skins.

Editing the stylesheet might make the UI become weird looking in some parts, or even inaccessible if you dont know what to do. Do not attempt to edit them directly! I am not responsible for any changes you make to your files.

The files we create are NOT saved to the cloud and may disappear if not stored safely elsewhere! These may break at any point, be it through updates or steam redownloading files. Create backups when you are satisfied with your work!

Now with that all out of the way, lets go tell wallpaper engine to include our custom CSS file into its skins!

PRO TIP: Put your status to invisible and put a shortcut somewhere on your desktop or task bar. So you dont accidentally annoy your friends restarting the application more often than usual.

Open the explorer and navigate to your wallpaper engine directory, the path should look something like this:
C:\Steam\steamapps\common\wallpaper_engine\ui\dist\styles

Here you find a bunch of CSS files, which are the skins in the app.
We will duplicate one of the files. Look at the skins in app and look which one would be the most convenient to edit! I like the space color scheme so I will go with that one.

Copy paste the skin into the same directory. To match it with the other files we will rename it to "skincustom".

Next head to "C:\Steam\steamapps\common\wallpaper_engine\ui"
There you will find a skins.JSON file. Open it in any editor, preferably something such as visual studio code (which i will be using).

This file tells Wallpaper engine where the skins are, what they are named, and some color schemes you can already adjust!

You want to scroll to the bottom, you'll see the different sections all being similar. So just copy paste the last section (dont forget the brackets! if your editor sees problems it is most likely due to faulty brackets!).
Adjust the label and the key to being custom. For me i inserted
You can adjust the window's shadow with the colors here!

Now save the file, completely close and restart wallpaper engine! If everything is in order, the editor will display a new skin inside the skin menu!

We now have a seperate skin set up to edit seperate from the others, we can start messing with the files.

Go back to the customskins.css file we just created, pop it inside your editor and format the file! its very hard to read without proper css formatting.

Starting with something simple, we want a custom background image. This one is usually placed in the body{} property.


the url is the path to the space image, change it to the file you want! animated GIFS work as well!
After saving the file, you can close any wallpaper engine windows (no need to exit) and open them again. You then will see the changes made to the UI.














If you made it all the way here, congrats! your UI is now customized!
Now its up to you to find elements which you want to customize. Good luck.