Finally: my custom background image back

aroundmyroom · 7. April 2020

During OMV3 I used a nice background image, but after the upgrade to OMV4 it did not work anymore and I did not bother ..

Today I took the time to see why it did not work anymore.. Ahhh omv-custom.css has been changed to theme-custom.css

From my old nas I found the old file, copied the only interesting part to the new file and it was working. Even my old background image was still present ..

Just as I am about to turn that old NAS off ..

Background image now under OMV5 (logo of OMV in the lower right is preserved, this is example image (cut 'n paste))

Happy to have my Whale (30TB) almost ready

auanasgheps · 8. April 2020

I would love to know more about this!

I wanted to get into theming the UI, but my research a while ago led to methods now obsolete. Changing the background image could be a great start!

Agricola · 8. April 2020

Using nano create the file at /var/www/openmediavault/css/theme-custom.css

Firefox has a developer tool you can use to see what is going on under the hood of any web page.

aroundmyroom · 8. April 2020

auanasgheps I have added the following to the theme-custom.css as stated by Agricola

/******************************************************************************/

/* Login page */

/******************************************************************************/

/*body# */

.login-page {

/** background: #2e2e2e; */

background: url("/images/server.jpg") no-repeat center center fixed;

background-size: cover;

}

and I put the image server.jpg in /images/

/var/www/openmediavault/images

Aux · 8. April 2020

Thank you friends, I love this little guide.

I also changed my background, looks more professional now

Agricola · 8. April 2020

Here are a couple of posts that provide more ideas for customizing css. It's nice to have something visual to distinguish one server from another to help avoid modifying the wrong machine, as in main server/backup server/test server. I have been working on a red theme based on the css in these two posts, but it is not quite ready. I am still tracking down a couple of elements:

auanasgheps · 8. April 2020

Agricola please keep us updated! I love these changes such as a dark theme...

GlennG0uld · 9. April 2020

Hello everyone,

I'd like to change my background too, but how the hell do you put the image you want in /var/www/openmediavault/images ?

I don't know how to copy a file to that directory from my computer (windows 10).

Is it possible via ssh ?

macom · 9. April 2020

You can do it with Filezilla using SFTP (ssh file transfer protocoll).

For this you need a user in the ssh group. "root" will do as well.

Another option is to copy the file to a smb share. Then copy it from the CLI to the location on the root filesystem using cp command.

GlennG0uld · 9. April 2020

It worked ! Hallelujah !

Thank you very much macom.

aroundmyroom · 9. April 2020

winscp is also a way to add the image to the server

aroundmyroom · 22. April 2020

One of my backgrounds Guess the name of the nas

GlennG0uld · 24. April 2020

PiraNAS ?

aroundmyroom · 5. Mai 2020

almost ..

dehness · 17. September 2020

Had a bit of a play around with it myself:

hbosko · 24. Januar 2021

Hi,

Let me share my dark mode.

See post #3 for howTO.

CSS

.login-page {
background-color: #101010; 
/* background: url("/images/image.jpg") no-repeat center center fixed; 
background-size: cover;*/
}

.x-fieldset{
background-color:transparent !important;
}

.x-fieldset-header-default>.x-fieldset-header-text{
color:#fff !important;
}

.x-toolbar-default,.x-panel-body-default{
background-color:#3B3B3B !important;
border:none !important;
}

.x-tab.x-tab-active.x-tab-default{
color:#8b0000 !important;
background-color:#d9d9d9 !important;
border-color:#d9d9d9;
font-weight:700;
}

.x-grid-item-focused .x-grid-cell-inner:before{
background-color:#d9d9d9 !important;
color:transparent !important;
border:none !important;
}

.x-tab-inner-default {
background-color:#d9d9d9 !important;
color:#000 !important;
}

.x-window-header-default .x-tool-img{
background-color:transparent !important;
}

div#header{
background-color:#222 !important;
border:none !important;
}

.x-panel-header-default{
background-color:#b3b3b3!important;
border:none !important;
}

.x-panel-header-title-default{
color:#000;
}

.x-panel-default{
background-color:red !important;
border:none !important;
}

.x-form-text-default {
background-color:#222 !important;
color:#fff !important;
}

.x-panel-header-default .x-tool-tool-el{
background-color:#373743 !important;
border:none !important;
}

.x-workspace-node-tree .x-panel-header-default{
background-color:#ececec !important;
color:#fff !important;
}

.x-workspace-node-tree .x-panel-header-default::before{
content:"OpenMediVault";
color:#000;
position:absolute;
font-weight:900;
}

.x-window-header-default-top,.x-toolbar-footer{
background-color:#222 !important;
border:none !important;
}

.x-workspace-node-view-category-header .thumb-wrap{
background-color:#8e8e8e !important;
}

.x-form-item-label-default{
color:#fff !important;
border:none !important;
}

.x-btn-default-small{
background-color:#696969 !important;
border:none !important;
}

.x-btn-inner-default-small:hover{
opacity:0.6;
font: 400 20px/16px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif !important;
}
.x-item-over,.x-column-header-over{
color:#000;
}

.x-grid-body{
background-color:;
}

.x-toolbar-text-default{
color: #fff;
}

.x-column-header,.x-grid-header-ct{
background-color:#454545 !important;
color:#fff;
}

.x-grid-item,.x-tab-bar-default {
background-color: #575757;
color: #fff;
border-bottom:1px solid #444444;
}

.x-grid-item-focused{
color:#000 !important;
font-weight:600;
}

.x-panel-body-default,.x-form-fieldinfo{
color:#fff;
}

body>.x-mask {
    background-color: rgba(0,0,0,0.9);
}
.x-window-default {
    border-color: #444444;
    border-width: 10px;
}


/* Uncomment the following section if you would like to hide the logo */
/*
#header {
display: none;
}
*/

Alles anzeigen

Agricola · 24. Januar 2021

Hey. Looks nice. Thanks for the HT. I’ve got some themes of my own I should share. The different colors come in handy if you’re running more than one server (you all are, aren’t you?) so you can tell them apart at a glance.

Agricola · 26. Januar 2021

Here's the theme I use for my main server:

CSS

/**
 * OMV Orange-Blue Shrink Theme
 * by Agricola, 2020-08-07
 * Color Scheme for this theme is
 * Dark Orange = #fe5c00  Light Orange = ##ea7431  
 * Dark Blue = #00a2fe  Light Blue = #31a7ea
 * Graph Bars and Activity Lights = #000000 
 */
/**

/* Original Shrink Section */
.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$
}
.x-tab-default-top {
    padding: 2px 10px 2px 10px;
}
.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;
}
div#header {
 display: none;
}
/* end */

/* Place OMV Logo in Center of Top Bar */
.x-workspace-navigation-toolbar.x-toolbar-default {
    background: url("../images/header_logo.png");
    background: url("../images/header_logo.svg"),none;
    background-repeat: no-repeat;
    background-color: #ea7431;
    background-position: center;
    background-size: 80% 80%;
}
/* end OMV Logo */
 
/* Name Logo - place an identifying name or logo in the top bar of the left menu */
/* 160x35px files appropriately named need to reside in var-www-openmediavault-images */
/* A note on using Inkscape to create .svg images: */
/* Text in .svg images need to be selected and have "Object to Path" (Path Menu), */
/*  "Group" (Object Menu), and then "Union" (Path Menu) applied to it have the font */
/* follow the image across multiple devices and browsers. */
/* I am guessing the .png version is used as a backup for non .svg supported situations. */
.x-workspace-node-tree .x-panel-header-default {
    border: 0px;
    background: url("../images/h2.png");
    background: url("../images/h2.svg"),none;
    background-repeat: no-repeat;
    background-color: #ea7431;
    background-position: center;
    background-size: 65% 65%;
}
/* end Name Logo */

/* Page Section Header Titles - Font Color */
.x-fieldset-header-default > .x-fieldset-header-text {
    color: #ea7431;
}
/* end */

/* Right Pull-Down Menu */
.x-menu-item-default.x-menu-item-focus,
.x-menu-item-default.x-menu-item-active {
        background-color: #ea7431;
}
.x-menu-item-default-menubar.x-menu-item-focus,
.x-menu-item-default-menubar.x-menu-item-active {
        background-color: #ea7431;
}
/* end */

/* Graph Bar Color */
.x-progress-default .x-progress-bar-default {
        background-color: #000000;
        background-image: none;
}
/* end */

/* Pages with a Horizontal Top Tab Bar */
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color: #fe5c00;
}
.x-tab-bar-default {
    background-color: #ea7431;
}
/* end */

/* Login Page*/
.x-btn-default-small {
    border-color: #fe5c00;
    background-color: #fe5c00;
}
.x-btn-over.x-btn-default-small {
    border-color: #ea7431;
    background-color: #BF756D;
}
.x-window-header-default {
    border-color: #fe5c00;
    Background-color: #fe5c00;
}
.x-window-header-title-default {
    line-height:25px; /* default was 20px and cropped bottom of "Login" text */
}
.x-panel-header-default {
    border: 1px solid #ea7431;
    background-color: #ea7431;
}
.login-page {
    background: #ea7431;
}
.x-window-default {
    border-color: #fe5c00;
}
.x-form-trigger-wrap-default {
    border-color: #fe5c00;
}
/* end */

/* Log Out Confirmation Box */
.x-window-header-default .x-tool-img {
    background-color: #fe5c00;
}
.x-btn-focus.x-btn-default-small {
    border-color: #fe5c00;
    background-color: #fe5c00;
}
.x-btn.x-btn-pressed.x-btn-default-small {
    border-color: #fe5c00;
    background-color: #fe5c00;
}
.x-message-box-question {
    font: 44px/1 FontAwesome;
    color: #fe5c00;
}
/* end */

/* Start-Stop Boxes Disabled Buttons */
.x-btn.x-btn-disabled.x-btn-default-small {
    border-color: #31a7ea;
    background-color: #31a7ea;
}
/* end */

/* Selected Lines Shading Color */
.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell {
    border-color: #31a7ea;
    background-color: #31a7ea;
}
.x-grid-item-selected {
    background-color: #70BF94;
}
/* end */

/* Tool-Tips */
.x-toolbar-tip {
    background: #31a7ea;
}
.x-toolbar-applycfg {
    background: #70bf94;
}
.x-message-box-warning {
    color: #fe5c00;
}

/* end */

/* Panel Outlines */
.x-panel-default-outer-border-trbl {
    border-color: #ea7431 !important;
}
/* end */

/* Left Menu - excluding left menu top bar (see above) */
}
.x-panel-default-outer-border-rbl {
    border-right-color: #ea7431 !important;
    border-bottom-color: #ea7431 !important;
    border-left-color: #ea7431 !important;
}
.x-workspace-node-tree .x-panel-header-default .x-tool-tool-el {
    background-color: #ea7431;
}
.x-panel-header-default .x-tool-tool-el {
    background-color: #ea7431;
}
.x-tool-tool-el {
    color: #000;
}
/* end */

/* Dashboard Page */
.x-panel-header-default .x-tool-tool-el {
    background-color: #ea7431;
}
#workspace-node-tree-1019_header-title-textEl {
    background-color: #98b7cf;
}
#tool-1064-toolEl {
    background-color: #98b7cf;
}
/* end */

/* Shutdown Page */
.shutdown-page {
    background: #ea7431;
}
/* end */

/* Grid Outline Color When Selected */
.x-grid-item-focused .x-grid-cell-inner:before {
 border: 1px solid #fe5c00;
}
/* end */

/* Tab Outline Color When Selected */
.x-tab-focus.x-tab-default {
    outline: 1px solid #fe5c00;
}
/* end */

/* Accordian Grid Color */
.x-boundlist-selected {
    background: #ea7431;
    border-color: #ea7431;
}
.x-boundlist-item-over {
    background: #fe5c00;
    border-color: #fe5c00;
}
/* end */

/* "Enabled" and "Running" Button Color */
.x-color-boolean-true {
    color: #000000;
}
/* end */

Alles anzeigen

Begining on line 72 is a section on adding a name to your server in the upper left menu bar. This involves creating an .svg image in Inkscape with the following font: URW Gothic L/Normal/30px/1.25 spacing. URW Gothic L is the font used in the Openmediavault logo. The personalized logo on the left makes a nice compliment to the OMV logo in the middle of the page. you will have to adjust this section to your created logo. Here are a couple of screenshots of a machine with this theme.

Here's a couple of screenshots:

jofen · 4. Mai 2021

Hi, im using OMV5 I will like to change just the background image.

I have placed a new image in /var/www/openmediavault/images

But what have i to change to point the default page to point to that image?

Thanks

auanasgheps · 23. Dezember 2021

This procedure unfortunately doesn't work with OMV6.

I thought so because the whole UI has changed, but I still tried to apply the procedure.

On OMV6, simply browse to /var/www/openmediavault/assets/images and replace benjamin-lehman-GNyjCePVRs8-unsplash.jpg with another picture using the same name, since the config is pointing to that file. I still have to find the config file so any name can be used, but will not change the end result.

Finally: my custom background image back

Jetzt mitmachen!

Tags