Jump to content

I want to change the look of the menu bar


mahmoudnabil

Recommended Posts

mahmoudnabil

I want to change the look of the menu bar
I want to change the shape of the menu bar to the black color in a consistent manner, as I tried to change it more than once, but I find some difficulties.
Thanks in advance

1325783740_Screenshot2021-09-13095522.thumb.png.506c966214996c771ede7946d59f716b.png

 

1290879450_Screenshot2021-09-13095649.thumb.png.dc0fbfe7fae5a0069a13f38d13a75431.png

I want to change the background color to black and the menu to white

 

2044821158_Screenshot2021-09-13095721.thumb.png.34d2d9febfb7cf257b0869638575b073.png

 

Link to post
Share on other sites
  • 2 weeks later...
visproduction

I use these Styles.  There might be a shorter way to list them.  This is for the admin area only.

.mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div.navDrawerItemsContainer.itemsContainer.vertical-list, .mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div > button, .mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div.navDrawerItemsContainer.itemsContainer.vertical-list > button, .dialogContainer > div > div.actionSheetScroller.emby-scroller.scrollY > div > button, .paperList, .visualCardBox {
    background-color: #83a588;
}

.listItem-content {
    width: 101%;
}

The pull out left menu drawer on the Home page is controlled from inside /modules/listview/listview.css

I have not tried to change this menu.  I did notice that when you start changing these menus, the other notification menus and pull down menus elsewhere change, as well.  So, when you try this, double check all the other pull down menus to work how you like them.

Hope that helps.

 

Edited by visproduction
Link to post
Share on other sites
Happy2Play

The theme inverts icon colors so changing a light theme will create visual issues with dark icons on dark backdrop.

div.drawer-docked {
    background: #2f2e30;}

.backgroundContainer, .dialog, html {
    background-color: #242125;
}

As mentioned you will get adverse side effects.

One of the reasons with split theming for non-premiere.

It will require doing it with every server update but overwrite the light theme files with the dark theme files in the theme folder.

C:\Users\Media\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes (path is platform prevalent)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...