Unraid Design fragen [ Custom Design ]


Sakashi

Recommended Posts

Moin meine lieben, 

ich hab da ein kleines "problemchen" mit meinem Custom Design für Unraid. 

 

Hier meine Custom CSS:

 

Spoiler
#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: #0062aa;
    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: #0062aa;
}
table.disk_status thead tr:first-child td {
    font-size: 1.4rem;
    color: #0062aa;
}
.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: #0062aa;
    font-size: large;
}
table.tablesorter thead tr th {
    font-weight: 700;
    font-size: 1.3rem;
}
.fa-sort-alpha-asc:before {
    color: #ffffff;
}
#searchBox {
    color: #0062aa !important;
    font-size: medium;
}
.fa-unsorted:before, .fa-sort:before {
    color: #ffffff;
}
.awesomplete {
    color: #0062aa !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 0px 0px rgb(255, 255, 255) !important;
    padding: 10px !important;
}
.awesomplete mark {
    background: #f2f2f2 !important;
}
.caHighlight {
    color: #00ddfe;
}
.fa-hdd-o:before {
    content: "\f019";
}

.usage-disk.sys>span {
    background-color: #0062aa;
}
table.share_status.dashboard td div.section {
    color: #0062aa;
    font-size: inherit;
}
table.share_status.dashboard tr>td.next {
    border-top: 1px solid #0062aa40;
}
.ca_holderDocker {
    box-shadow: #ffffff -1px -1px 5px 0px;
    margin-top: 20px !important;
}
.ca_holderDocker::before {
    color: #0062aa59 !important;
}
.ca_holderPlugin::before {
    color: #0062aa6e !important;
}
.ca_fa-install::before {
    color: #00ddfe;
}
.Header {
    color: #0062aa;
}
.selectedMenu {
    color: #0062aa !important;
}
.ca_templatesDisplay {
    padding-left: 20px;
}
#title {
    margin: 20px 10px 32px 10px !important;
    padding: 8px 10px !important;
    background: linear-gradient(to right, #0062aac7, #00ddfed1) !important;
    border-radius: 5px;
}
.fa-list:before {
    color: #ffffff;
}
.fa-dashboard:before, .fa-tachometer:before {
    color: #ffffff;
}

.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;
}

.fa-power-off:before {
    color: #00ddfe;
}
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: #0062aa;
}
table.tablesorter thead tr .tablesorter-header {
    color: #f2f2f2;
    background-color: #00ddfe;
}
div.tab [type=radio]:checked+label {
    background-color: #00ddfe;
    color: #0062aa;
    box-shadow: #888888 0px 0px 0px 0px;
}
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: ##00ddfe !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, #0062aa, #00ddfe) !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,#0062aa 0,#00ddfe) 0 0 no-repeat,linear-gradient(90deg,#0062aa 0,#00ddfe) 0 100% no-repeat,linear-gradient(0deg,#0062aa 0,#00ddfe) 0 100% no-repeat,linear-gradient(0deg,#0062aa 0,#00ddfe) 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,#0062aa 0,#00ddfe) 0 0 no-repeat,linear-gradient(90deg,#0062aa 0,#00ddfe) 0 100% no-repeat,linear-gradient(0deg,#0062aa 0,#00ddfe) 0 100% no-repeat,linear-gradient(0deg,#0062aa 0,#00ddfe) 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,#0062aa 0,#00ddfe) 0 0 no-repeat,linear-gradient(90deg,#0062aa 0,#00ddfe) 0 100% no-repeat,linear-gradient(0deg,#0062aa 0,#00ddfe) 0 100% no-repeat,linear-gradient(0deg,#0062aa 0,#00ddfe) 100% 100% no-repeat !important;
}
div.jGrowl div.jGrowl-closer {
    width: 400px;
    color: #0062aa !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: #0062aa !important;
}
.upgrade_notice {
    color: #0062aa !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: #0062aa;
}
#footer {
    color: #0062aa !important;
}

a:hover {
    transform: translate3d(0px, 0px, 0px);
    color: #00ddfeac7 !important;
}
#sb-title, #sb-title-inner {
    background: #1b1b1b !important;
    color: #00ddfeac7 !important;
    box-shadow: #ffffff 0px 0px 0px 0px !important;
    text-transform: uppercase;
}
#sb-overlay {
    opacity: 0.7 !important;
}
div.user-list:hover {
    transform: scale(1.1) !important;
    color: #0062aa !important;
    
}
div.Panel:hover {
     transform: scale(1.1) !important;
     color: #0062aa !important;
}
.fa-th:before {
    content: "\f0e7";
}

 

 

Ich habe das Problem wenn ich oberhalb des Menüs mit der Maus ziehe (hover) habe ich ein orangenen Strich (Akzent) der eig. blau sein sollte.
Leider finde ich auch nicht wo ich das Regel. Ich kenne mich damit aber auch kaum aus. 

857887561_unknown(1).png.3c037cec615bdf328df7cba46a0db485.png

 

Das 2. Problem habe ich wenn ich mir die Diskinfos anzeigen lasse. Dort habe ich beim rüber ziehen der Maus der verschiedene Menüpunkte ein Orangenen Rand der mir auch missfällt. 

ApplicationFrameHost_vN1lcO4VQI.png.cc91aefd86105d73c22685a096f26193.png

Habt ihr da ideen zu bzw. kennt ihr euch damit aus?


Anbei ein paar Bilder.

 

Liebe Grüße
Patrick

unknown.png

Edited by Sakashi
Link to comment
  • Sakashi changed the title to Unraid Design fragen [ Custom Design ]

Hat sich erledigt, ich habe es nun anders gelöst und nutze ein Template von theme.park und habe alles angepasst wie ich es wollte. 

Wer Interesse hat hier die CSS für Theme Engine: https://pastebin.com/gE2Mh0ir

Ich habe die CSS von theme.park so zusammengebaut das es komplett offline ohne Server läuft. Einfach Copy and Paste in die Theme Engine einfügen. Wer die grünen Kugeln beim laufwerk auch blau anstelle grün haben möchte, kann es über den Theme Engine selbst tun, der Hex Code dafür ist: #0062aa (dunkel blau) 

Anbei ein paar Bilder.

chrome_g4QLU3z1kZ.thumb.png.cc240b928c065355460ace89645037fc.pngchrome_G9fqST9D4Y.thumb.png.42f7ed4ac19f5225bf68fd24c3f1ebef.pngchrome_6dcqu7ktlk.thumb.png.71cf9a33db0e4614dea09f0a2a82575b.pngchrome_1ay0KGFdeR.thumb.png.e9bdb792d11782324dcec05250db30f7.pngchrome_gqamhdPaPg.thumb.png.b443181a52753dabcc25b36746a02aa8.pngchrome_jzdDaRv2na.thumb.png.c3ff6f706bfecaa6a78a685fb5fbd806.pngchrome_mjGYvVTMny.thumb.png.f2f806d278a630966aefd8b9060d82a7.png

 

 

vielen dank an theme.park für die gute Grundlage. Ohne diese hätte ich das Theme so nicht hinbekommen. 

Liebe Grüße
Patrick

  • Like 2
Link to comment
On 7/1/2022 at 6:19 PM, Sakashi said:

Anbei ein paar Bilder.

 

Ist mir zwar etwas zu blau lastig, aber hübsch und sieht nach einiger Mühe aus!

Gut gemacht!

 

Sowas habe ich auch noch irgendwann vor, aber erst einmal bin ich imemr noch im grundsätzlichen Aufbau meiner Systeme.

 

Teletha Testarossa (1st System) und Shima Katase (2nd System) lassen Deine Raphtalia grüßen. :)

 

  • Like 1
Link to comment
4 hours ago, Revan335 said:

Wie hast du es geschafft alles Lokal anzupassen?

Das will ich noch anpassen bei mir, dann hab ich auch nen Lokal betriebenen Themed Loginscreen abseits des Unraid Themes wie du.

Du musst an sich nur 3 css files finden und in einer zusammen packen, einmal die css/defaults/transparent.css dann css/base/unraid/unraid-base.css und /css/community-theme-options/dein_theme.css .  die letzt genannte css kommt ganz nach oben in der css Datei, danach den Inhalt der transparent.css und dann den Rest von der unraid-base.css. Das passt dann 1 zu 1 einfach in die Theme Engine rein.

3 hours ago, DataCollector said:

 

Ist mir zwar etwas zu blau lastig, aber hübsch und sieht nach einiger Mühe aus!

Gut gemacht!

 

Sowas habe ich auch noch irgendwann vor, aber erst einmal bin ich imemr noch im grundsätzlichen Aufbau meiner Systeme.

 

Teletha Testarossa (1st System) und Shima Katase (2nd System) lassen Deine Raphtalia grüßen. :)

 

Danke dir :) Ja es war viel Arbeit und habe das Theme an sich um den Banner gebaut, daher so viel Blau. Ich liebe Anime, nur deswegen habe ich Unraid, ich weiß sonst nicht mehr wohin damit.
Leider habe ich wohl ein Bug gefunden wo ein Button nicht gethemed ist. Leider weiß ich aber das der Button zu einer css Gruppe gehört wo andere Buttons der gleichen Gruppe gethemed sind. Daher habe ich wenn ich ein Docker aktualisiere leider immer 1 Button in original Orange... regt etwas auf. Werde ich wohl auch bei Unraid melden. :(

 

 

Vielleicht kennt sich aber auch von euch jemand besser damit aus? :D
Anbei ein Paar Bilder... 
Liebe Grüße
Patrick

chrome_5pma2XFr66.png

chrome_zQumuRIeWO.png

 

An sich müssten unter Background die Werte stehen wie in Nodepad++. Man sieht aber ganz gut das dort immer noch die standard styles benutzt werden von unraid obwohl die Gruppen passen. ( Alle anderen Buttons sind ja gethemed)

notepad++_OB3aRxt1Ag.png

Edited by Sakashi
Link to comment
22 minutes ago, Sakashi said:

Ich liebe Anime, nur deswegen habe ich Unraid, ich weiß sonst nicht mehr wohin damit.

Da bist du nicht der einzige. @DataCollectorScheint es ebenfalls zu sein. Dann wären wir schon zu dritt. Hast du so viele das du die alle auf deinen Server ablegst bzw. ablegen musst?

 

Meiner spiegelt zwar was anderes wieder, aber wofür hat man ein Backup System. Das sucht auch noch nach Theming und Benennung. Wenn es denn angekommen und eingerichtet ist.

Link to comment

Aktuell besitze ich 250 Stück. Vieles wird gestreamt, was ich mag wird dann gekauft :D

 

Naja aktuell nerven mich 2 kleine Bugs im Theme, die ich so nicht lösen kann, weil ich dafür nichts kann :( (Designtechnisch etwas doof vom Plugin Entwickler gemacht)

Wegen Anime Austausch können wir das auch gerne per PN austragen. :D

 

Ich schaue übrigens seit 18 Jahren Anime.

 

Gute Nacht.

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.