[PLUGIN] Unraid Logo Tweaker – Easily change WebGui logo image and URL

[Guns McWar]

Unraid Logo Tweaker

Easily change WebGui logo image and URL

 

https://github.com/joellombardo/unraid-logo-tweaker

 

Please note: After your first save, the form will be blank and you must refresh the page. This is a known bug.

I know there are plenty of things for me to fix and improve. I'd very much appreciate any feedback you have.

 

Hello all,

 

I've been tinkering with Unraid plugin development for a couple weeks, and I think I'm ready to share what I've come up with. Unraid Logo Tweaker is a simple plugin that allows you to customize the WebGui Unraid logo. You can set a custom URL (e.g., /Dashboard or your server IP) and replace the logo with your own base64-encoded PNG image. DOM elements are modified using JavaScript; no WebGui files are modified.

 

Replacement logo images are expected with the same or similar dimensions as the original Unraid logo (160px ✕ 28px). If using a high-density or retina display, you'll want to use 320px ✕ 56px. You can modify the CSS margins inside the plugin to allow for images with a larger height – within reason. This plugin is intended to keep things vanilla.

 

— INSTALLATION —

Navigate to the Plugins page on your Unraid installation and click on the Install Plugin tab. Then paste

https://raw.githubusercontent.com/joellombardo/unraid-logo-tweaker/main/unraid-logo-tweaker.plg

and click INSTALL. I plan to submit the plugin to Community Applications after a round of bug-fixes, feedback, and making sure the plugin is ready for that level of distribution.

 

— USING —

Unraid Logo Tweaker will appear on the Tools page under the WebGUI section. You can also access it by clicking on the Unraid Logo Tweaker icon in the Installed Plugins tab of your Plugins page.

 

Simply specify which URL you'd like to apply to the Unraid WebGui logo. To replace the logo image, paste in a base64-encoded PNG image that is 160px ✕ 28px (320px ✕ 56px retina) or similar. You may base64-encode your PNG images here. If the form goes blank after saving, simply refresh the page.

 

Base64 inline images load slower than HTTP loaded images, so make sure your image is optimized and compressed. Otherwise, you may see the Unraid logo for a split-second before the page DOM is manipulated.

 

— SAMPLE BASE64 PNG —

A sample base64-encoded image can be found in the README at https://github.com/joellombardo/unraid-logo-tweaker.

 

Edited December 8, 2020 by Guns McWar
Layout

[AwesomeAustn]

I love it! Thanks a lot!

 

Edit: I had to stop using it because it kept saying the unraid logo tweaker share was deleted every time I went into a share or disk settings and I couldn't edit or see anything. Just the yellow box.

Edited April 6, 2021 by AwesomeAustn

[Guns McWar]

On 3/18/2021 at 3:55 PM, AwesomeAustn said:

I love it! Thanks a lot!

 

Edit: I had to stop using it because it kept saying the unraid logo tweaker share was deleted every time I went into a share or disk settings and I couldn't edit or see anything. Just the yellow box.

 

Thank you for the feedback. I just noticed this as well on my system -- I guess it's been a while since I needed to add or change a share.

 

I'll look into this, but my time is limited right now with work. I'll make sure to follow up on this post when I resolve the issue.

[wolfNZ]

Any updates on this? Seems to happen on shares and users.

[wolfNZ]

Any updates on this? Seems to happen on shares and users.

I have reverted to the method of executing a script to overwrite the logo (after backing it up) with a custom SVG with the same name.

#!/bin/bashcp /CUSTOM-IMAGE-PATH/UN-logotype-gradient.svg /usr/local/emhttp/webGui/images/UN-logotype-gradient.svg