@thering1975 any chance you can share your css? Looks great.

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, 20205 yr by thering1975

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

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

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?

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

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!

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.

 

 

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!

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?

Is there any way you could make a login screen for Solarized Dark?

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, 20215 yr by kennymc.c

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.

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.

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.

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. 

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

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, 20214 yr by thering1975

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??

5 hours ago, Corvus said:

How can I fix this??

Just reboot your server or re-install the plugin.

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.

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.

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.

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?

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.