This short guide will show you how to set a web page as your Desktop background using a fantastic little open-source app for macOS.
Using the app Plash you’ll be able to customize your desktop background like never before. There are quite a few features that make this app capable of a lot more than just displaying some static HTML on your desktop. You can add custom CSS and JavaScript to the website, interact with it, automatically reload the site at a specified interval, and much more.
Something to note right up front – the latest version of Plash requires macOS 11.3 (Big Sur) or later. There is an older version that works with 10.15, though not all features are supported. To install the older version just download and open the .zip file, drag-and-drop it to your Applications folder and then open it from there (and skip the first two steps in this guide).
Otherwise, start at step #1 below and we’ll go through a bunch of examples of ways to use Plash.
- Start by visiting Plash on the App Store, which will launch the App Store app. Click the GET button to start the installation process.
- Once it’s done, click the OPEN button.
- A ‘Welcome’ screen will appear. Give it a read and then click the Continue button.
- Let’s jump right in and start using Plash. Click its icon from your menu bar (the new one that looks like a “splashing droplet”) and select Add Website… from the list of options.
- For the sake of trying out the app, we’ll add one of the “really cool but not necessarily useful” sites to use as a desktop background first – WindowSwap. Enter the address: https://www.window-swap.com/Window in the provided space, and give it a name (doesn’t really matter what, something descriptive is helpful). Then click the Add button.
- Ta-da! Your desktop background will turn into a random video looking out of someones window.
- You may have noticed a small Websites panel appeared once you added the first site to Plash. Ignore it for the time being – we’ll get to it in a minute or two.
- Once again click the Plash icon in your menu bar and select Add Website… from the list of options.
- This time enter the address: https://bing-photo-of-the-day.netlify.app and hit the tab key on your keyboard. After a moment or two, the name should auto-populate to something like “Bing Photo of the Day for Plash” – once it does, click the Add button.
- This time your desktop background becomes the full-screen Bing Photo of the Day!
- Now that you’ve added two sites to Plash, you can switch between them using the menu bar icon. Click it and select Switch and you’ll see both of the sites we just added.
- Plash has some pretty advanced features that you can use to take the “web page as a desktop” thing to the next level. Once again click the Plash menu bar icon, select Add Website… and enter: https://calendar.google.com then click the Add button.
- Your desktop will switch to the Google Calendar sign-in page, which can be quickly fixed.
- Fortunately you can interact with the web page you’ve set as the desktop. Click the Plash icon from the menu bar and select Browsing Mode
- Plash will display a message that explains Browsing Mode – after you’ve read it click OK to close the window.
- Click inside of the Email or phone field and sign into Google Calendar the same way you would as if you were using a normal web browser.
- There it is! Your Google Calendar will now be displayed as your desktop background.
- You’ve probably noticed it doesn’t look… awesome. Here’s where some of the advanced Plash magic comes into play. Using a bit of code provided by the author of Plash, you can make the calendar look amazing by blending into the background with your normal desktop wallpaper (see screenshot below).
- Remember that Websites window we looked at briefly way back at step #7? Bring it up by selecting the Plash icon in your menu bar and then Websites… from the list of options. Hold down the control key and then click the Google Calendar entry. Select Edit…
- From here you can add custom CSS or JavaScript to the web page being displayed on your desktop. Start by placing a check in the box labeled Use print styles (Note: this option requires macOS 11). Next up, copy and paste the following text into the CSS: field then click the Done button.
- Ta-da! Your Google Calendar now looks much cooler.
- If you still have Browsing Mode enabled you can interact with your calendar the same as if it were being displayed in a web browser.
- Of course that can get really annoying too, so just select the Plash icon and then Browsing Mode again.
- You may also want to review the various settings and options – to do so, click the Plash icon and select Preferences…
- Review each of the tabs and make any changes you see fit.
- For more Plash site suggestions, custom CSS and other tips be sure to check out the user submitted content by visiting the Plash use-cases page.
* {
background-color: transparent !important;
color: white !important;
}.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
display: none !important;
}[role="grid"] * {
border-color: rgba(255, 255, 255, 0.3) !important;
}.tNDBE:not(.Wyo4Qe),
.SGWAac,
.QIadxc:last-child {
border: none !important;
}[data-chips-dialog] {
background-color: rgba(0 0 0 / 80%) !important;
}
