Custom login page themes


22 posts in this topic Last Reply

Recommended Posts

So, I've created a couple of custom themes for the login page that I think people might enjoy. :)

 

The themes and installation instructions can be found here: https://github.com/gilbN/theme.park/wiki/Unraid-login-page

The themes are all highly customizable, so If you got some cool ideas I'd love to see them!

 

@jonp The wait is over :P 

 

A couple of screenshots

green.png red.png 

 

hallway2.png terminal2.png

68747470733a2f2f692e696d6775722e636f6d2f465462764a74352e676966

  • Like 6
  • Thanks 2
Link to post

🛠️ Installation

 

Install using the bash script and the CA User Scripts Plugin

 

Add a new user script by clicking `Add new script`

 

raw

 

Give it a name and click OK

 

raw


Click or hover over the gear icon and click `Edit Script`

raw

 

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://github.com/gilbN/theme.park/wiki/Retro-Terminal#screenshots

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://github.com/gilbN/theme.park/wiki/Alien#screenshots

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://github.com/gilbN/theme.park/wiki/Fallout#screenshots

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. 

 

raw

 

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

i04UsMW.gif

 

Alien

isolation.js

68747470733a2f2f692e696d6775722e636f6d2f465462764a74352e676966

 

Fallout

 

please_stand_by.js

vault-tec-crt.js

vault-tec-crt_no-scanline.js

68747470733a2f2f692e696d6775722e636f6d2f7873476d33544d2e676966

 

 

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://gilbn.github.io/theme.park/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://gilbn.github.io/theme.park/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://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/wallpaper/hallway.jpg) center center/cover no-repeat fixed;
    --logo: url(https://gilbn.github.io/theme.park/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://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/fallout/wallpaper/rocky-wall.png),
    url(https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/fallout/wallpaper/terminal.jpg) center center/cover no-repeat fixed;
    --logo: url(https://gilbn.github.io/theme.park/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);
}

 

Edited by GilbN
install instructions
Link to post
6 minutes ago, GilbN said:

lmao! If you got any good source material it's fairly simple really! 

 

YES.

 

1074782134_MassEffectTheme.thumb.jpg.e2f72fe1c51c72368eed4037345d9b42.jpg

 

Source is unknown, but this is all over the net and wallpaper sites...

 

Edited by falconexe
Link to post
13 minutes ago, GilbN said:

Yup you can absolutely add sound :) https://www.w3schools.com/tags/av_prop_autoplay.asp

 

Man, I've got so many freaking ideas right now. I'm huge into KODI/LaunchBox/BigBox theming, so this is right up my alley. I love theme music playing on every movie/tvshow/game.

 

Tell you what, I will UpRes some source material in 4K using Topaz Labs Gigapixel AI, and upload them here. I do this with all of my images and they always look insane in 4K. That software is really amazing...

 

I have 3 Mass Effect Images in particular that I would LOVE to have as my log screens for each of my servers. Let me me know if that is something you can pull off for a new "Mass Effect" section in your GitHub.

Edited by falconexe
Link to post
9 minutes ago, falconexe said:

 

Man, I've got so many freaking ideas right now. I'm huge into KODI/LaunchBox/BigBox theming, so this is right up my alley. I love theme music playing on every movie/tvshow/game.

 

Tell you what, I will UpRes some source material in 4K using Topaz Labs Gigapixel AI, and upload them here. I do this with all of my images and they always look insane in 4K. That software is really amazing...

 

I have 3 Mass Effect Images in particular that I would LOVE to have as my log screens for each of my servers. Let me me know if that is something you can pull off for a new "Mass Effect" section in your GitHub.

You can install a chrome plugin called Stylus and test this if you want. I just added the wallpaper and a logo to the correct variables, and changed the colors around. 

The plugin injects the css directly into the url you want. Pretty neat. 


Link to Chrome extention: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en 

Link to Firefox extention: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

 

@import url("https://gilbn.github.io/theme.park/CSS/addons/unraid/login-page/alien/alien_base.css");
:root {
    --main-bg: radial-gradient(ellipse at center,rgba(255, 0, 0, .1) 0,rgba(0,255,119,0) 100%) center center/cover no-repeat fixed, 
    url(https://ipsassets.unraid.net/uploads/monthly_2020_12/1827847447_MassEffectTheme.jpg.04c4fd3c1f3ca73d490797383fe65128.jpg) center center/cover no-repeat fixed;
    --logo: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Mass-Effect-N7-sign.png) center no-repeat;
    --text-color: #37b3f5;
    --input-color: #37b3f5;
    --link-color: #37b3f5;
    --link-color-hover: #6fcdff;
    --case-color: #37b3f5;
    --button-text-color: #37b3f5;
    --button-text-color-hover: #000;
    --button-color: #37b3f5;
    --button-color2: #37b3f5;
    --button-color-hover: #6fcdff;
    --button-color2-hover: #6fcdff;
    --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;
}

 

Link to post
17 hours ago, minuzle said:

Man these are awesome!  I wish I knew more about css and js to be able to make my own.

Thanks! Building off these should be fairly simple btw. 
The way I started this was just using the browser console and inspecting stuff and changing colors ect. 

Edited by GilbN
Link to post
  • 5 weeks later...
On 12/8/2020 at 1:28 PM, GilbN said:

So, I've created a couple of custom themes for the login page that I think people might enjoy. :)

 

The themes and installation instructions can be found here: https://github.com/gilbN/theme.park/wiki/Unraid-login-page

The themes are all highly customizable, so If you got some cool ideas I'd love to see them!

Just curious, where is it you find out what css was needed to make this work. I am trying to do other things in unraid and would love to learn. Also is there a way to add local picture files? I see yours all link to hosted files. I would like to be able to host my own locally from a share if possible.

Link to post
On 1/12/2021 at 2:39 AM, almulder said:

Just curious, where is it you find out what css was needed to make this work. I am trying to do other things in unraid and would love to learn. Also is there a way to add local picture files? I see yours all link to hosted files. I would like to be able to host my own locally from a share if possible.

If you hit f12 in the browser you can inspect the html and css. And you can use a browser plugin like stylus ect to inject you custom stylesheet.

Check youtube for some css and html courses. 

 

You can add local pictures yeah, but you will have to change the script. 

Edited by GilbN
Link to post
  • 2 weeks later...
  • 2 weeks later...
  • 2 weeks later...
On 2/3/2021 at 1:37 PM, GilbN said:

What's Adeptus Mechanicus?

The preisthood of the cult of the machine god in Warhammer 40k.  My UNRAID server is named MARS41 because that is the designation of the forgeworld of Mars and the home of the adeptus mechanicus.

Link to post
20 minutes ago, TheShadowDuke said:

The preisthood of the cult of the machine god in Warhammer 40k.  My UNRAID server is named MARS41 because that is the designation of the forgeworld of Mars and the home of the adeptus mechanicus.

As long as you have some cool artwork and logo you can customize pretty much everything there with the different css variables 

Link to post

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.