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


Recommended Posts

icon.png.31d97590dafd97470cfd21991b2852f1.png

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.

screenshot.thumb.png.bf10597e0bc9705d4dd4d845ed214dfa.png

 

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 by Guns McWar
Layout
  • Thanks 1
Link to comment
  • 3 months later...
  • 3 weeks later...
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.

  • Like 1
Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.