Skip to content
View in the app

A better way to browse. Learn more.

Unraid

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.

[Plugin] Theme Engine - a webGui styler

Featured Replies

Welp upgraded Unraid Connect again and now my workaround doesn't even work.

What's going on here? ha

  • Replies 247
  • Views 108.3k
  • Created
  • Last Reply

Top Posters In This Topic

Most Popular Posts

  • In the works  

  • Replacement now published No it doesn't Replacement Theme Engine is now within Apps. Uninstall the original from the plugins tab and reinstall the new one from Apps Note that this plugin will be 1

  • THANK YOU FOR THIS PLUGIN.   Allowed to make it look like something not from 20 years ago        

Posted Images

On 2/8/2024 at 9:54 AM, nickydd9 said:

I tried clearing browser cache to no avail. I ended up just re-installing Theme Engine plugin and its working again. 

 

Thankfully I use one of the default templates in Theme Engine so I didn't have much setting back up to do.

 

The weird dark theme happened to me today. I tried a Private window and same thing. It must have been a plugin issue. Reinstalling the plugin worked for me. Thanks!

 

For others:

It clears out the whole plugin folder when it's removed. So backup your custom ones beforehand. Just copy them out of the flash/config/plugins/theme.engine/themes folder. Put them back after it's reinstalled. Then refresh the settings page and load the one you want.

  • 2 weeks later...
On 5/12/2022 at 6:43 AM, francrouge said:

Hi guys everytime i reboot my server i lost my theme.

 

I'm force to delete the plugin and reinstalled because it does not allow me to modify any theme.

 

Any ideas ?

 

thx

ive had this problem forever now and still dont know why it is doing that.  is there a way to fix it so it remembers the theme i set after a reboot?

  • 5 months later...

Hi, do you plan to continue developing the plugin?


In 7.0.0-beta.2 there are some bugs, I imagine they have changed and the css would have to be modified.


Thanks,

On 9/4/2024 at 12:57 PM, Odon said:

Hi, do you plan to continue developing the plugin?


In 7.0.0-beta.2 there are some bugs, I imagine they have changed and the css would have to be modified.


Thanks,

 

Can you show screenshots with the bugs? I have 7.0.0-beta.2 on 3 servers with 3 different themes, I only noticed a different in color near the dockers/VMs on dashboard but didn't really check if it is something can be fixed in the theme

image.png.38feef44961cf06a5ec8260a0c953cd8.png

  • 2 months later...
On 9/5/2024 at 8:30 PM, thecode said:

 

Can you show screenshots with the bugs? I have 7.0.0-beta.2 on 3 servers with 3 different themes, I only noticed a different in color near the dockers/VMs on dashboard but didn't really check if it is something can be fixed in the theme

image.png.38feef44961cf06a5ec8260a0c953cd8.png

 

Thank you for your reply, I am attaching 2 images so you can see the difference with the plugin with the same options and colors from 6.12.13 to 7.0.0-beta.4.

 

Do you think we can have an easy solution?

 

PD: Only in administration page, the others pages the view is OK.

 

Thank you

 

Odón

before.png

after.png

Edited by Odon

  • 4 weeks later...

THANK YOU FOR THIS PLUGIN.

 

Allowed to make it look like something not from 20 years ago xD

 

image.thumb.png.c6e7173fec129cafb34340d5b9abe6ba.png

 

image.thumb.png.b01a78ec8b9ed6706ac6131020a18941.png

 

image.thumb.png.49fba300ae725c28d57d93c7a96b13d9.png

 

Edited by ffleps

  • 4 weeks later...
On 12/14/2024 at 12:24 PM, ffleps said:

THANK YOU FOR THIS PLUGIN.

 

Allowed to make it look like something not from 20 years ago xD

 

image.thumb.png.c6e7173fec129cafb34340d5b9abe6ba.png

 

image.thumb.png.b01a78ec8b9ed6706ac6131020a18941.png

 

image.thumb.png.49fba300ae725c28d57d93c7a96b13d9.png

 

You can't drop this and not share the files :). New to unraid and was surprised by how antiquated the dashboard looked as well as the lack of customization that isn't beyond just changing text/background colors

On 11/21/2024 at 3:18 AM, Odon said:

 

Thank you for your reply, I am attaching 2 images so you can see the difference with the plugin with the same options and colors from 6.12.13 to 7.0.0-beta.4.

 

Do you think we can have an easy solution?

 

PD: Only in administration page, the others pages the view is OK.

 

Thank you

 

Odón

before.png

after.png

I'm using the same NordDark theme (With custom styling) and mine looks like this as well. It does appear like the CSS has changed going from the latest 6 release to the current stable 7 release. The dashboard and table headers do all appear to have different CSS selectors. I've updated a bit of the CSS but my CSS-fu ain't the best so there are a few things I'm having issues changing like the CSS coming from the unassigned devices plugin etc

Edited by Theonlyway
typos

It looks like theme engine doesn't really like unraid 7. Most themes the new GUI will have wrong colours applied to the tiles or will show like below. Anyone else have this issue or know if devs are aware?

image.thumb.png.7b62a5eae24dd3c7be6045e1b87e286b.png

Edited by z0ki

They know it and they pass, we agree that nobody should maintain anything if they don't want to but at least a "sorry guys, I'm not going to maintain it" but it doesn't seem like it either, so those of us who have the plugin installed can look for alternatives.
 

After playing around with the CSS for a while, I figured out what to change.

/* Dashboard Tiles */
.dashboard {
    background-color: #1b1e2c !important;
}

/* Dashboard Tile Background (match the main background color) */
.tile {
    background-color: #24283b !important; 
}

/* "stopgap" (horizontal space in between arrangeable tiles) */
.stopgap {
    background-color: #141620 !important;
}

 

Mind you, I'm pointing to a locally hosted css file that I customized from the Dracula theme. Hardly know CSS, so don't know if this is "proper" but it works for me.

 

 

Screenshot 2025-01-13 134418.png

Screenshot 2025-01-13 134432.png

Edited by m7ke

Oh great, I also added this so that the inside of the Docker container would come out well.

 

Thank you very much for seeing the light.

 

Odón

 

/* "outer" (inside dockers containers in dash) */
.outer {
    background-color: #3b4252 !important;
}

 

Captura de pantalla 2025-01-14 a las 0.05.09.png

Last modification within the CPU colors, I think it looks better.


I leave it here in case anyone else is interested.

 

Odón

 

/* "cpu_open" (inside the cpu cores) */
.cpu_open {
    background-color: #3b4252 !important;
}

 

Captura de pantalla 2025-01-14 a las 0.23.46.png

So would I just paste the code under this?

image.thumb.png.5baa270dd7ec2439f69f5732c19ef329.png

I use one that I customized myself, I attach the complete zip file in case you are interested, you can import it from the top with the "Import Zip" option, if you do not want to install it look inside it is just a .css and a cfg. that the plugin uses.

 

Odón.

QUAD-black.zip

39 minutes ago, Odon said:

I use one that I customized myself, I attach the complete zip file in case you are interested, you can import it from the top with the "Import Zip" option, if you do not want to install it look inside it is just a .css and a cfg. that the plugin uses.

 

Odón.

QUAD-black.zip 7.18 kB · 0 downloads

Thanks this worked! 

I couldn't bring down a drop down list from the UI for some reason, so i just copied pasted the code and it worked. image.png.662d93fb0838666bc0b9fc3a23ac25bd.png

Made some updates/additions based on some of the other sections that weren't being styled properly. Mainly the unassigned devices section in main.

CustomNordDark-black.zip

Thanks for your modifications, I'm including them in my main theme and uploading them to github in case anyone wants the same theme already built.

 

Odón

 

https://github.com/unraiders/unraid-theme/

4 hours ago, Odon said:

Thanks for your modifications, I'm including them in my main theme and uploading them to github in case anyone wants the same theme already built.

 

Odón

 

https://github.com/unraiders/unraid-theme/

Thank you!! I've just moved to your theme as the one I was using (aquamarine) has been broken by V7. 

@Skitals any plans or ETA on updating the code so it reflects the changes in unRAID 7?

 

 

  • 3 weeks later...

Any chance someone has Dracula updated? I will try and mess with the CSS later but was hoping someone already has.

On 2/5/2025 at 4:22 AM, rushone2010 said:

Any chance someone has Dracula updated? I will try and mess with the CSS later but was hoping someone already has.

 

Also +1 for this.

For anyone that wants a simple dark theme that works with the grey style side menu. I made this for 7.0.0. Everything seems to be fixed on the dashboard. Still needs some work on the shares and array page to get it to where i would like but its a start. Thanks to the previous commentors for some of their tweaks. 
Unraid7grey.png
 

Niko-gray.zip

On 2/12/2025 at 4:14 PM, averagejoeshmoe said:

For anyone that wants a simple dark theme that works with the grey style side menu. I made this for 7.0.0. Everything seems to be fixed on the dashboard. Still needs some work on the shares and array page to get it to where i would like but its a start. Thanks to the previous commentors for some of their tweaks. 

 

 

Thank you!

Don't use the side menu but good to know the option is there to make it look better now. :>

 

 

On 1/14/2025 at 4:30 AM, Odon said:

Thanks for your modifications, I'm including them in my main theme and uploading them to github in case anyone wants the same theme already built.

 

Odón

 

https://github.com/unraiders/unraid-theme/

 

Amazing Odón. I'm using it now with a tiny bit of my own coloring.  

Question: do you happen to know how to change the color of the red elements such as the stopped icon?  

I tried changing the one called "Red Text (failed)" but that doesn't seem to affect anything.

 

And also the rollup/setting buttons?

 

 

It's these ones:

 

image.png.f9e07ee3f462d33afb8fa700e81c25f2.png

Edited by DevanteWeary

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...

Account

Navigation

Search

Search

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.