Creating an HTML web wallpaper

This guide will show you how to set up a new web based wallpaper.

NEW DOCUMENTATION WEBSITE OUT

Please check out our new documentation website, the guides on Steam are old and deprecated!

https://docs.wallpaperengine.io

Preparing a new HTML wallpaper

Open the editor by right clicking the tray icon of Wallpaper Engine and choosing Create Wallpaper. Now choose New Web Wallpaper in the modal dialog of the editor.



Choose a name for your wallpaper and select the directory containing your web files. This directory needs to contain an index.html file at least and may include further JavaScript, HTML or image files required by your wallpaper.



Press OK to create your new wallpaper and get started. Your files will be imported now and the preview should start showing your wallpaper.

Configuring the wallpaper

Besides changing the default scheme color for your wallpaper, there is not much you have to configure. Click on Edit -> Change project settings to open the dialog where the scheme color can be adjusted.



Change the default scheme color by clicking on the color chooser button. This color will be applied to Windows along with your wallpaper if the user chose to enable color adjustments.

Publishing the wallpaper

With everything set up, open the prepare to publish menu:



Adjust the settings as you need. To apply tags, start typing in the tags window and the auto complete feature should show up to show you possible tags.

You are also required to create a preview image, click on Take Snapshot to record an image in the editor or import an image you created by hand by clicking Import Image.



To take an image in the editor, use the left mouse button to drag a square to define the image bounds and hit enter when you're satisfied to save the image.

When everything is done, hit Publish to Steam in the bottom right corner and wait for all data to be uploaded. You can continue editing your workshop item on Steam afterwards to add additional screenshots or videos.

Attachments

HTML/WebGL wallpaper used in tutorial: http://www.mediafire .com/download/j96c6ise6vrp1k3/threejs_birds.7z (REMOVE THE SPACE.)