[CSS] Black OMV v4.x GUI

DeepB · Jun 15th 2017

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

CSS: theme-custom.css

/**
 * OMV Black v6
 * by DeepB
 */
.x-panel-default {
	border-color: #000;
}
.x-grid-cell-inner {
	padding-top: 2px;
	padding-bottom: 2px;
}
.x-panel-header-default-horizontal.x-header-noborder {
	padding: 6px 16px 6px 16px;
}
.x-form-item-label-default {
	padding-top: 0px;
	vertical-align: middle;
}
.x-column-header-inner {
	padding: 2px 10px 2px;
}
.style {
	height: 24px;
}
.x-window-header-default-top {
	padding: 2px 14px 2px 14px;
}
.x-grid-item {
	font: 400 13px/15px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}
.x-tab-default-top {
	padding: 0px 18px 0px 18px;
}
.x-btn-default-toolbar-small {
	padding: 3px 7px 3px 7px;
}
.x-panel-header-default-horizontal {
	padding: 8px 15px 7px;
}
#header {
	height: 60px;
}
#headerlogo {
	margin-top: 10px;
}
.x-fieldset .x-fieldset-header {
	padding: 2px 5px 2px 5px;
}
element.style {
	padding: 6px 5px 0px 5px;
}
.x-workspace-node-tree .x-panel-header-default {
	border: 0px;
	background-color: #000;
}
#workspace-node-tree-1019_header-title-textEl {
	background: url(/images/header_logo.svg), none;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: #000;
	background-position: center left;
}
#tool-1064-toolEl {
	background-color: #000;
}
.login-page,
.shutdown-page {
	background: #000;
}
.shutdown-page {
	background: #000;
}
div#header {
	background: #000;
	display: none;
}
a,
.x-form-item-label-text {
	color: #AAA;
}


.x-panel,
.x-panel-body,
.x.panel-bodyWrap,
.x-splitter,
.x-workspace-navigation-toolbar {
	color: #ddd;
	background-color: #000;
}
.x-panel,
.x-panel-body,
.x-form-fieldinfo {
	color: #FFF;
	background: transparent;
}
.x-container {
	color: #fff;
	border-color: #0000;
	background-color: transparent;
}
.x-toolbar,
.x-toolbar-footer {
	padding: 6px 0 6px 6px;
	border-style: solid;
	border-color: #000;
	border-width: 0;
	background-image: none;
	background-color: #000;
}
.x-toolbar-text,
.x-toolbar-text-default {
	color: #ddd;
	background: transparent;
	background-color: transparent;
}
.x-column-header {
	color: #ddd;
	background: #000;
}
.x-column-header-over {
	color: #000;
}
.x-column-header.x-column-header-focus {
    color: #fff;
}
.x-form-text-default {
	color: #ddd;
	background-color: #000;
}
.x-form-item-default.x-form-readonly input,
.x-form-item-default.x-form-readonly textarea {
	opacity: .6;
}
.x-tab-default {
	color: #ddd;
}
.x-grid-item {
	color: #ddd;
	background: #333;
}
.x-form-display-field,
.x-form-cb-label,
.x-grid-tree-node-text {
	color: #AAA;
}
.x-tab.x-tab-active.x-tab-default {
	color: #000;
	background: #333;
}
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
	color: #fff;
}
.x-tab.x-tab-active.x-tab-default,
.x-tab-focus.x-tab-default,
.x-tab-focus.x-tab-active.x-tab-default {
	border-color: #00751B;
	outline: 5px #00751B;
}
.x-tab-bar-body {
	color: #FFF;
	background: #000;
}
.x-panel-header {
	color: #ddd;
	background: #222; /*#445665;*/
}
.x-workspace-node-view-category-items .x-item-over,
.x-workspace-node-view-category-header .x-item-over {
	color: #EEE;
	background: #000; /*#829bad;*/
}
.x-toolbar-applycfg {
	background: #C60000;
}
.x-fieldset-header-default > .x-fieldset-header-text {
	color: #ddd;
	padding: 0px 12px 6px 12px;
}
.x-workspace-navigation-toolbar.x-toolbar-default {
	background-color: #000;
}
.x-grid-header-ct {
	background-color: #000;
}
.x-grid-item-alt {
	color: #ddd;
	background: #222; /*#445665;*/
}
.x-grid-item-focused {
	color: #FFF;
	border-color: #AAA;
	background-color: #00751B;/*#6C8191;*/
}
.x-grid-item-over {
	color: #FFF;
	border-color: #AAA;
	background-color: #000;/*#41f080;*/
}
.x-btn-inner-default-small,
.x-btn-default-small,
.x-btn.x-btn-pressed.x-btn-default-small ,
.x-btn-over.x-btn-default-small {
	border-color: #fbfbfb;
	background-color: #333;
}
.x-btn-focus.x-btn-default-small {
	border-color: #00751B;
	background-color: #333;
}


.x-btn-focus.x-btn-over.x-btn-default-toolbar-small,
.x-btn-focus.x-btn-pressed.x-btn-default-toolbar-small,
.x-btn-focus.x-btn-default-toolbar-small {
	box-shadow: #00751B 0 1px 0px 0 inset,
	#00751B 0 -1px 0px 0 inset,
	#00751B -1px 0 0px 0 inset,
	#00751B 1px 0 0px 0 inset;
}
.x-item-over,
.x-btn-default-toolbar-small {
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
.x-menu-item-icon {
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
.x-btn-icon-el-default-small {
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}


.x-window-body-default,
.x-window-header-default {
	color: #fff;
	border-color: #0000;
	background-color: #000;
}
.x-form-cb-input {
	position: absolute;
    margin: 0;
	padding: 0;
	border: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}
/*
.x-btn.x-btn-pressed.x-btn-default-small {
    border-color: #FBFBFB;
    background-color: #000;
}
*/
.x-tree-elbow-plus, 
.x-tree-elbow-end-plus, 
.x-tree-icon, 
.x-tree-icon-parent, 
.x-tree-icon-parent-expanded, 
.x-tree-icon-leaf, 
.x-grid-tree-node-expanded .x-tree-elbow-plus, 
.x-grid-tree-node-expanded .x-tree-elbow-end-plus {
	color: #fff;
}
.x-tree-icon-custom {
	background-size: 16px 16px;
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
.thumb {
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
.thumb-wrap {
	border-color: #FFFFFF;
	background-image: none;
	background-color: #000000;
}
.x-form-invalid-under-default {
	color: #ff5335;
	font: 300 17px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
	font-weight: bold;
}
.x-message-box .x-window-body {
	background-color: #000;
}
.x-grid-cell-booleaniconcolumn-switch-true, 
.x-grid-cell-booleaniconcolumn-switch-false {
	-webkit-filter: invert(1) hue-rotate(195deg);
	filter: invert(1) hue-rotate(195deg);
}
.x-form-checkbox-default {
	-webkit-filter: invert(1) hue-rotate(195deg);
	filter: invert(1) hue-rotate(195deg);
}


.x-form-trigger-default {
	border-color: #FFFFFF;
	background-image: none;
	background-color: #000000;
}
.x-form-trigger-default.x-form-trigger-over {
	border-color: #000000;
	background-image: none;
	background-color: #DEDEDE;
}
.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
	border-color: #00751B;
}
.x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
	border-color: #cc3300;
}
.x-boundlist-item {
	border-color: #000;
	background-color: #000;
	color: #FFF;
}
.x-boundlist-item-over {
	border-color: #FFFFFF;
	background-color: #FFF;
	color: #000;
}
.x-progress-bar {
	background-color: #000;
	background-image: none;
	border-top-color: #000;
	border-bottom-color: #000;
	border-right-color: #000;
}
.x-progress-default {
	border-width: 0px;
}
.x-progress-default {
	background-color: #ccc;
}


.x-progress-bar-default {
	background-color: #00751B;
	background-image: none; 
}
.x-grid-cell-booleaniconcolumn-led-gray,
.x-grid-cell-booleaniconcolumn-enabled-false{
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
.x-progress-default {
	background-color: #000;
	border-width: 0;
	height: 24px;
	border-color: #000;
	border-style: solid;
}
.x-progress-default .x-progress-text-back {
	color: #e4e4e4;
	line-height: 24px;
}
.x-panel-header-default .x-tool-tool-el {
	background-color: #000;
}
.x-form-trigger-default {
	background: #000;
	color: #848484;
}
.x-boundlist-item-over {
	background: #222;
	border-color: #00751B;
	color: #FFF;
}
.x-boundlist-selected {
	background: #00751B;
	border-color: #00751B;
	color: #000;
	font-weight: bold;
}
.workspace-page, 
.shutdown-page {
	background: #000;
}
.x-form-spinner-default {
	background-color: #000;
	color: #919191;
}
/*
.x-menu-item-link, 
.x-menu-item-default,
.x-menu-item-icon {
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
*/
.x-menu-item-focus,
.x-menu-item-active {
	background-color: ;
	border-color: #00751B;
	color: #000;
}
.x-menu-body-default {
	background: #000;
	padding: 0;
}
.x-menu-item-text-default {
	color: #fff;
}
.x-menu-item-default.x-menu-item-focus,
.x-menu-item-default.x-menu-item-active {
	background-color: #00751B;
}
.x-menu-item-default-menubar.x-menu-item-focus,
.x-menu-item-default-menubar.x-menu-item-active {
	background-color: #00751B;
}
.x-progress-default .x-progress-bar-default {
	background-color: #00751B;
	background-image: none;
}
.x-panel-rrdgraph,
.x-grid-group-hd {
	-webkit-filter: invert(1) hue-rotate(180deg);
	filter: invert(1) hue-rotate(180deg);
}
.x-window-header-default .x-tool-img {
	background-color: #000;
}
.x-fieldset {
	background: #333;
}
body.x-border-layout-ct, div.x-border-layout-ct {
	background-color: #000;
}
.x-box-aboutbox {
	margin: 15px;
	text-align: left;
	padding: 5px 10px;
	background-color: #000;
	font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;
	color: #fff;
	border-radius: 4px;
}
.x-box-aboutbox a {
	text-decoration: none !important;
	color: #00751B;
	font-weight: bold;
}
.x-grid-with-col-lines .x-grid-cell {
    border-width: 0px;
}
.x-grid-body {
    border-width: 1px 1px 1px;
}
.x-btn-over.x-btn-default-toolbar-small {
    border-color: #000;
}
.x-btn-default-toolbar-small {
    border-color: #444;
}
/* Uncomment the following section if you would like to hide the logo */
/*
#header {
	display: none;
}
.login-page .product-logo, 
.shutdown-page .product-logo, 
.error-page .product-logo {
	height: 0px;
	width: 0px;
}
*/

Display More

And enjoy the pure spice of darkness.
Great on Android devices.

ryecoaaron · Jun 15th 2017

Looks pretty cool but I might make the buttons darker. They really stand out.

Jap0 · Jun 15th 2017

Perhaps that should be some contest?
Present your OMV's skin/theme.

The Master · Jun 15th 2017

Hi

Nice Job .. Works Fine !

David B · Jun 15th 2017

I like how your design compresses the OMV logo into the sidebar. It saves space.

cabrio_leo · Jun 15th 2017

Quote from David B

I like how your design compresses the OMV logo into the sidebar. It saves space.

This idea was originally from user @Nibb31. See the post no.2 here: Shrink OMV Gui

Blabla · Jun 15th 2017

Quote from Jap0

Perhaps that should be some contest?
Present your OMV's skin/theme.

This idea is great, it would be really cool to make a little "contest" or at least a section dedicated for new skins!

David B · Jun 15th 2017

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.

Wolf2000 · Jul 23rd 2017

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

Code

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:

Code

rm -r omv-theme 
rm -r /usr/bin/omv-theme

Zum Starten:
To Start:

Code

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.o…641-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.o…641-CSS-Black-OMV-GUI-v5/

crashtest · Jul 24th 2017

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

ryecoaaron · Jul 24th 2017

Quote from flmaxey

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

apt-get install git

crashtest · Jul 24th 2017

Sorry 'bout that. You know,, the NOOB thing.
(I just got a quick primer on what git and github are.)

Thanks

crashtest · Jul 25th 2017

Quote from David B

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!
(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 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

David B · Jul 25th 2017

Quote from flmaxey

Go Dave B! (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 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

Display More

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.

ryecoaaron · Jul 25th 2017

Quote from David B

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?

crashtest · Jul 25th 2017

Quote from David B

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. (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.

David B · Jul 25th 2017

Quote from ryecoaaron

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.

Quote from flmaxey

It can't become more popular if it doesn't exist where it can be had by the ~~dirty, unwashed~~ masses. (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.

ryecoaaron · Jul 25th 2017

Quote from David B

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.

The Master · Jul 25th 2017

Quote from ryecoaaron

...we can get that added to the repo.

good Idea (maybe to the testing repo)

David B · Jul 26th 2017

Quote from ryecoaaron

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.

Quote from The Master

good Idea (maybe to the testing repo)

Yeah it's certainly not ready for the mainstream repo.

[CSS] Black OMV v4.x GUI

Participate now!

Tags