OMBI V4 dark theme not working at all

[mkanet]

Describe the bug It appears the OMBI dark theme was meant for the old version of OMBI. The theme colors look exactly the same after adding the subfilter. Instead of a dark color theme similar to Petio, it's still the default ugly dark blue theme. I tried using Petio's CSS; but, that didn't help much.

This should be very easy to reproduce.

Theme Install Method (Don't skip) nginx subfilter: https://theme-park.dev/CSS/themes/ombi/organizr-dark.css

[Lanjelin]

The Ombi theme is for V3 afaik, and has not yet been updated for V4. Ombi supports custom css through Settings -> Configuration -> Customization, and you can paste the CSS directly there. Just made some quick and dirty styles, until someone more skilled comes around and does it properly.

Plex Theme

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .active-list-item, .aria-selected, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group {border: 1px solid white !important;}

/* Buttons (main)*/
.button-active, .active-list-item, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-tab-label-active {background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed !important; }

/* Background (modal) */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab {background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed !important; }

/* Scrollbar (modal)*/
::-webkit-scrollbar, ::-webkit-scrollbar-track{background:rgba(15,23,31,.15) !important;}
::-webkit-scrollbar-thumb {background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center/cover no-repeat !important; }

/* Card Top Adjustment */
.card-top-info {top: 5px !important; padding-top: 4.6px !important;padding-bottom: 6.3px !important;}

Dark Theme

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .active-list-item, .aria-selected, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group {border: 1px solid white !important;}

/* Buttons (main)*/
.button-active, .active-list-item, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-tab-label-active {background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed !important; }

/* Background (modal) */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab {background: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed !important; }

/* Scrollbar (modal)*/
::-webkit-scrollbar, ::-webkit-scrollbar-track{background:rgba(15,23,31,.15) !important;}
::-webkit-scrollbar-thumb {background: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center/cover no-repeat !important; }

/* Card Top Adjustment */
.card-top-info {top: 5px !important; padding-top: 4.6px !important;padding-bottom: 6.3px !important;}

Space Gray

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .active-list-item, .aria-selected, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group {border: 1px solid white !important;}

/* Buttons (main)*/
.button-active, .active-list-item, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-tab-label-active {background: radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed !important; }

/* Background (modal) */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab {background: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed !important; }

/* Scrollbar (modal)*/
::-webkit-scrollbar, ::-webkit-scrollbar-track{background:rgba(15,23,31,.15) !important;}
::-webkit-scrollbar-thumb {background: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center/cover no-repeat !important; }

/* Card Top Adjustment */
.card-top-info {top: 5px !important; padding-top: 4.6px !important;padding-bottom: 6.3px !important;}

Organizr Dark

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .active-list-item, .aria-selected, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group {border: 1px solid white !important;}

/* Buttons (main)*/
.button-active, .active-list-item, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-tab-label-active {background: #1f1f1f !important; }

/* Background (modal) */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab {background: #1b1b1b !important; }

/* Scrollbar (modal)*/
::-webkit-scrollbar, ::-webkit-scrollbar-track{background:rgba(15,23,31,.15) !important;}
::-webkit-scrollbar-thumb {background: #1b1b1b !important; }

/* Card Top Adjustment */
.card-top-info {top: 5px !important; padding-top: 4.6px !important;padding-bottom: 6.3px !important;}

Hotline

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .active-list-item, .aria-selected, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group {border: 1px solid white !important;}

/* Buttons (main)*/
.button-active, .active-list-item, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-tab-label-active {background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed !important; }

/* Background (modal) */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab {background: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed !important; }

/* Scrollbar (modal)*/
::-webkit-scrollbar, ::-webkit-scrollbar-track{background:rgba(15,23,31,.15) !important;}
::-webkit-scrollbar-thumb {background: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center/cover no-repeat !important; }

/* Card Top Adjustment */
.card-top-info {top: 5px !important; padding-top: 4.6px !important;padding-bottom: 6.3px !important;}

Aquamarine

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .active-list-item, .aria-selected, .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group {border: 1px solid white !important;}

/* Buttons (main)*/
.button-active, .active-list-item, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-tab-label-active {background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed !important; }

/* Background (modal) */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .mat-fab {background: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed !important; }

/* Scrollbar (modal)*/
::-webkit-scrollbar, ::-webkit-scrollbar-track{background:rgba(15,23,31,.15) !important;}
::-webkit-scrollbar-thumb {background: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center/cover no-repeat !important; }

/* Card Top Adjustment */
.card-top-info {top: 5px !important; padding-top: 4.6px !important;padding-bottom: 6.3px !important;}

[mkanet]

Thank you so much for the quick and very help response. It is significantly better. There's only a weird issue... the status for each TV/movie is not displaying correctly. Any idea how I might be able to resolve that? Otherwise, it's very nice.

Original: (correct)

CSS-Mod: (status not displayed correctly)

[Lanjelin]

The black overlay was not positioned perfectly after changing the background of the whole box, so I changed the overlay as well. Seems it broke it though. Unable to find a quick way to fix the position, but I guess a few pixels off is better then broken. Updated my previous post, and removed .card-top-info from background.

[mkanet]

@Lanjelin thank you so much for taking the time to do this. I was able to find the specific css element and properties to adjust .card-top-info using Chrome Developer tools. However, just pasting the below code in OMBI's CSS customization gets ignored.

Any ideas why the CSS code below works in Developer Mode; but, not when adding it to OMBI's CSS customization?

.card-top-info[_ngcontent-nhx-c214] {
    position: absolute;
    top: 5px;
    width: 100%;
    background-color: rgba(15,23,31,.7);
    display: flex;
    justify-content: space-between;
    padding-top: 4.6px;
    padding-bottom: 6.3px;
    z-index: 2;
    letter-spacing: .2px;
}

All the code below works fine, except for card-top-info get's ignored:

/* Removing Application Name at top left */
#nav-applicationName{display:none;}

/* Visibility */
.top-search-block, .mat-flat-button, .mat-mini-fab, .mat-raised-button {color:white !important;}
.top-search-bar .mat-form-field-flex, .discover-filter-buttons-group{border: 1px solid white !important;}

/* Dark Background */
body, .discover-filter-buttons-group, .mat-table, .mat-paginator, .sidenav-container, .mat-menu-panel, .mat-fab.mat-accent, .mat-flat-button, .mat-mini-fab, .mat-raised-button, .sidenav, .content-container, .top-bar-container, .mat-card, .mat-chip, .mat-expansion-panel {background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed !important; }

/* Card-Top adjustment */
.card-top-info {
    position: absolute;
    top: 5px;
    width: 100%;
    background-color: rgba(15,23,31,.7);
    display: flex;
    justify-content: space-between;
    padding-top: 4.6px;
    padding-bottom: 6.3px;
    z-index: 2;
    letter-spacing: .2px;
}

[Lanjelin]

Use !important to override already defined properties. https://www.w3schools.com/css/css_important.asp

.card-top-info {
    top: 5px !important;
    padding-top: 4.6px !important;
    padding-bottom: 6.3px !important;
}

[mkanet]

Thank you! It looks great now. I moved this CSS mod to Nginx subfilter since the CSS customization feature displays the original CSS style/colors briefly before displaying the CSS mod.

Thanks for telling me about !important

Hopefully, someone much more experienced than me will update theme.park to officially support Ombi V4.

[Lanjelin]

Did some more tweaking, updated my first post: https://github.com/GilbN/theme.park/issues/206#issuecomment-856838097 Think that's it for now.

[mkanet]

It's starting to look closer to the official theme.park themes. It's a bit hard to tell which sidebar item is active.. but, looks really good so far! Thank you.

[GilbN]

Thanks guys, you've inspired me to update the css for v4. :) Check it out https://github.com/GilbN/theme.park/commit/ee227ff8c42ed810a550724325f3120c7ff5a67c

[mkanet]

Thank you! Ombi also just updated their Interface today too! 200% improvement from before!

[GilbN]

Thank you! Ombi also just updated their Interface today too! 200% improvement from before!

Oh, What's new? Did something in the theme break?

[mkanet]

It looks better than ever. They fixed the sidebar size being too big. Before it was too big. Also, they fixed poster aspect ratio issue.

The only thing I noticed is that the application name for Ombi looks exactly the same as without the theme. I really wish they would just replace that ugly light-blue plain-text application name "Ombi" with a nice custom logo instead.

[twanariens]

It looks better than ever. They fixed the sidebar size being too big. Before it was too big. Also, they fixed poster aspect ratio issue.

The only thing I noticed is that the application name for Ombi looks exactly the same as without the theme. I really wish they would just replace that ugly light-blue plain-text application name "Ombi" with a nice custom logo instead.

   /* Nav Bar */
.sidenav-container .sidenav .mat-toolbar.application-name {
    content: url("linktoimage/logo.png"); 
}

[mkanet]

/ Nav Bar / .sidenav-container .sidenav .mat-toolbar.application-name { content: url("linktoimage/logo.png"); }

Thank you so much!!  Awesome.

[twanariens]

No worries mate. Still a bit heartbroken you called our V4 blue theme ugly ;-)