[CSS] Black OMV GUI v5

    • OMV 3.x

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • [CSS] Black OMV GUI v5

      Create a file /var/www/openmediavault/css/theme-custom.css and put inside this:

      CSS Source Code: theme-custom.css

      1. /**
      2. * OMV Black v5
      3. * by DeepB
      4. */
      5. .x-panel-default {
      6. border-color: #000;
      7. }
      8. .x-grid-cell-inner {
      9. padding-top: 2px;
      10. padding-bottom: 2px;
      11. }
      12. .x-panel-header-default-horizontal.x-header-noborder {
      13. padding: 6px 16px 6px 16px;
      14. }
      15. .x-form-item-label-default {
      16. padding-top: 0px;
      17. vertical-align: middle;
      18. }
      19. .x-column-header-inner {
      20. padding: 2px 10px 2px;
      21. }
      22. .style {
      23. height: 24px;
      24. }
      25. .x-window-header-default-top {
      26. padding: 2px 14px 2px 14px;
      27. }
      28. .x-grid-item {
      29. font: 400 13px/15px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
      30. }
      31. .x-tab-default-top {
      32. padding: 0px 18px 0px 18px;
      33. }
      34. .x-btn-default-toolbar-small {
      35. padding: 3px 7px 3px 7px;
      36. }
      37. .x-panel-header-default-horizontal {
      38. padding: 8px 15px 7px;
      39. }
      40. #header {
      41. height: 60px;
      42. }
      43. #headerlogo {
      44. margin-top: 10px;
      45. }
      46. .x-fieldset .x-fieldset-header {
      47. padding: 2px 5px 2px 5px;
      48. }
      49. element.style {
      50. padding: 6px 5px 0px 5px;
      51. }
      52. .x-workspace-node-tree .x-panel-header-default {
      53. border: 0px;
      54. background-color: #000;
      55. }
      56. #workspace-node-tree-1019_header-title-textEl {
      57. background: url(/images/header_logo.svg), none;
      58. background-size: 100% 100%;
      59. background-repeat: no-repeat;
      60. background-color: #000;
      61. background-position: center left;
      62. }
      63. #tool-1064-toolEl {
      64. background-color: #000;
      65. }
      66. .login-page,
      67. .shutdown-page {
      68. background: #000;
      69. }
      70. .shutdown-page {
      71. background: #000;
      72. }
      73. div#header {
      74. background: #000;
      75. display: none;
      76. }
      77. a,
      78. .x-form-item-label-text {
      79. color: #AAA;
      80. }
      81. .x-panel,
      82. .x-panel-body,
      83. .x.panel-bodyWrap,
      84. .x-splitter,
      85. .x-workspace-navigation-toolbar {
      86. color: #ddd;
      87. background-color: #000;
      88. }
      89. .x-panel,
      90. .x-panel-body,
      91. .x-form-fieldinfo {
      92. color: #FFF;
      93. background: transparent;
      94. }
      95. .x-container {
      96. color: #fff;
      97. border-color: #0000;
      98. background-color: transparent;
      99. }
      100. .x-toolbar,
      101. .x-toolbar-footer {
      102. padding: 6px 0 6px 6px;
      103. border-style: solid;
      104. border-color: #000;
      105. border-width: 0;
      106. background-image: none;
      107. background-color: #000;
      108. }
      109. .x-toolbar-text,
      110. .x-toolbar-text-default {
      111. color: #ddd;
      112. background: transparent;
      113. background-color: transparent;
      114. }
      115. .x-column-header {
      116. color: #ddd;
      117. background: #000;
      118. }
      119. .x-column-header-over {
      120. color: #000;
      121. }
      122. .x-column-header.x-column-header-focus {
      123. color: #fff;
      124. }
      125. .x-form-text-default {
      126. color: #ddd;
      127. background-color: #000;
      128. }
      129. .x-form-item-default.x-form-readonly input,
      130. .x-form-item-default.x-form-readonly textarea {
      131. opacity: .6;
      132. }
      133. .x-tab-default {
      134. color: #ddd;
      135. }
      136. .x-grid-item {
      137. color: #ddd;
      138. background: #333;
      139. }
      140. .x-form-display-field,
      141. .x-form-cb-label,
      142. .x-grid-tree-node-text {
      143. color: #AAA;
      144. }
      145. .x-tab.x-tab-active.x-tab-default {
      146. color: #000;
      147. background: #333;
      148. }
      149. .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
      150. color: #fff;
      151. }
      152. .x-tab.x-tab-active.x-tab-default,
      153. .x-tab-focus.x-tab-default,
      154. .x-tab-focus.x-tab-active.x-tab-default {
      155. border-color: #00751B;
      156. outline: 5px #00751B;
      157. }
      158. .x-tab-bar-body {
      159. color: #FFF;
      160. background: #000;
      161. }
      162. .x-panel-header {
      163. color: #ddd;
      164. background: #222; /*#445665;*/
      165. }
      166. .x-workspace-node-view-category-items .x-item-over,
      167. .x-workspace-node-view-category-header .x-item-over {
      168. color: #EEE;
      169. background: #000; /*#829bad;*/
      170. }
      171. .x-toolbar-applycfg {
      172. background: #C60000;
      173. }
      174. .x-fieldset-header-default > .x-fieldset-header-text {
      175. color: #ddd;
      176. padding: 0px 12px 6px 12px;
      177. }
      178. .x-workspace-navigation-toolbar.x-toolbar-default {
      179. background-color: #000;
      180. }
      181. .x-grid-header-ct {
      182. background-color: #000;
      183. }
      184. .x-grid-item-alt {
      185. color: #ddd;
      186. background: #222; /*#445665;*/
      187. }
      188. .x-grid-item-focused {
      189. color: #FFF;
      190. border-color: #AAA;
      191. background-color: #00751B;/*#6C8191;*/
      192. }
      193. .x-grid-item-over {
      194. color: #FFF;
      195. border-color: #AAA;
      196. background-color: #000;/*#41f080;*/
      197. }
      198. .x-btn-inner-default-small,
      199. .x-btn-default-small,
      200. .x-btn.x-btn-pressed.x-btn-default-small ,
      201. .x-btn-over.x-btn-default-small {
      202. border-color: #fbfbfb;
      203. background-color: #333;
      204. }
      205. .x-btn-focus.x-btn-default-small {
      206. border-color: #00751B;
      207. background-color: #333;
      208. }
      209. .x-btn-focus.x-btn-over.x-btn-default-toolbar-small,
      210. .x-btn-focus.x-btn-pressed.x-btn-default-toolbar-small,
      211. .x-btn-focus.x-btn-default-toolbar-small {
      212. box-shadow: #00751B 0 1px 0px 0 inset,
      213. #00751B 0 -1px 0px 0 inset,
      214. #00751B -1px 0 0px 0 inset,
      215. #00751B 1px 0 0px 0 inset;
      216. }
      217. .x-item-over,
      218. .x-btn-default-toolbar-small {
      219. -webkit-filter: invert(1) hue-rotate(180deg);
      220. filter: invert(1) hue-rotate(180deg);
      221. }
      222. .x-menu-item-icon {
      223. -webkit-filter: invert(1) hue-rotate(180deg);
      224. filter: invert(1) hue-rotate(180deg);
      225. }
      226. .x-btn-icon-el-default-small {
      227. -webkit-filter: invert(1) hue-rotate(180deg);
      228. filter: invert(1) hue-rotate(180deg);
      229. }
      230. .x-window-body-default,
      231. .x-window-header-default {
      232. color: #fff;
      233. border-color: #0000;
      234. background-color: #000;
      235. }
      236. .x-form-cb-input {
      237. position: absolute;
      238. margin: 0;
      239. padding: 0;
      240. border: 0;
      241. top: 0;
      242. left: 0;
      243. width: 100%;
      244. height: 100%;
      245. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      246. opacity: 0;
      247. }
      248. /*
      249. .x-btn.x-btn-pressed.x-btn-default-small {
      250. border-color: #FBFBFB;
      251. background-color: #000;
      252. }
      253. */
      254. .x-tree-elbow-plus,
      255. .x-tree-elbow-end-plus,
      256. .x-tree-icon,
      257. .x-tree-icon-parent,
      258. .x-tree-icon-parent-expanded,
      259. .x-tree-icon-leaf,
      260. .x-grid-tree-node-expanded .x-tree-elbow-plus,
      261. .x-grid-tree-node-expanded .x-tree-elbow-end-plus {
      262. color: #fff;
      263. }
      264. .x-tree-icon-custom {
      265. background-size: 16px 16px;
      266. -webkit-filter: invert(1) hue-rotate(180deg);
      267. filter: invert(1) hue-rotate(180deg);
      268. }
      269. .thumb {
      270. -webkit-filter: invert(1) hue-rotate(180deg);
      271. filter: invert(1) hue-rotate(180deg);
      272. }
      273. .thumb-wrap {
      274. border-color: #FFFFFF;
      275. background-image: none;
      276. background-color: #000000;
      277. }
      278. .x-form-invalid-under-default {
      279. color: #ff5335;
      280. font: 300 17px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
      281. font-weight: bold;
      282. }
      283. .x-message-box .x-window-body {
      284. background-color: #000;
      285. }
      286. .x-grid-cell-booleaniconcolumn-switch-true,
      287. .x-grid-cell-booleaniconcolumn-switch-false {
      288. -webkit-filter: invert(1) hue-rotate(195deg);
      289. filter: invert(1) hue-rotate(195deg);
      290. }
      291. .x-form-checkbox-default {
      292. -webkit-filter: invert(1) hue-rotate(195deg);
      293. filter: invert(1) hue-rotate(195deg);
      294. }
      295. .x-form-trigger-default {
      296. border-color: #FFFFFF;
      297. background-image: none;
      298. background-color: #000000;
      299. }
      300. .x-form-trigger-default.x-form-trigger-over {
      301. border-color: #000000;
      302. background-image: none;
      303. background-color: #DEDEDE;
      304. }
      305. .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
      306. border-color: #00751B;
      307. }
      308. .x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
      309. border-color: #cc3300;
      310. }
      311. .x-boundlist-item {
      312. border-color: #000;
      313. background-color: #000;
      314. color: #FFF;
      315. }
      316. .x-boundlist-item-over {
      317. border-color: #FFFFFF;
      318. background-color: #FFF;
      319. color: #000;
      320. }
      321. .x-progress-bar {
      322. background-color: #000;
      323. background-image: none;
      324. border-top-color: #000;
      325. border-bottom-color: #000;
      326. border-right-color: #000;
      327. }
      328. .x-progress-default {
      329. border-width: 0px;
      330. }
      331. .x-progress-default {
      332. background-color: #ccc;
      333. }
      334. .x-progress-bar-default {
      335. background-color: #00751B;
      336. background-image: none;
      337. }
      338. .x-grid-cell-booleaniconcolumn-led-gray,
      339. .x-grid-cell-booleaniconcolumn-enabled-false{
      340. -webkit-filter: invert(1) hue-rotate(180deg);
      341. filter: invert(1) hue-rotate(180deg);
      342. }
      343. .x-progress-default {
      344. background-color: #000;
      345. border-width: 0;
      346. height: 24px;
      347. border-color: #000;
      348. border-style: solid;
      349. }
      350. .x-progress-default .x-progress-text-back {
      351. color: #e4e4e4;
      352. line-height: 24px;
      353. }
      354. .x-panel-header-default .x-tool-tool-el {
      355. background-color: #000;
      356. }
      357. .x-form-trigger-default {
      358. background: #000;
      359. color: #848484;
      360. }
      361. .x-boundlist-item-over {
      362. background: #222;
      363. border-color: #00751B;
      364. color: #FFF;
      365. }
      366. .x-boundlist-selected {
      367. background: #00751B;
      368. border-color: #00751B;
      369. color: #000;
      370. font-weight: bold;
      371. }
      372. .workspace-page,
      373. .shutdown-page {
      374. background: #000;
      375. }
      376. .x-form-spinner-default {
      377. background-color: #000;
      378. color: #919191;
      379. }
      380. /*
      381. .x-menu-item-link,
      382. .x-menu-item-default,
      383. .x-menu-item-icon {
      384. -webkit-filter: invert(1) hue-rotate(180deg);
      385. filter: invert(1) hue-rotate(180deg);
      386. }
      387. */
      388. .x-menu-item-focus,
      389. .x-menu-item-active {
      390. background-color: ;
      391. border-color: #00751B;
      392. color: #000;
      393. }
      394. .x-menu-body-default {
      395. background: #000;
      396. padding: 0;
      397. }
      398. .x-menu-item-text-default {
      399. color: #fff;
      400. }
      401. .x-menu-item-default.x-menu-item-focus,
      402. .x-menu-item-default.x-menu-item-active {
      403. background-color: #00751B;
      404. }
      405. .x-menu-item-default-menubar.x-menu-item-focus,
      406. .x-menu-item-default-menubar.x-menu-item-active {
      407. background-color: #00751B;
      408. }
      409. .x-progress-default .x-progress-bar-default {
      410. background-color: #00751B;
      411. background-image: none;
      412. }
      413. .x-panel-rrdgraph,
      414. .x-grid-group-hd {
      415. -webkit-filter: invert(1) hue-rotate(180deg);
      416. filter: invert(1) hue-rotate(180deg);
      417. }
      418. .x-window-header-default .x-tool-img {
      419. background-color: #000;
      420. }
      421. .x-fieldset {
      422. background: #333;
      423. }
      424. body.x-border-layout-ct, div.x-border-layout-ct {
      425. background-color: #000;
      426. }
      427. .x-box-aboutbox {
      428. margin: 15px;
      429. text-align: left;
      430. padding: 5px 10px;
      431. background-color: #000;
      432. font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;
      433. color: #fff;
      434. border-radius: 4px;
      435. }
      436. .x-box-aboutbox a {
      437. text-decoration: none !important;
      438. color: #00751B;
      439. font-weight: bold;
      440. }
      441. /* Uncomment the following section if you would like to hide the logo */
      442. /*
      443. #header {
      444. display: none;
      445. }
      446. .login-page .product-logo,
      447. .shutdown-page .product-logo,
      448. .error-page .product-logo {
      449. height: 0px;
      450. width: 0px;
      451. }
      452. */
      Display All
      And enjoy the pure spice of darkness.
      Great on Android devices.
      Images
      • omv-login.png

        14.56 kB, 581×369, viewed 125 times
      • omv.png

        86.61 kB, 1,357×373, viewed 160 times

      The post was edited 7 times, last by DeepB: Edit: minor fixes thx @Nibb31 for Shrink OMV Gui Edit v4 CSS ().

    • Mit diesem Tool können sie einfach zwischen den GUI-Theme Switchen
      With this tool, you can easily switch between the GUI theme
      Zum instrallieren:
      To install:

      Falls GIT nicht installiert:
      If GIT is not installed:

      apt install git

      Source Code

      1. git clone https://github.com/Wolf2000Pi/omv-theme.git && cd omv-theme && chmod +x install-omv-theme.sh && ./install-omv-theme.sh && cd
      Zum Deinstallieren:
      To uninstall:

      Source Code

      1. rm -r omv-theme
      2. rm -r /usr/bin/omv-theme
      Zum Starten:
      To Start:

      Source Code

      1. omv-theme
      Ich möchte mich für die mithilfe auch Bedanken bei @The Master & @DeepB für [CSS] Black OMV GUI v5, https://forum.openmediavault.org/index.php/Thread/18641-CSS-Black-OMV-GUI-v5/

      I would also like to thank for the help with @The Master & @DeepB for [CSS] Black OMV GUI v5, https://forum.openmediavault.org/index.php/Thread/18641-CSS-Black-OMV-GUI-v5/
      forum-bpi.de Visit on and help us, The Germany Forum :thumbsup:
      github.com/Wolf2000Pi
      Banana Pi /Armbian 3.4.109 / Openmediavault 2.x
      Banana Pi /Armbian 4.11.5-sunxi / Openmediavault 3.0.xx (Test)
      Dell Inspiron One 2205 | Openmediavault 3.0.xx / Kernel 4.7 (Test)

      The post was edited 4 times, last by The Master ().

    • I'd like to try the above but when I try to do the installation command line I get:

      -bash: git: command not found


      Do I need to install something else to enable "git"?

      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.90 Erasmus
      ThinkServer TS140, 12GB ECC / 32GB USB3.0
      4TB SG+4TB TS ZFS mirror/ 3TB TS

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • Sorry 'bout that. You know,, the NOOB thing.
      (I just got a quick primer on what git and github are.)

      Thanks
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.90 Erasmus
      ThinkServer TS140, 12GB ECC / 32GB USB3.0
      4TB SG+4TB TS ZFS mirror/ 3TB TS

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • David B wrote:

      As @The Master and @ryecoaaron already know, I started work on my first plugin several weeks ago that would allow users to easily switch between the new and old OMV themes. After I got that done, my plan was to implement theme customization, but I never even finished the basic plugin because I've been too busy. Perhaps when my schedule clears up I will give it another shot.
      Go Dave B! :thumbup:
      (I saw a screen shot provided by The Master.)

      While some might consider a theme switcher to be "fluff", I see real value in it. It's this kind of thing that gets the dirty, unwashed masses :rolleyes: to adopt OMV. It let's a new user make it, "their own".
      (And a few extra donations to keep things rolling doesn't hurt anything either.)

      As WastlJ mentioned in another thread - being able to switch to a high contrast, high visibility theme, easily, would be great for the visually impaired. That makes a Theme Switcher plugin a utility item.

      Cheers
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.90 Erasmus
      ThinkServer TS140, 12GB ECC / 32GB USB3.0
      4TB SG+4TB TS ZFS mirror/ 3TB TS

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119

      The post was edited 1 time, last by flmaxey: edit ().

    • flmaxey wrote:

      Go Dave B! :thumbup: (I saw a screen shot provided by The Master.)

      While some might consider a theme switcher to be "fluff", I see real value in it. It's this kind of thing that gets the dirty, unwashed masses :rolleyes: to adopt OMV. It let's a new user make it, "their own".
      (And a few extra donations to keep things rolling doesn't hurt anything either.)

      As WastlJ mentioned in another thread - being able to switch to a high contrast, high visibility theme, easily, would be great for the visually impaired. That makes a Theme Switcher plugin a utility item.

      Cheers
      Thanks, but I am not the one who wrote this. I had plans to, but I ended up ditching the theme changer in favor of another project, which I've kind of ditched at this point as well since there has been very little interest in it. The only person who I know to be using it is @The Master, and myself of course. Perhaps if it gains more popularity I will update it some more. I'm not even sure if @ryecoaaron has even added it to the experimental plugins repository.
    • David B wrote:

      I'm not even sure if @ryecoaaron has even added it to the experimental plugins repository.
      Are you talking about the code I helped with? I thought that was just a skeleton/testing plugin?
      omv 4.0.11 arrakis | 64 bit | 4.13 backports kernel | omvextrasorg 4.1.0
      omv-extras.org plugins source code and issue tracker - github.com/OpenMediaVault-Plugin-Developers

      Please don't PM for support... Too many PMs!
    • David B wrote:

      Thanks, but I am not the one who wrote this. I had plans to, but I ended up ditching the theme changer in favor of another project, which I've kind of ditched at this point as well since there has been very little interest in it. The only person who I know to be using it is @The Master, and myself of course. Perhaps if it gains more popularity I will update it some more. I'm not even sure if @ryecoaaron has even added it to the experimental plugins repository.
      It can't become more popular if it doesn't exist where it can be had by the dirty, unwashed masses. :rolleyes: (Opps, I did it again.)

      Present company excluded (and with thanks to Wolf2000 for a option that works), I don't understand the reluctance from some quarters to develop something like this. The very fact that OMV has rolled up a bundle of NAS functionality, into a GUI, has made it very popular. Similarly, facilitating the alteration, tweaking, etc., of the GUI, to suit a users needs (or even wants), will add to OMV's popularity. There's simply no doubt about it.

      Along similar lines, when they hit the market, I thought that PC cases with clear side panels, neon lights inside and fans with multicolored LED's in the blades were, in a word, "ridiculous". But that's just one opinion and who am I to judge what another may want or need? Meanwhile, the makers of these products where selling them in quantity.

      Well, I've beat on this particular drum enough. I'll get off the soap box.
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.90 Erasmus
      ThinkServer TS140, 12GB ECC / 32GB USB3.0
      4TB SG+4TB TS ZFS mirror/ 3TB TS

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • ryecoaaron wrote:

      David B wrote:

      I'm not even sure if @ryecoaaron has even added it to the experimental plugins repository.
      Are you talking about the code I helped with? I thought that was just a skeleton/testing plugin?
      The one you helped with was a skeleton plugin. The one I am talking about is the GoodSync plugin.

      flmaxey wrote:

      It can't become more popular if it doesn't exist where it can be had by the dirty, unwashed masses. :rolleyes: (Opps, I did it again.)
      Well it's not in the repository, but I have provided a download link to the deb file for people to upload to their servers.
    • David B wrote:

      The one I am talking about is the GoodSync plugin.
      Oh. I thought you wrote a theme-changing plugin. You should start a goodsync thread in the developer forum so we can get that added to the repo.
      omv 4.0.11 arrakis | 64 bit | 4.13 backports kernel | omvextrasorg 4.1.0
      omv-extras.org plugins source code and issue tracker - github.com/OpenMediaVault-Plugin-Developers

      Please don't PM for support... Too many PMs!
    • ryecoaaron wrote:

      Oh. I thought you wrote a theme-changing plugin. You should start a goodsync thread in the developer forum so we can get that added to the repo.
      No. I ditched the theme-changing project because I thought it was too hard for a beginner. Where in the developer forum would you like me to post it? I have this post for it under "Third Party Plugins" already.

      The Master wrote:

      ryecoaaron wrote:

      ...we can get that added to the repo.
      good Idea (maybe to the testing repo)
      Yeah it's certainly not ready for the mainstream repo.