Theming

If anyone wants to experiment with theming their web gui you can create a custom file that will override the default file by copy the contents of omv.css to omv-custom.css:

cd /var/www/openmediavault/css
cp omv.css omv-custom.css

This will copy all the contents from the default css file. Any changes you make to the omv-custom.css file will override the default. You will see lots of items in custom file you created that have hexadecimal numbers for colors. You can use one of the following sites to choose new colors and then experiment.

http://www.colorschemer.com/online.html
http://www.colorpicker.com/

The sections that you will probably be most concerned with are the login page section and the workspace section. The login section is the sign in page and you might want to change your background picture. This is the section you would want to change to do this:

body#login-page {
    background: url("/images/test.jpg")no-repeat center center fixed;
    background-size: cover;
}

The body#login-page is not in this format now so you need to make changes to it like the code box.
Then you will need to change the name of the test.jpg to then name of you jpg file. You jpg file needs to be put in this location:
/var/www/openmediavault/images
The chown of the jpg file needs to be openmediavault:openmediavault
and the chmod need to be 664
so you would do it like this assuming your test.jpg is in the /var/www/openmediavault/images location.
chown openmediavault:openmediavault test.jpg
chmod 664 test.jpg

Do not be worrried about messing up the omv-custom.jpg file. If you do you can just delete it and the defaults will be back and you can copy the default file and create the omv-custom.css file again.

Ah, here is link to old thread were some discussion on the topic took place:

Styling the webgui

I attach pic of my theme.

PS- Another thread containing info on Theming.
OMV 1 Design... Comments

Here are some of the items I altered in the workspace section:

Workspace-Status/Percentage Bar color (like cpu percentage bar):

.x-progress-default .x-progress-bar-default {
        background-color: #99BDA4; /* Cooperate color */
        background-image: none; /* Flat design */
}

Backgroud color when you put cursor over category (i.e. system, service, etc...):

.x-workspace-node-view-category-header .x-item-over {
        background-color: #D8EDDB;
        cursor: pointer;
}

Backgroud color when you put cursor over an icon:

.x-workspace-node-view-category-items .x-item-over {
        background-color: #D8EDDB;
        cursor: pointer;
}

Ideas about plugin:

/var/www/openmediavault/css/themes

then subfolders for each theme that is added. so say a blue theme

/var/www/openmediavault/css/themes/blue
and inside this folder you will have a the omv-custom.css and images files.

Then you have as part of the plugin you have a screen where you can select the theme. It will delete
the current theme and install the new by movinrg the files from the desired theme folder (blue).

It would also be nice if some individual items could be customized by color in the plugin. A Tab maybe for a few items to begin with and more can be added. A href can guide to site where users can pick custom color and it gives them the hex value. Then they would manually have to put the hex value in the Manual TAB settings fields.

PS- Once a theme is made it is easy to set it up manually. I just moved my theme I've been using to a vm in like 5 seconds. Just copy and pasted the omv-custom.css and images to correct location. Then refreshed browser. People should start developing themes.

If you read the first post it tells you how to created the omv-custom.css file. Edits to that file will override the defaults.