Skip to content
View in the app

A better way to browse. Learn more.

MSFN

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[WPI Theme] Multiple Wallpaper

Featured Replies

Hi all,

I created the following code in my wpi.html file. Could someone re-write it better? :whistle:

Not all screen resolutions are included. And a 'backup' wallpaper would be nice too...

Main reason for this. Wallpapers get out of proportion and if upscaled you have often granular fonts, ugly to read..

Thanks in advance

HJW

<img id='bgpic' src='' width="100%" height="100%">
</div>
<script type="text/javascript">
if ((screen.width==1920) && (screen.height==1200))
document.all.bgpic.src = "./Themes/vista/wallpaper1920ws.jpg";
</script>
<script type="text/javascript">
if ((screen.width==1600) && (screen.height==1200))
document.all.bgpic.src = "./Themes/vista/wallpaper1600.jpg";
</script>
<script type="text/javascript">
if ((screen.width==1600) && (screen.height==1050))
document.all.bgpic.src = "./Themes/vista/wallpaper1600ws.jpg";
</script>
<script type="text/javascript">
if ((screen.width==1280) && (screen.height==1024))
document.all.bgpic.src = "./Themes/vista/wallpaper1280.jpg";
</script>
<script type="text/javascript">
if ((screen.width==1024) && (screen.height==768))
document.all.bgpic.src = "./Themes/vista/wallpaper.jpg";
</script>

I created the following code in my wpi.html file. Could someone re-write it better? :whistle:

Not all screen resolutions are included. And a 'backup' wallpaper would be nice too...

You need to have a default or as you say 'backup' wallpaper so that the user doesn't have a blank screen if they do not have one of your defined resolutions. Additionally, you can move all of this into one script tag. Here's what I've come up with:

<img id='bgpic' src='./Themes/vista/defaultwallpaper.jpg' width="100%" height="100%">
</div>
<script type="text/javascript">
switch(screen.width) {
case 1920:
if(screen.height==1200) {
document.all.bgpic.src = "./Themes/vista/wallpaper1920ws.jpg";
}
break;
case 1600:
if(screen.height==1200)) {
document.all.bgpic.src = "./Themes/vista/wallpaper1600.jpg";
} else if(screen.height==1050) {
document.all.bgpic.src = "./Themes/vista/wallpaper1600ws.jpg";
}
break;
case 1280:
if(screen.height==1024) {
document.all.bgpic.src = "./Themes/vista/wallpaper1280.jpg";
}
break;
case 1024:
if(screen.height==768) {
document.all.bgpic.src = "./Themes/vista/wallpaper.jpg";
}
break;
}
</script>

Whats up Kel!?

I'm doing fine. Just trying to catch up on WPI as I've been too busy to keep up with it lately. Looks like you've got everything under control though.

  • Author

Zorphnog thanks for your piece of code :)

This will make my WPItheme look good at any screen.

HJW

Create an account or sign in to comment

Recently Browsing 0

  • No registered users viewing this page.

Account

Navigation

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.