GilbN Posted December 8, 2020 Share Posted December 8, 2020 (edited) 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://docs.theme-park.dev/themes/addons/unraid/login-page/retro-terminal/ The themes are all highly customizable, so If you got some cool ideas I'd love to see them! @jonp The wait is over A couple of screenshots Edited July 1, 2021 by GilbN 7 2 Quote Link to comment
GilbN Posted December 8, 2020 Author Share Posted December 8, 2020 (edited) 🛠️ 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); } Edited November 5, 2021 by GilbN install instructions 2 Quote Link to comment
jonp Posted December 8, 2020 Share Posted December 8, 2020 OMG! THESE LOOK AMAZING! I can't wait to try them out. Seriously nice work @GilbN! 1 Quote Link to comment
falconexe Posted December 8, 2020 Share Posted December 8, 2020 (edited) Dude, freakin sweet! Can you make me a MassEffect/N7 one? Edited December 8, 2020 by falconexe 1 Quote Link to comment
falconexe Posted December 8, 2020 Share Posted December 8, 2020 (edited) Just now, falconexe said: Dude, freakin sweet! Can you make me a MassEffect/N7 One? I'll pay you LOL... Edited December 8, 2020 by falconexe Quote Link to comment
GilbN Posted December 8, 2020 Author Share Posted December 8, 2020 4 minutes ago, jonp said: OMG! THESE LOOK AMAZING! I can't wait to try them out. Seriously nice work @GilbN! Thanks!! Quote Link to comment
falconexe Posted December 8, 2020 Share Posted December 8, 2020 (edited) Another idea would be a Star Trek LCARS menu looking one. Are sound effects possible?? Edited December 8, 2020 by falconexe Quote Link to comment
GilbN Posted December 8, 2020 Author Share Posted December 8, 2020 1 minute ago, falconexe said: I'll pay you LOL... lmao! If you got any good source material it's fairly simple really! Quote Link to comment
falconexe Posted December 8, 2020 Share Posted December 8, 2020 (edited) 6 minutes ago, GilbN said: lmao! If you got any good source material it's fairly simple really! YES. Source is unknown, but this is all over the net and wallpaper sites... Edited December 8, 2020 by falconexe Quote Link to comment
GilbN Posted December 8, 2020 Author Share Posted December 8, 2020 5 minutes ago, falconexe said: Another idea would be a Star Trek LCARS menu looking one. Are sound effects possible?? Yup you can absolutely add sound https://www.w3schools.com/tags/av_prop_autoplay.asp Quote Link to comment
falconexe Posted December 8, 2020 Share Posted December 8, 2020 (edited) 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 December 8, 2020 by falconexe Quote Link to comment
GilbN Posted December 8, 2020 Author Share Posted December 8, 2020 (edited) On 12/8/2020 at 11:03 PM, 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://theme-park.dev/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; } Edited November 5, 2021 by GilbN 1 Quote Link to comment
minuzle Posted December 12, 2020 Share Posted December 12, 2020 Man these are awesome! I wish I knew more about css and js to be able to make my own. Quote Link to comment
GilbN Posted December 12, 2020 Author Share Posted December 12, 2020 (edited) 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 December 12, 2020 by GilbN Quote Link to comment
Pillendreher Posted December 12, 2020 Share Posted December 12, 2020 I'd like to request the New Vegas soundtrack playing in the background when using the Fallout theme These look amazing and I can't wait to use them! Thank you! Quote Link to comment
almulder Posted January 12, 2021 Share Posted January 12, 2021 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. Quote Link to comment
GilbN Posted January 12, 2021 Author Share Posted January 12, 2021 (edited) 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 January 13, 2021 by GilbN Quote Link to comment
TheShadowDuke Posted January 25, 2021 Share Posted January 25, 2021 Is there a way I could convince you to do an Adeptus Mechanicus themed version? Quote Link to comment
GilbN Posted February 3, 2021 Author Share Posted February 3, 2021 On 1/25/2021 at 3:34 AM, TheShadowDuke said: Is there a way I could convince you to do an Adeptus Mechanicus themed version? What's Adeptus Mechanicus? Quote Link to comment
TheShadowDuke Posted February 14, 2021 Share Posted February 14, 2021 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. Quote Link to comment
GilbN Posted February 14, 2021 Author Share Posted February 14, 2021 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 Quote Link to comment
sdballer Posted August 31, 2021 Share Posted August 31, 2021 Offline version yet Quote Link to comment
GilbN Posted August 31, 2021 Author Share Posted August 31, 2021 1 hour ago, sdballer said: Offline version yet Nope. But here is how you can do it. https://github.com/GilbN/theme.park/issues/173 Quote Link to comment
Hegewisch Posted September 10, 2021 Share Posted September 10, 2021 Can't run the Login Themes under 6.10.0-rc1 any known issues? Marcell 1 Quote Link to comment
Recommended Posts
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.