[Plugin] Theme Engine - a webGui styler


Recommended Posts

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 by thering1975
  • Like 1
Link to comment

would it be possible to set a background image and maybe set colors using RGBa?

so to be able to achieve something like this:
bg.thumb.jpg.35a0983e37deb0489731a73f372e32b0.jpg

 

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 :D 

Anyway, thanks for the great addin

Link to comment
  • 4 weeks later...
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?

Link to comment
  • 3 weeks later...

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

Link to comment
  • 1 month later...
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!

Link to comment
  • 1 month later...

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.

 

 

NordDark.JPG

Link to comment
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?

Link to comment
  • 2 weeks later...
  • 2 weeks later...

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 by kennymc.c
Link to comment
  • 3 weeks later...
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.

Link to comment
  • 3 weeks later...
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.

Link to comment
  • 1 month later...
  • 3 weeks later...

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 by thering1975
Link to comment

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

Link to comment
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.

Link to comment

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.