Seen the question asked a few times on how to get a custom image/photo as a background but no hints so far - assume it's a case of using your own css file and putting in the background-image setting?

2 hours ago, Lard said:

Seen the question asked a few times on how to get a custom image/photo as a background but no hints so far - assume it's a case of using your own css file and putting in the background-image setting?

okay - got it now - I followed these instructions and just uploaded my own image to the folder it created and changed the theme.css https://github.com/XiaoNieGPT/unraid-theme

On 7/16/2025 at 6:06 AM, Alyred said:

I was trying to back up my old theme (just recently upgraded to UnRAID 7.1.4) to upgrade to the new plugin, but all the fields for colors were blank, including in the export. It did have my CSS.

Will upgrading to the new theme plugin carry over the current theme?

Late replying to this but incase anyone else needs to -> I had old one installed and just went to it on the app store and clicked "reinstall" which upgraded it without changing my previous settings. I use the bottom section to point to a custom CSS file, so YMMV.

After a recent update to maybe the CA plugin(?) or something, I noticed a white bar along the bottom of my GUI, so added the following to my custom CSS to hide it as it doesn't seem important.

#progressFrame {
  display: none; /* removes it completely from layout */
  /* or: visibility: hidden; keeps its space but hides it */
}

Not CA related. What OS version? TBH, I wouldn't expect a fix as I only republished as the author was MIA and it needed an update for 7.1, but 7.2+ its completely incompatible and will not be adjusted for that and somebody else will need to create something that will work -> I just don't have the time ;)

On 9/6/2025 at 9:37 PM, Squid said:

Not CA related. What OS version? TBH, I wouldn't expect a fix as I only republished as the author was MIA and it needed an update for 7.1, but 7.2+ its completely incompatible and will not be adjusted for that and somebody else will need to create something that will work -> I just don't have the time ;)

Appreciate the heads up about 7.2+. Still really grateful that you republished this for 7.1.

On 9/7/2025 at 4:37 AM, Squid said:

Not CA related. What OS version? TBH, I wouldn't expect a fix as I only republished as the author was MIA and it needed an update for 7.1, but 7.2+ its completely incompatible and will not be adjusted for that and somebody else will need to create something that will work -> I just don't have the time ;)

7.1.4

Been on this ver for a bit and that bar only appeared after updating plugins, unless it was one of the new silent patches Unraid does? Just noticed my notifications pane has gone transparent background, not done any updates it's just suddenly started happening.

That's fair RE plugin updates, hoping someone picks this up and/or makes a modern version from the ground up.

On 9/9/2025 at 12:39 PM, supptora said:

7.1.4

Been on this ver for a bit and that bar only appeared after updating plugins, unless it was one of the new silent patches Unraid does? Just noticed my notifications pane has gone transparent background, not done any updates it's just suddenly started happening.

That's fair RE plugin updates, hoping someone picks this up and/or makes a modern version from the ground up.

Do you have Unassigned Devices Preclear installed? Try uninstalling that and see if it makes a difference.

On 9/6/2025 at 9:34 PM, supptora said:

After a recent update to maybe the CA plugin(?) or something, I noticed a white bar along the bottom of my GUI

AFAIK that's a bug in the Connect plugin.

On 9/11/2025 at 2:20 AM, Squid said:

Do you have Unassigned Devices Preclear installed? Try uninstalling that and see if it makes a difference.

Nope, only normal UD and UD+

I assume something was changed and now my custom CSS is being applied to that panel as well.

Edit: I've fixed it with some inspect page usage + gpt to help figure out what was conflicting. Seems to be that there was no fallback for the "bg-background" code that unraid now uses, so had to add a bit to my CSS to target those dialogue panes.

(Most of my CSS is tweaked from that github theme posted on the other pages)

"That bg-background utility is pulling from your CSS variables. In your theme file, you don’t actually define --background, so the browser probably resolves it to transparent (or your earlier * { background-color: rgba(0,0,0,0) } nukes it)." - gpt

In-case anyone needs the code or inspiration for fixing theirs:

:root {
--background: 0 0% 10% !important; /* dark base for dialogs */
--foreground: 0 0% 98% !important; /* very light text for contrast */
}
dialog,
[role="dialog"],
.swal-modal,
#sb-wrapper {
background-color: rgba(20, 20, 20, 0.65) !important; /* semi-dark tint */
backdrop-filter: blur(12px) saturate(140%) !important;
-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
border: 1px solid rgba(255, 255, 255, 0.1); /* subtle glass edge */
color: var(--foreground) !important;
}

Edited September 16, 2025Sep 16 by supptora

On 9/11/2025 at 1:06 PM, Kilrah said:

AFAIK that's a bug in the Connect plugin.

Ah, I've just updated the plugin and removed that line of code from my CSS that I added before and the bar is gone without it. Thanks.

Will this plugin be updated to support the new 7.2 release of Unraid?

I would also love to see support for 7.2. I only need the feature to define custom css.

On 11/4/2025 at 5:22 PM, rustyshakelford2 said:

Will this plugin be updated to support the new 7.2 release of Unraid?

No.

One of the upshots of 7.2 is that theming is far far easier because the entire GUI's CSS is all using variables for the colours. Plugins though if they have custom CSS will take time to catch up to support the gui's css vars.

While it's easy to re-theme, the nature of this plugin isn't really compatible with how it's done in 7.2. Unfortunately, I don't really have any time to be able to do a replacement. But anyone is welcome to create a replacement plugin for 7.2 and have it published in CA

Is there anything else which lets you define custom css in 7.2?

On 11/6/2025 at 2:52 AM, Squid said:

No.

One of the upshots of 7.2 is that theming is far far easier because the entire GUI's CSS is all using variables for the colours. Plugins though if they have custom CSS will take time to catch up to support the gui's css vars.

While it's easy to re-theme, the nature of this plugin isn't really compatible with how it's done in 7.2. Unfortunately, I don't really have any time to be able to do a replacement. But anyone is welcome to create a replacement plugin for 7.2 and have it published in CA

Really greatful if we could have some sort of documentation about how we can customize the WebUI now 😃 I looked around but couldn't find anything useful 🤔

Edited November 10, 2025Nov 10 by m33ts4k0z

@Kinqdos @m33ts4k0z @rustyshakelford2

If you only need custom CSS, I wrote a small plugin that works on 7.2+: https://forums.unraid.net/topic/195276-plugin-simple-custom-webui-css-plugin-for-unraid-72/

It’s NOT a replacement for Theme Engine, since it doesn’t have any features other than injecting the CSS code you provided.

1 hour ago, Wu23333 said:

@Kinqdos @m33ts4k0z @rustyshakelford2

If you only need custom CSS, I wrote a small plugin that works on 7.2+: https://forums.unraid.net/topic/195276-plugin-simple-custom-webui-css-plugin-for-unraid-72/

It’s NOT a replacement for Theme Engine, since it doesn’t have any features other than injecting the CSS code you provided.

Yes! Thank you! I'm using this for the button colors for regular and hover. Thanks for providing your sample CSS code!

12 hours ago, Wu23333 said:

@Kinqdos @m33ts4k0z @rustyshakelford2

If you only need custom CSS, I wrote a small plugin that works on 7.2+: https://forums.unraid.net/topic/195276-plugin-simple-custom-webui-css-plugin-for-unraid-72/

It’s NOT a replacement for Theme Engine, since it doesn’t have any features other than injecting the CSS code you provided.

Awesome exactly what I was looking for. Thank you!

This is perfect and now I can upgrade. Thank you kindly.

If anyone was using the theme.park themes through Theme Engine I got them working on Unraid using what @KaySwiss and @GilbN came up with in the theme.park Discord server. I am not a good programmer and I don't know if this is the best way to do this but it works.

Using theme.park themes in Unraid without Theme Engine

1. Install the theme-park unraid app. Original documentation - https://docs.theme-park.dev/setup/#docker Note: With theme.park locally installed on Unraid you can also use docker mods and a few other options to inject css into other apps, I do it to all my Arr apps. - https://docs.theme-park.dev/setup/#docker-mods

2. Add the user script below and set it to run on array first start. The script is from the theme.park documentation modified to inject a custom css into DefaultPageLayout.php https://github.com/themepark-dev/theme.park/blob/master/css/addons/unraid/local.sh

3. Make sure to change the root_source_folder variable to the source of your css files and LINE variable to which css file

4. Run the script and it should insert the css line into the DefaultPageLayout.php (also creates a backup of it)

5. That should be it. I didn't have to change anything in my display settings.

Edit: Fine tuned the script since I discovered if you change the to a different css file the old line was not removed and the new one could not take effect. It should now work correctly.

#!/bin/bash
set -euo pipefail

# Theme-Park Theme CSS Synchronization Script (Improved)
# Usage: Edit 'root_source_folder' as needed. Run as root.
# Dependencies: rsync, awk, sed

# --- User Configuration ---
root_source_folder="/mnt/apps_cache/appdata/theme-park/www/css"   # CHANGE THIS as needed
custom_css_line='<link type="text/css" rel="stylesheet" href="/webGui/styles/theme-park/css/base/unraid/plex.css"/>' # CHANGE THIS as needed
log_file="/usr/local/emhttp/plugins/dynamix/include/themepark-sync.log" # CHANGE THIS as needed

main_destination_folder="/usr/local/emhttp/plugins/dynamix/styles/theme-park/css/"
php_file="/usr/local/emhttp/plugins/dynamix/include/DefaultPageLayout.php"

# --- Subfolders to Sync ---
subfolders=("base/unraid" "theme-options" "defaults" "community-theme-options")

# --- Dependency Checks ---
for cmd in rsync awk sed mktemp; do
    command -v "$cmd" >/dev/null 2>&1 || { echo "$cmd not found. Please install it."; exit 1; }
done

# --- Logging Function ---
log() {
    echo "$(date '+%Y-%m-%d %H:%M:%S') $*" | tee -a "$log_file"
}

# --- Root Privilege Check ---
if [[ "$EUID" -ne 0 ]]; then
    log "ERROR: This script must be run as root. Use sudo."
    exit 2
fi

# --- Create Destination Subfolders ---
for subfolder in "${subfolders[@]}"; do
    dest="$main_destination_folder$subfolder"
    if [[ ! -d "$dest" ]]; then
        log "Creating destination folder: $dest"
        mkdir -p "$dest"
    fi
done

# --- Sync Subfolders ---
for subfolder in "${subfolders[@]}"; do
    src="$root_source_folder/$subfolder"
    dest="$main_destination_folder$subfolder"
    if [[ ! -d "$src" ]]; then
        log "Source folder not found: $src"
        exit 1
    fi
    rsync -av --delete "$src/" "$dest"
    log "Synced: $src -> $dest"
done

# --- Update @import References in CSS Files ---
log "Updating @import references in CSS files..."
find "$main_destination_folder" -type f -name "*.css" -exec sed -i 's|@import url("/css/|@import url("/webGui/styles/theme-park/css/|g' {} +
log "Reference update complete."

# --- PHP File Modification ---
if [[ ! -f "$php_file" ]]; then
    log "ERROR: PHP file not found: $php_file"
    exit 3
fi

# --- Check for Existing Line ---
if grep -Fq "$custom_css_line" "$php_file"; then
    log "No change: the line already exists in $php_file"
    exit 0
fi

# --- Backup PHP File ---
timestamp="$(date +%Y%m%d-%H%M%S)"
backup="${php_file}.bak.${timestamp}"
cp --preserve=mode,ownership,timestamps "$php_file" "$backup"
log "Backup created: $backup"


# --- Remove any previous Theme Park CSS link lines ---
sed -i '/rel="stylesheet" href="\/webGui\/styles\/theme-park\/css\//d' "$php_file"

# --- Insert the new line at line 137 (Configurable) ---
line_number=137
tmp="$(mktemp)"
awk -v newline="$custom_css_line" -v ln="$line_number" \
    'NR==ln{print newline} {print}' "$php_file" > "$tmp"
chown --reference="$php_file" "$tmp"
chmod --reference="$php_file" "$tmp"
mv "$tmp" "$php_file"
log "Inserted custom CSS line at line $line_number in $php_file"

log "SYNC COMPLETE. Theme injection finished."

Edited December 3, 2025Dec 3 by Scootter
Fine tuned the script since I discovered if you change the to a different css file the old line was not removed and the new one could not take effect. It should now work correctly.

Thanks Scooter. Worked perfectly on V7.2.3. I did the following:

1) Installed Theme-Park Docker Image - changed it to ports 91 and 92

2) In my case, I went with:

root_source_folder="/mnt/user/appdata/theme-park/www/css/"

3) And instead of plex.css for unraid, I swapped it for aquamarine.css:

custom_css_line='<link type="text/css" rel="stylesheet" href="/webGui/styles/theme-park/css/base/unraid/aquamarine.css"/>'

Thank you Scooter for providing the script. It worked liked a charm on 7.2.4.

Back to the dark theme I had running for years!

Edited March 25Mar 25 by Cold Ass Honkey