EvilBoxy Posted October 26, 2020 Share Posted October 26, 2020 @thering1975 any chance you can share your css? Looks great. Quote Link to comment
thering1975 Posted October 26, 2020 Share Posted October 26, 2020 (edited) 38 minutes ago, EvilBoxy said: @thering1975 any chance you can share your css? Looks great. Sure, been some refinements and additional menu / icon animation, some stuff may not be relevant so you can remove Was done over black base theme #header .block { background-color: #272627 !important; } #header .text-left { color: #ffffff; } #header .text-right { color: #ffffff; } #header .text-right a { color: #ffffff; } #nav-block #nav-item.active:after { background-color: #ed145b; box-shadow: #ffffff -2px 4px 13px 2px; } .fa-warning:before, .fa-exclamation-triangle:before { color: #ffffff; } .fa-info-circle:before { color: #ffffff; } table.share_status thead tr:first-child td { font-size: 1.4rem; color: #f66d2f; } table.disk_status thead tr:first-child td { font-size: 1.4rem; color: #f66d2f; } .fa-arrow-circle-up:before { color: #ffffff; } table.share_status tr>td { text-transform: capitalize; } div.user-list { margin-right: 20px; box-shadow: #888888 0px -1px 7px 4px; margin-left: 20px; text-transform: capitalize; font-weight: 700; } a.info { color: #ffffff !important; } #title span.left { font-weight: 800; } dt { font-weight: 700; text-transform: capitalize; } table.tablesorter thead tr .tablesorter-header { font-weight: 700 !important; } .icon-u-logout:before { color: #ed145b; font-size: large; } table.tablesorter thead tr th { font-weight: 700; font-size: 1.3rem; } .fa-sort-alpha-asc:before { color: #ffffff; } #searchBox { color: #ed145b !important; font-size: medium; } .fa-unsorted:before, .fa-sort:before { color: #ffffff; } .awesomplete { color: #ed145b !important; font-weight: 700; } .awesomplete > ul { border-radius: 5px !important; margin: .2em 0 0; background: linear-gradient(to bottom right, #191818, #191818) !important; box-shadow: 0px 0px 16px 5px rgb(255, 255, 255) !important; padding: 10px !important; } .awesomplete mark { background: #f2f2f2 !important; } .caHighlight { color: #fa7d2f; } .fa-hdd-o:before { content: "\f019"; } img.img { filter: grayscale(1); } .usage-disk.sys>span { background-color: #ed145b; } table.share_status.dashboard td div.section { color: #f56d2f; font-size: inherit; } table.share_status.dashboard tr>td.next { border-top: 1px solid #ed145b40; } .ca_holderDocker { box-shadow: #ffffff -1px -1px 5px 0px; margin-top: 20px !important; } .ca_holderDocker::before { color: #ed145b59 !important; } .ca_holderPlugin::before { color: #ed145b6e !important; } .ca_fa-install::before { color: #00f563; } .menuHeader { color: #ff8c2f; } .selectedMenu { color: #ed145b !important; } .ca_templatesDisplay { padding-left: 20px; } #title { margin: 20px 10px 32px 10px !important; padding: 8px 10px !important; background: linear-gradient(to right, #e5322ac7, #fa7b2fd1) !important; border-radius: 5px; } .fa-list:before { color: #ffffff; } .fa-dashboard:before, .fa-tachometer:before { color: #ffffff; } img.list { filter: grayscale(1); } .fa-search:before { color: #ffffff; } .switch-button-label.on { color: #ffffff !important; } table { margin: 0px 0 0 0 !important; } #searchBox { background-color: #272627; border-radius: 5px; } .ca_holderPlugin { box-shadow: #ffffff -1px -1px 5px 0px; margin-top: 20px !important; } .ca_icon { filter: grayscale(1); } .fa-power-off:before { color: #ed145b; } table.disk_status { max-width: 97%; margin-left: auto !important; margin-right: auto !important; } table.share_status { max-width: 97%; margin-left: auto !important; margin-right:auto !important; } table.tablesorter thead tr .tablesorter-header { color: #ff8c2f; } table.tablesorter thead tr .tablesorter-header { color: #f2f2f2; background-color: #e7392b; } div.tab [type=radio]:checked+label { background-color: #e7392b; box-shadow: #888888 0px 4px 6px -2px; } UL.jqueryFileTree { font-size: 1.8rem !important; line-height: 2.1rem !important; margin-left: auto !important; margin-right: auto !important; max-width: 60%; } ::placeholder { /* Firefox, Chrome, Opera */ color: #ed145b !important; } div.notice { text-align: center; height: 80px; line-height: 80px; border-top: none !important; border-bottom: none !important; font-size: 1.8rem; color: #000000 !important; box-shadow: #000000 -1px 2px 20px 2px; border-radius: 100px; font-weight: 900; margin-top: 20px; background: linear-gradient(to right, #e5322a, #fa7b2f) !important; } div.jGrowl div.jGrowl-notify.alert { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-notify.warning { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-notify.normal { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#0f940c 0,#7bf75b) 0 0 no-repeat,linear-gradient(90deg,#0f940c 0,#7bf75b) 0 100% no-repeat,linear-gradient(0deg,#0f940c 0,#7bf75b) 0 100% no-repeat,linear-gradient(0deg,#0f940c 0,#7bf75b) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-closer { width: 400px; color: #ed145b !important; background-color: #121510; opacity: 0.96; border: 2px solid #f2f2f2 !important; margin: 5px 0; padding: 1px 0; cursor: pointer; font-weight: bold; text-align: center; border-radius: 5px !important; text-transform: uppercase; font-size: larger; } .fileTree { width: 50% !important; } .ca_display_beta { color: #ed145b !important; } .upgrade_notice { color: #ed145b !important; background: #000000d9 !important; border-bottom: none !important; font-weight: 700; box-shadow: #ffffff -1px 2px 12px 2px; } table.tablesorter.shift { width: 97%; margin-left: auto !important; margin-right: auto !important; margin-bottom: 30px !important; } div.tab [type=radio]:checked+label { margin-left: 20px; } .menuItems { margin-left: 35px; } .ca_templatesDisplay { margin-right: 25px; } .input #btnADDVM { margin-left: 30px; margin-top: 30px; } [id="btnAddVM"] { margin-left:30px !important; } [id="compute-shares"] { margin-left:30px !important; } [id="compute-disks"] { margin-left:30px !important; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: "\f2c9"; color: #ed145b; } #footer { color: #f97308 !important; } a:hover { transform: translate3d(1px, 2px, 2px); } #sb-title, #sb-title-inner { background: #1b1b1b !important; color: #e5322ac7 !important; box-shadow: #ffffff 0px 0px 14px 5px !important; text-transform: uppercase; } #sb-overlay { opacity: 0.7 !important; } div.user-list:hover { transform: scale(1.1) !important; } div.Panel:hover { transform: scale(1.1) !important; } .fa-th:before { content: "\f0e7"; } With link and blue text colour set to #ed145b in main settings, and menu text set to #ffffff Edited October 26, 2020 by thering1975 1 Quote Link to comment
Armeros Posted October 30, 2020 Share Posted October 30, 2020 would it be possible to set a background image and maybe set colors using RGBa? so to be able to achieve something like this: Note. I played with chrome dev. tools to do this, so i'm not sure if this is possible. I think would open a lot of theme opportunities Anyway, thanks for the great addin Quote Link to comment
newunraiduser5 Posted November 24, 2020 Share Posted November 24, 2020 Hi, I would like to uninstall it but when I do, the main area sections are still dark. Can anyone assist with a full uninstall and reversion back to the original unraid theme? Thank you Quote Link to comment
qmatic Posted December 2, 2020 Share Posted December 2, 2020 On 10/26/2020 at 10:24 AM, thering1975 said: Sure, been some refinements and additional menu / icon animation, some stuff may not be relevant so you can remove Was done over black base theme #header .block { background-color: #272627 !important; } #header .text-left { color: #ffffff; } #header .text-right { color: #ffffff; } #header .text-right a { color: #ffffff; } #nav-block #nav-item.active:after { background-color: #ed145b; box-shadow: #ffffff -2px 4px 13px 2px; } .fa-warning:before, .fa-exclamation-triangle:before { color: #ffffff; } .fa-info-circle:before { color: #ffffff; } table.share_status thead tr:first-child td { font-size: 1.4rem; color: #f66d2f; } table.disk_status thead tr:first-child td { font-size: 1.4rem; color: #f66d2f; } .fa-arrow-circle-up:before { color: #ffffff; } table.share_status tr>td { text-transform: capitalize; } div.user-list { margin-right: 20px; box-shadow: #888888 0px -1px 7px 4px; margin-left: 20px; text-transform: capitalize; font-weight: 700; } a.info { color: #ffffff !important; } #title span.left { font-weight: 800; } dt { font-weight: 700; text-transform: capitalize; } table.tablesorter thead tr .tablesorter-header { font-weight: 700 !important; } .icon-u-logout:before { color: #ed145b; font-size: large; } table.tablesorter thead tr th { font-weight: 700; font-size: 1.3rem; } .fa-sort-alpha-asc:before { color: #ffffff; } #searchBox { color: #ed145b !important; font-size: medium; } .fa-unsorted:before, .fa-sort:before { color: #ffffff; } .awesomplete { color: #ed145b !important; font-weight: 700; } .awesomplete > ul { border-radius: 5px !important; margin: .2em 0 0; background: linear-gradient(to bottom right, #191818, #191818) !important; box-shadow: 0px 0px 16px 5px rgb(255, 255, 255) !important; padding: 10px !important; } .awesomplete mark { background: #f2f2f2 !important; } .caHighlight { color: #fa7d2f; } .fa-hdd-o:before { content: "\f019"; } img.img { filter: grayscale(1); } .usage-disk.sys>span { background-color: #ed145b; } table.share_status.dashboard td div.section { color: #f56d2f; font-size: inherit; } table.share_status.dashboard tr>td.next { border-top: 1px solid #ed145b40; } .ca_holderDocker { box-shadow: #ffffff -1px -1px 5px 0px; margin-top: 20px !important; } .ca_holderDocker::before { color: #ed145b59 !important; } .ca_holderPlugin::before { color: #ed145b6e !important; } .ca_fa-install::before { color: #00f563; } .menuHeader { color: #ff8c2f; } .selectedMenu { color: #ed145b !important; } .ca_templatesDisplay { padding-left: 20px; } #title { margin: 20px 10px 32px 10px !important; padding: 8px 10px !important; background: linear-gradient(to right, #e5322ac7, #fa7b2fd1) !important; border-radius: 5px; } .fa-list:before { color: #ffffff; } .fa-dashboard:before, .fa-tachometer:before { color: #ffffff; } img.list { filter: grayscale(1); } .fa-search:before { color: #ffffff; } .switch-button-label.on { color: #ffffff !important; } table { margin: 0px 0 0 0 !important; } #searchBox { background-color: #272627; border-radius: 5px; } .ca_holderPlugin { box-shadow: #ffffff -1px -1px 5px 0px; margin-top: 20px !important; } .ca_icon { filter: grayscale(1); } .fa-power-off:before { color: #ed145b; } table.disk_status { max-width: 97%; margin-left: auto !important; margin-right: auto !important; } table.share_status { max-width: 97%; margin-left: auto !important; margin-right:auto !important; } table.tablesorter thead tr .tablesorter-header { color: #ff8c2f; } table.tablesorter thead tr .tablesorter-header { color: #f2f2f2; background-color: #e7392b; } div.tab [type=radio]:checked+label { background-color: #e7392b; box-shadow: #888888 0px 4px 6px -2px; } UL.jqueryFileTree { font-size: 1.8rem !important; line-height: 2.1rem !important; margin-left: auto !important; margin-right: auto !important; max-width: 60%; } ::placeholder { /* Firefox, Chrome, Opera */ color: #ed145b !important; } div.notice { text-align: center; height: 80px; line-height: 80px; border-top: none !important; border-bottom: none !important; font-size: 1.8rem; color: #000000 !important; box-shadow: #000000 -1px 2px 20px 2px; border-radius: 100px; font-weight: 900; margin-top: 20px; background: linear-gradient(to right, #e5322a, #fa7b2f) !important; } div.jGrowl div.jGrowl-notify.alert { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-notify.warning { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-notify.normal { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#0f940c 0,#7bf75b) 0 0 no-repeat,linear-gradient(90deg,#0f940c 0,#7bf75b) 0 100% no-repeat,linear-gradient(0deg,#0f940c 0,#7bf75b) 0 100% no-repeat,linear-gradient(0deg,#0f940c 0,#7bf75b) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-closer { width: 400px; color: #ed145b !important; background-color: #121510; opacity: 0.96; border: 2px solid #f2f2f2 !important; margin: 5px 0; padding: 1px 0; cursor: pointer; font-weight: bold; text-align: center; border-radius: 5px !important; text-transform: uppercase; font-size: larger; } .fileTree { width: 50% !important; } .ca_display_beta { color: #ed145b !important; } .upgrade_notice { color: #ed145b !important; background: #000000d9 !important; border-bottom: none !important; font-weight: 700; box-shadow: #ffffff -1px 2px 12px 2px; } table.tablesorter.shift { width: 97%; margin-left: auto !important; margin-right: auto !important; margin-bottom: 30px !important; } div.tab [type=radio]:checked+label { margin-left: 20px; } .menuItems { margin-left: 35px; } .ca_templatesDisplay { margin-right: 25px; } .input #btnADDVM { margin-left: 30px; margin-top: 30px; } [id="btnAddVM"] { margin-left:30px !important; } [id="compute-shares"] { margin-left:30px !important; } [id="compute-disks"] { margin-left:30px !important; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: "\f2c9"; color: #ed145b; } #footer { color: #f97308 !important; } a:hover { transform: translate3d(1px, 2px, 2px); } #sb-title, #sb-title-inner { background: #1b1b1b !important; color: #e5322ac7 !important; box-shadow: #ffffff 0px 0px 14px 5px !important; text-transform: uppercase; } #sb-overlay { opacity: 0.7 !important; } div.user-list:hover { transform: scale(1.1) !important; } div.Panel:hover { transform: scale(1.1) !important; } .fa-th:before { content: "\f0e7"; } With link and blue text colour set to #ed145b in main settings, and menu text set to #ffffff Could you upload your zip file if it's not too much to ask? Quote Link to comment
thering1975 Posted December 22, 2020 Share Posted December 22, 2020 I can, however, the reason i posted the css, is because some icons were changed to match the theme, obviously the storage paths in the zip file will not match on your setup, so i removed them from the above. What i may do is change the paths to something more generic that the icons could be uploaded to and the paths stay the same. gimme a few Quote Link to comment
qmatic Posted January 28, 2021 Share Posted January 28, 2021 On 12/22/2020 at 4:05 AM, thering1975 said: I can, however, the reason i posted the css, is because some icons were changed to match the theme, obviously the storage paths in the zip file will not match on your setup, so i removed them from the above. What i may do is change the paths to something more generic that the icons could be uploaded to and the paths stay the same. gimme a few Understood, thank you! Quote Link to comment
mpatterson Posted March 15, 2021 Share Posted March 15, 2021 Theme Name: NordDark-black Base Theme: Black I updated Unraid to 6.9.1 and installed the Unraid.net App, in the upper right corner which shows my Unraid username and server details the text is black. If I change the Base Theme to Gray the text turns white but I don't like the icons down the left side, I want the tab names at the top of the page. Quote Link to comment
unraidnas Posted March 21, 2021 Share Posted March 21, 2021 On 11/24/2020 at 3:49 PM, newunraiduser5 said: Hi, I would like to uninstall it but when I do, the main area sections are still dark. Can anyone assist with a full uninstall and reversion back to the original unraid theme? Thank you Same here. Can someone help ? Thanks! Quote Link to comment
Corvus Posted March 22, 2021 Share Posted March 22, 2021 On 10/27/2020 at 4:24 AM, thering1975 said: Sure, been some refinements and additional menu / icon animation, some stuff may not be relevant so you can remove Was done over black base theme #header .block { background-color: #272627 !important; } #header .text-left { color: #ffffff; } #header .text-right { color: #ffffff; } #header .text-right a { color: #ffffff; } #nav-block #nav-item.active:after { background-color: #ed145b; box-shadow: #ffffff -2px 4px 13px 2px; } .fa-warning:before, .fa-exclamation-triangle:before { color: #ffffff; } .fa-info-circle:before { color: #ffffff; } table.share_status thead tr:first-child td { font-size: 1.4rem; color: #f66d2f; } table.disk_status thead tr:first-child td { font-size: 1.4rem; color: #f66d2f; } .fa-arrow-circle-up:before { color: #ffffff; } table.share_status tr>td { text-transform: capitalize; } div.user-list { margin-right: 20px; box-shadow: #888888 0px -1px 7px 4px; margin-left: 20px; text-transform: capitalize; font-weight: 700; } a.info { color: #ffffff !important; } #title span.left { font-weight: 800; } dt { font-weight: 700; text-transform: capitalize; } table.tablesorter thead tr .tablesorter-header { font-weight: 700 !important; } .icon-u-logout:before { color: #ed145b; font-size: large; } table.tablesorter thead tr th { font-weight: 700; font-size: 1.3rem; } .fa-sort-alpha-asc:before { color: #ffffff; } #searchBox { color: #ed145b !important; font-size: medium; } .fa-unsorted:before, .fa-sort:before { color: #ffffff; } .awesomplete { color: #ed145b !important; font-weight: 700; } .awesomplete > ul { border-radius: 5px !important; margin: .2em 0 0; background: linear-gradient(to bottom right, #191818, #191818) !important; box-shadow: 0px 0px 16px 5px rgb(255, 255, 255) !important; padding: 10px !important; } .awesomplete mark { background: #f2f2f2 !important; } .caHighlight { color: #fa7d2f; } .fa-hdd-o:before { content: "\f019"; } img.img { filter: grayscale(1); } .usage-disk.sys>span { background-color: #ed145b; } table.share_status.dashboard td div.section { color: #f56d2f; font-size: inherit; } table.share_status.dashboard tr>td.next { border-top: 1px solid #ed145b40; } .ca_holderDocker { box-shadow: #ffffff -1px -1px 5px 0px; margin-top: 20px !important; } .ca_holderDocker::before { color: #ed145b59 !important; } .ca_holderPlugin::before { color: #ed145b6e !important; } .ca_fa-install::before { color: #00f563; } .menuHeader { color: #ff8c2f; } .selectedMenu { color: #ed145b !important; } .ca_templatesDisplay { padding-left: 20px; } #title { margin: 20px 10px 32px 10px !important; padding: 8px 10px !important; background: linear-gradient(to right, #e5322ac7, #fa7b2fd1) !important; border-radius: 5px; } .fa-list:before { color: #ffffff; } .fa-dashboard:before, .fa-tachometer:before { color: #ffffff; } img.list { filter: grayscale(1); } .fa-search:before { color: #ffffff; } .switch-button-label.on { color: #ffffff !important; } table { margin: 0px 0 0 0 !important; } #searchBox { background-color: #272627; border-radius: 5px; } .ca_holderPlugin { box-shadow: #ffffff -1px -1px 5px 0px; margin-top: 20px !important; } .ca_icon { filter: grayscale(1); } .fa-power-off:before { color: #ed145b; } table.disk_status { max-width: 97%; margin-left: auto !important; margin-right: auto !important; } table.share_status { max-width: 97%; margin-left: auto !important; margin-right:auto !important; } table.tablesorter thead tr .tablesorter-header { color: #ff8c2f; } table.tablesorter thead tr .tablesorter-header { color: #f2f2f2; background-color: #e7392b; } div.tab [type=radio]:checked+label { background-color: #e7392b; box-shadow: #888888 0px 4px 6px -2px; } UL.jqueryFileTree { font-size: 1.8rem !important; line-height: 2.1rem !important; margin-left: auto !important; margin-right: auto !important; max-width: 60%; } ::placeholder { /* Firefox, Chrome, Opera */ color: #ed145b !important; } div.notice { text-align: center; height: 80px; line-height: 80px; border-top: none !important; border-bottom: none !important; font-size: 1.8rem; color: #000000 !important; box-shadow: #000000 -1px 2px 20px 2px; border-radius: 100px; font-weight: 900; margin-top: 20px; background: linear-gradient(to right, #e5322a, #fa7b2f) !important; } div.jGrowl div.jGrowl-notify.alert { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-notify.warning { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-notify.normal { color: #ffffff !important; border: none !important; box-shadow: 0px 0px 16px 8px #ffffff !important; background: linear-gradient(90deg,#0f940c 0,#7bf75b) 0 0 no-repeat,linear-gradient(90deg,#0f940c 0,#7bf75b) 0 100% no-repeat,linear-gradient(0deg,#0f940c 0,#7bf75b) 0 100% no-repeat,linear-gradient(0deg,#0f940c 0,#7bf75b) 100% 100% no-repeat !important; } div.jGrowl div.jGrowl-closer { width: 400px; color: #ed145b !important; background-color: #121510; opacity: 0.96; border: 2px solid #f2f2f2 !important; margin: 5px 0; padding: 1px 0; cursor: pointer; font-weight: bold; text-align: center; border-radius: 5px !important; text-transform: uppercase; font-size: larger; } .fileTree { width: 50% !important; } .ca_display_beta { color: #ed145b !important; } .upgrade_notice { color: #ed145b !important; background: #000000d9 !important; border-bottom: none !important; font-weight: 700; box-shadow: #ffffff -1px 2px 12px 2px; } table.tablesorter.shift { width: 97%; margin-left: auto !important; margin-right: auto !important; margin-bottom: 30px !important; } div.tab [type=radio]:checked+label { margin-left: 20px; } .menuItems { margin-left: 35px; } .ca_templatesDisplay { margin-right: 25px; } .input #btnADDVM { margin-left: 30px; margin-top: 30px; } [id="btnAddVM"] { margin-left:30px !important; } [id="compute-shares"] { margin-left:30px !important; } [id="compute-disks"] { margin-left:30px !important; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: "\f2c9"; color: #ed145b; } #footer { color: #f97308 !important; } a:hover { transform: translate3d(1px, 2px, 2px); } #sb-title, #sb-title-inner { background: #1b1b1b !important; color: #e5322ac7 !important; box-shadow: #ffffff 0px 0px 14px 5px !important; text-transform: uppercase; } #sb-overlay { opacity: 0.7 !important; } div.user-list:hover { transform: scale(1.1) !important; } div.Panel:hover { transform: scale(1.1) !important; } .fa-th:before { content: "\f0e7"; } With link and blue text colour set to #ed145b in main settings, and menu text set to #ffffff Thanks! Big fan of your work. However I'm a complete newbie. What do I do with this code? I can see that the theme engine lets me upload a theme from a URL or a file. I'm kinda lost. Any help? Quote Link to comment
AwesomeAustn Posted April 1, 2021 Share Posted April 1, 2021 Is there any way you could make a login screen for Solarized Dark? Quote Link to comment
kennymc.c Posted April 10, 2021 Share Posted April 10, 2021 (edited) Just installed 6.9.2 and updated the Unraid.net Plugin. But after that, my custom theme was reset to the basic black theme and I can not load any saved themes anymore. Loading a base theme still works. I testest this in Chrome, Firefox on Safari on macOS. Uninstalling or reinstalling the Unraid.net Plugin didn't help. This console error is shown only in Chrome when I try to load a theme: DevTools failed to load SourceMap: Could not parse content for https://unraid.local/plugins/theme.engine/include/FileSaver.min.js.map: Unexpected token < in JSON at position 0 Edit: Reinstalling the Theme Engine plugin and re-importing my custom theme seems to have solved the problem. Edited April 11, 2021 by kennymc.c Quote Link to comment
pellen Posted April 29, 2021 Share Posted April 29, 2021 On 4/10/2021 at 3:21 PM, kennymc.c said: Just installed 6.9.2 and updated the Unraid.net Plugin. But after that, my custom theme was reset to the basic black theme and I can not load any saved themes anymore. Loading a base theme still works. I testest this in Chrome, Firefox on Safari on macOS. Uninstalling or reinstalling the Unraid.net Plugin didn't help. This console error is shown only in Chrome when I try to load a theme: DevTools failed to load SourceMap: Could not parse content for https://unraid.local/plugins/theme.engine/include/FileSaver.min.js.map: Unexpected token < in JSON at position 0 Edit: Reinstalling the Theme Engine plugin and re-importing my custom theme seems to have solved the problem. I've seen this as well. Every time the Unraid.net plugin is updated the theme engine plugin behaves like this. The workarounds I've found is to either restart the machine or uninstall/install theme engine. Quote Link to comment
NYSTAGMO Posted May 15, 2021 Share Posted May 15, 2021 On 4/29/2021 at 4:24 PM, pellen said: I've seen this as well. Every time the Unraid.net plugin is updated the theme engine plugin behaves like this. The workarounds I've found is to either restart the machine or uninstall/install theme engine. On 4/10/2021 at 3:21 PM, kennymc.c said: Just installed 6.9.2 and updated the Unraid.net Plugin. But after that, my custom theme was reset to the basic black theme and I can not load any saved themes anymore. Loading a base theme still works. I testest this in Chrome, Firefox on Safari on macOS. Uninstalling or reinstalling the Unraid.net Plugin didn't help. This console error is shown only in Chrome when I try to load a theme: DevTools failed to load SourceMap: Could not parse content for https://unraid.local/plugins/theme.engine/include/FileSaver.min.js.map: Unexpected token < in JSON at position 0 Edit: Reinstalling the Theme Engine plugin and re-importing my custom theme seems to have solved the problem. This was driving me nuts! Reinstalling the plugin fixed it, thanks guys! Let's hope there's a fix soon. Quote Link to comment
KoNeko Posted May 16, 2021 Share Posted May 16, 2021 is it possible to change some sections from the like the first row to the second or rd row on the frontpage? because my first row is getting long while the 2nd and 3rd are the standard ones. Quote Link to comment
hive_minded Posted May 22, 2021 Share Posted May 22, 2021 I just wanted to piggyback off of what some of the other recent comments said. For some reason whenever Unraid.net updates, it bricks the current theme and is impossible to set back without uninstalling/reinstalling. Quote Link to comment
KnifeFed Posted June 30, 2021 Share Posted June 30, 2021 Here's a OneDark theme I made: I've also set the following in Unraid Settings -> Display Settings: If you would like to try it, I've attached a zip file which you can import via Theme Engine. OneDark-black.zip 1 1 Quote Link to comment
thering1975 Posted July 18, 2021 Share Posted July 18, 2021 (edited) Decided to comeback and switch to a light theme using a totally different base theme currently nearly done, some annoying things i cant override at the moment but will get on to them, Added some animations to bring the page alive a bit. All done via custom css no amendments to the base theme in settings Next up, re do all the icons for a more modern version (80's folder and exclamation mark icons still??, seriously) This Theme is called Drumstick v0.25 (uk based sweet mmmmmm) and matches the watercooling theme of my rig, so definetly a required taste. https://youtu.be/B0KywY3xVAw Edited July 18, 2021 by thering1975 Quote Link to comment
Corvus Posted July 23, 2021 Share Posted July 23, 2021 Guys, when updating the 'my servers' plugin, my custom theme has been totally borked. Unraid will now only let me apply the default themes. Here's my theme css: body { background-color: #000000; } .share-status.dashboard { border: none; -webkit-box-shadow: 0px 3px 19px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 19px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 19px 0px rgba(0,0,0,0.1); } table.share_status.dashboard tr>td.next { border-top: 1px solid #0BA36A ; } .usage-disk { background-color: #0A8155; } .usage-disk>span:first-child { background-color: #6DAA36 } span.outer.solid { background-color: #1c332a; } .red { color: #DB0000; } #title { margin: 20px 0 32px 0; padding: 8px 10px; clear: both; border-bottom: none; background-color: #262626; letter-spacing: 1.8px; } table { border-collapse: collapse; border-spacing: 0; border-style: hidden; margin: -30px 0 0 0; width: 100%; background-color: #1c332a; -webkit-box-shadow: 0px 3px 19px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 19px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 19px 0px rgba(0,0,0,0.1); border: none; } table.share_status.dashboard { border: none; } table.disk_status thead tr:first-child td, table.share_status thead tr:first-child td { background-color: #474747; } table.disk_status tbody tr:nth-child(even), table.share_status tbody tr:nth-child(even) { background-color: #19271b; } table.disk_status thead tr:last-child, table.share_status thead tr:last-child { border: none; } table.array_status td.line { border-top: 1px solid #3B524B; } table tbody tr.tr_last { background-color: #3B524B; } div.user-list { border: none; border-radius: 0; background-color: #3B5249; } table.tablesorter thead tr .tablesorter-headerAsc, table.tablesorter thead tr .tablesorter-headerDesc { background-color: #3B524A; } table.tablesorter tbody tr:nth-child(even) { background-color: #435E54; } table.tablesorter thead tr { border-bottom: #3B5249 1px solid; } table.tablesorter thead tr th { background-color: #3B5249; } .ca_holder { background-color: #3B5248 !important; border: none !important; border-radius: 0 !important; } .disabledIcon { color: #8FBCAA; } div.tab [type=radio]:checked+label { border: 1px solid #8FBCAA; } div.tab [type=radio]+label { border-radius: 0; } div.tab [type=radio]+label:hover { border: 1px solid #8FBCA8; } div.tab [type=radio]+label { background-color: #3B524A; } .dropdown-menu { background-color: #D8E9E4; border: 1px solid #D8E9E1; border-radius: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .dropdown-menu .divider { background-color: transparent; border-bottom: none; } .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a { color: #2E4036; text-decoration: none; background-color: #ECF4F1; background-image: none; background-image: none; background-image: none; } .dropdown-menu a { color: #2E4037; } .usage-bar>span { display: block; height: 100%; text-align: right; border-radius: 0; color: #2E4037; background-color: #88D0A5; box-shadow: none; } .usage-bar { float: left; height: 2rem; line-height: 2rem; width: 14rem; padding: 1px 1px 1px 2px; margin: 8px 12px; border-radius: 0; background-color: #5EAC67; box-shadow: none; } #nav-block #nav-item.active:after { background-color: #88D0A8; } I've had it safely stored in Google Keep in case of something like this happening, and I haven't changed the code since. When I paste it into the custom CSS field in the theme settings page and press apply, nothing happens. I'm stuck on the ugly default theme with the white banner and grey background, no matter what I do. Even trying to change individual colors has absolutely no effect. How can I fix this?? Quote Link to comment
KnifeFed Posted July 23, 2021 Share Posted July 23, 2021 5 hours ago, Corvus said: How can I fix this?? Just reboot your server or re-install the plugin. Quote Link to comment
Corvus Posted July 24, 2021 Share Posted July 24, 2021 6 hours ago, KnifeFed said: Just reboot your server or re-install the plugin. That fixed it. Any idea why this happens every single time this plugin is updated? Goddamn it's annoying. Quote Link to comment
KnifeFed Posted July 29, 2021 Share Posted July 29, 2021 On 7/24/2021 at 3:48 AM, Corvus said: That fixed it. Any idea why this happens every single time this plugin is updated? Goddamn it's annoying. I have no idea why it happens. The plugin hasn't seen a commit in over 1½ years so I'm not sure if it's abandoned. Quote Link to comment
NYSTAGMO Posted July 29, 2021 Share Posted July 29, 2021 Uninstalled it finally, tired of having to restart a service, or even the physical server to make it work, time to use some browser extension that does it. Quote Link to comment
Corvus Posted July 30, 2021 Share Posted July 30, 2021 So that's the only option we have to change the colors of the Unraid UI then? A broken plugin that hasn't been updated in 1.5 years that needs constant reboots? Quote Link to comment
Squid Posted July 30, 2021 Share Posted July 30, 2021 9 hours ago, Corvus said: So that's the only option we have to change the colors of the Unraid UI then? A broken plugin that hasn't been updated in 1.5 years that needs constant reboots? I wouldn't go so far as to say that it's broken. Simply that it's how Limetech decided to handle the MyServer's coding (completely their prerogative). Now, you do have to bear in mind that regardless of how you think of what this plugin does, it is a hack on the system. The base OS does support other custom themes. You just have to create suitably named files, instead of modifying / injecting CSS into every page. 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.