🛠️ Installation
Install using the bash script and the CA User Scripts Plugin
Add a new user script by clicking `Add new script`
Give it a name and click OK
Click or hover over the gear icon and click `Edit Script`
Paste the contents of the bash script: bash script
Below the shebang(`#!/bin/bash`) are the variables you need to change for the different themes.
The values are the ones below
retro-terminal screenshots https://docs.theme-park.dev/themes/addons/unraid/login-page/retro-terminal/
TYPE="retro-terminal"
THEME="green.css"
DOMAIN="gilbn.github.io"
ADD_JS="true"
JS="custom_text_header.js"
DISABLE_THEME="false"
Available theme colors.
amber.css
red.css
green.css
blue.css
white.css
custom.css /* Make it your own */
alien screenshots https://docs.theme-park.dev/themes/addons/unraid/login-page/alien/
TYPE="alien"
THEME="hallway2.css"
DOMAIN="gilbn.github.io"
ADD_JS="false"
JS="isolation.js"
DISABLE_THEME="false"
Available theme colors.
hallway.css
hallway2.css
hallway3.css
hallway4.css
isolation.css
isolation_video.css
scanner.css
nightmare.css
custom.css /* Make it your own */
fallout screenshots https://docs.theme-park.dev/themes/addons/unraid/login-page/fallout/
TYPE="fallout"
THEME="dirty_terminal2.css"
DOMAIN="gilbn.github.io"
ADD_JS="false"
JS="please_stand_by.js"
DISABLE_THEME="false"
Available theme colors.
terminal.css
terminal2.css
dirty_terminal.css
dirty_terminal2.css
fallout_video.css
custom.css /* Make it your own */
Set the values to what you like, and click Save Changes
To have the script applied at every boot, set the schedule to At Startup of Array
Now just click Run Script and it will print some text in the window.
Thats it.. logout and have a look at your new theme
Javascript:
You can also inject an animated `<pre>` tag with javascript for that ultimate alien feel 👽
Set ADD_JS to `"true"` to enable or `"false"` to omit the javascript.
⚠️⚠️⚠️
HEY! You are injecting javascript into the login page for your precious server!
You should probably have a look at the content of that file, and probably host it yourself 💀
⚠️⚠️⚠️
Retro Theme
custom_text_header.js
Alien
isolation.js
Fallout
please_stand_by.js
vault-tec-crt.js
vault-tec-crt_no-scanline.js
FAQ
Backups
The script will create a backup of the login.php file if one does not exist.
Uninstall/Restore the original
To uninstall the theme set the variable `DISABLE_THEME` to `"true"`
Can I selfhost this?
Of course! Just clone the repo into your webserver. Remember to change the `DOMAIN` variable in the bash script.
My server is not connected to the internet! How can I add this?
With the current version of the bash script, that is not possible as it injects the stylesheet using the a URL and not a file path.
However, nothing is stopping you from just doing some small changes to the script and replace the `href` urls to the path you stored the files.
I will try and create a version of the script that is made for local hosting in the future.
I hate the flickering!!
To remove the background flickering you need to edit the css file. Now since you don't have any control over those files, you'll need to fork it and setup Github pages or selfhost them. You can't use the raw link from Github, as they don't pass the mime types.
The background flickering can be disabled by setting the `--body-animation` root variable to `none`
The `<pre>` tag flicker can be disabled by setting `--custom-text-header-animation` to `none`.
I hate the CRT lines!!
Set the `--body-before` and `--body-after` root variables to `none`
I want my own logo!!
Fork it and change the `--logo` variable or if you're using stylus ect, just add a new `--logo` root variable below the import line.
@import url(https://theme-park.dev/css/addons/unraid/login-page/retro-terminal/red.css);
:root {
--logo: url(https://domain.com/your-snowflake-logo-here.png) center no-repeat;
}
Available CSS variables:
Retro Theme
:root {
--main-bg-color:black;
--body-before:#00ff771a;
--body-after: #00ff7733;
--body-animation: flicker;
--logo: url(https://theme-park.dev/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color-hover: #68ffff;
--selection-color: #68ffff;
--custom-text-header:#37f592;
--custom-text-header-shadow:#37f592;
--custom-text-header-animation: textflicker;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--loginbox-background-color: transparent;
--text-shadow: 0 0 8px;
--text-shadow-color: #37f592;
--box-shadow: 0 0 15px;
}
Alien
:root {
--main-bg: radial-gradient(ellipse at center,rgba(0, 255, 119, 0.1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed,
url(https://theme-park.dev/css/addons/unraid/login-page/alien/wallpaper/hallway.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/css/addons/unraid/login-page/alien/logo/wings_green.png) center no-repeat;
--text-color: #37f592;
--input-color: #37f592;
--link-color: #37f592;
--link-color-hover: #68ffff;
--case-color: #37f592;
--button-text-color: #37f592;
--button-text-color-hover: #000;
--button-color: #37f592;
--button-color2: #0C833D;
--button-color-hover: #68ffff;
--button-color2-hover: #68ffff;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace; /*'VT323', 'Share Tech Mono'*/
--div-background-color-15: rgba(0, 255, 111, 0.03);
--text-shadow: 0 0 8px;
--box-shadow: 0 0 15px;
}
Fallout
:root {
--main-bg-color: url(https://theme-park.dev/css/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png),
url(https://theme-park.dev/css/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed;
--logo: url(https://theme-park.dev/css/addons/unraid/login-page/fallout/logo/vault-tec_green.png) center no-repeat;
--text-color: #14F074;
--input-color: #14F074;
--link-color: #14F074;
--link-color-hover: #0C833D;
--case-color: #14F074;
--button-text-color: #14F074;
--button-text-color-hover: #FFFFFF;
--button-color: #14F074;
--button-color2: #0C833D;
--input-font: 'Share Tech Mono', monospace;
--text-font: 'Share Tech Mono', monospace;
--div-background-color-15: rgba(0, 0, 0, 0.25);
}