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, 20205 yr by Guns McWar
Layout

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, 20215 yr by AwesomeAustn

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.

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

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

On 5/24/2022 at 11:20 AM, wolfNZ said:

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

 

 

Thanks! With this, a User Script can be built to overwrite the logos and CSS!
 

For anyone who wants to do that (I am using it as of 2024-05-13), here is what I did:

I downloaded the logos and files that I wanted to edit via FTP. (WebGUI image file path:)

/usr/local/emhttp/plugins/dynamix/images/

 

For example, I downloaded the "UN-logotype-gradient.svg" and edited it in Photoshop. (Drag and drop the SVG into Photoshop and note down the logo size. At this time, it is 223 x 56 px with 72 dpi.) You can resize it when you open it, BUT when you export it, you have to export it at the same size as the default. Here's an example:

1. Drag and drop the file into Photoshop.
2. The SVG-format prompt asks for width and height.
3. Enter, for example, 2230 x 557.
4. Hit enter and edit the logo.
5. Export it via File > Export > Export As > Select SVG (you have to enable it, it's not there by default) > Now change the width and height back to 223 x 56.

Otherwise, it will not work because the SVG overlaps with the menu, and links are not clickable anymore.

 

Now to the script:

 

I created a folder (no matter where, just change the path in the script) and placed the images and files that I wanted to modify.

Now just add a user script (the app "User Scripts" can be found via CA) and finally set the schedule to copy the files over at array startup (because I noticed when I restarted, the logos weren't here anymore).

Script: 

#!/bin/bash

# Loading Logo animated-logo.svg
cp /mnt/user/appdata/unraid/animated-logo.svg /usr/local/emhttp/plugins/dynamix/images/animated-logo.svg

# Main Logo UN-logotype-gradient.svg
cp /mnt/user/appdata/unraid/UN-logotype-gradient.svg /usr/local/emhttp/plugins/dynamix/images/UN-logotype-gradient.svg

# Edited Theme default-black.css
cp /mnt/user/appdata/unraid/default-black.css /usr/local/emhttp/plugins/dynamix/styles/default-black.css

echo "logos and css changed"

I didn't want to use the theme engine, so I edited the CSS too. 🙂
Here's an example of what it could look like:


As you can see, with the edited CSS, I also changed the button gradient color! 

Happy modifying! 👽

On 5/13/2024 at 1:06 PM, Wiesty said:

Thanks! With this, a User Script can be built to overwrite the logos and CSS!
 

For anyone who wants to do that (I am using it as of 2024-05-13), here is what I did:

I downloaded the logos and files that I wanted to edit via FTP. (WebGUI image file path:)

/usr/local/emhttp/plugins/dynamix/images/

 

For example, I downloaded the "UN-logotype-gradient.svg" and edited it in Photoshop. (Drag and drop the SVG into Photoshop and note down the logo size. At this time, it is 223 x 56 px with 72 dpi.) You can resize it when you open it, BUT when you export it, you have to export it at the same size as the default. Here's an example:

1. Drag and drop the file into Photoshop.
2. The SVG-format prompt asks for width and height.
3. Enter, for example, 2230 x 557.
4. Hit enter and edit the logo.
5. Export it via File > Export > Export As > Select SVG (you have to enable it, it's not there by default) > Now change the width and height back to 223 x 56.

Otherwise, it will not work because the SVG overlaps with the menu, and links are not clickable anymore.

 

Now to the script:

 

I created a folder (no matter where, just change the path in the script) and placed the images and files that I wanted to modify.

Now just add a user script (the app "User Scripts" can be found via CA) and finally set the schedule to copy the files over at array startup (because I noticed when I restarted, the logos weren't here anymore).

Script: 

#!/bin/bash

# Loading Logo animated-logo.svg
cp /mnt/user/appdata/unraid/animated-logo.svg /usr/local/emhttp/plugins/dynamix/images/animated-logo.svg

# Main Logo UN-logotype-gradient.svg
cp /mnt/user/appdata/unraid/UN-logotype-gradient.svg /usr/local/emhttp/plugins/dynamix/images/UN-logotype-gradient.svg

# Edited Theme default-black.css
cp /mnt/user/appdata/unraid/default-black.css /usr/local/emhttp/plugins/dynamix/styles/default-black.css

echo "logos and css changed"

I didn't want to use the theme engine, so I edited the CSS too. 🙂
Here's an example of what it could look like:


As you can see, with the edited CSS, I also changed the button gradient color! 

Happy modifying! 👽

 

 

It would be cool to see this used to override the login prompt.

 

 

On 6/4/2024 at 7:07 PM, sdballer said:

 

 

It would be cool to see this used to override the login prompt.

 

 

There is a script! 

I use the one from themepark: https://github.com/themepark-dev/theme.park 
 

Seems the plugin is not available any more?