Sakashi Posted July 1, 2022 Share Posted July 1, 2022 (edited) 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. 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. Habt ihr da ideen zu bzw. kennt ihr euch damit aus? Anbei ein paar Bilder. Liebe Grüße Patrick Edited July 1, 2022 by Sakashi Quote Link to comment
Sakashi Posted July 1, 2022 Author Share Posted July 1, 2022 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. vielen dank an theme.park für die gute Grundlage. Ohne diese hätte ich das Theme so nicht hinbekommen. Liebe Grüße Patrick 2 Quote Link to comment
Revan335 Posted July 2, 2022 Share Posted July 2, 2022 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. 1 Quote Link to comment
DataCollector Posted July 2, 2022 Share Posted July 2, 2022 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. 1 Quote Link to comment
Sakashi Posted July 2, 2022 Author Share Posted July 2, 2022 (edited) 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? Anbei ein Paar Bilder... Liebe Grüße Patrick 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) Edited July 2, 2022 by Sakashi Quote Link to comment
Revan335 Posted July 2, 2022 Share Posted July 2, 2022 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. Quote Link to comment
Sakashi Posted July 2, 2022 Author Share Posted July 2, 2022 Aktuell besitze ich 250 Stück. Vieles wird gestreamt, was ich mag wird dann gekauft 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. 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.