Jump to content

How to change color of these?


testbug
Go to solution Solved by arrbee99,

Recommended Posts

testbug

Hi!

 

I'm working on a complete color theme change, and I was hoping someone could help me with changing the color of:

  • The border around the drop-down lists.
  • The selected item's background in the side menu.

If I come across any more issues, I'll post it here.

redify.png

Link to comment
Share on other sites

Happy2Play

The current css is this

.emby-select-withcolor:focus {
    border-color: var(--theme-primary-color)!important;
}

.navMenuOption-selected {
    background-color: var(--theme-icon-focus-background)!important;
}

 

Link to comment
Share on other sites

testbug
2 hours ago, Happy2Play said:

The current css is this



.emby-select-withcolor:focus {
    border-color: var(--theme-primary-color)!important;
}

.navMenuOption-selected {
    background-color: var(--theme-icon-focus-background)!important;
}

 

Those are the ones I tried to edit, but it looks like they're getting overridden or something.

I'm still very new to the whole css-language, so is there something I'm missing?

overridden.png

Edited by testbug
Link to comment
Share on other sites

PenkethBoy

i found you had to edit the theme.css file and change the 

--theme-primary-color

etc in that file to get the drop down hightlight to change

but it needs changing on every server update

Link to comment
Share on other sites

testbug
2 hours ago, PenkethBoy said:

i found you had to edit the theme.css file and change the 



--theme-primary-color

etc in that file to get the drop down hightlight to change

but it needs changing on every server update

I've tried this as well, but that didn't work either (I also cleared all browser data).

Just to make sure, it's the "system/dashboard-ui/modules/themes/dark/theme.css"-file, right?

Edited by testbug
Link to comment
Share on other sites

  • Solution
arrbee99

Have you used this -

html:root {
    --myblue: #5d7e9b;
}

html:root {
    --theme-primary-color: var(--myblue);
    --theme-accent-text-color: var(--myblue);
    --theme-primary-color-lightened: var(--myblue);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}


- for overall blue (or whatever) scheme. It does miss some things out though.

(From either HappyPlay or PenkethBoy)

  • Like 1
Link to comment
Share on other sites

testbug
12 minutes ago, arrbee99 said:

Have you used this -

html:root {
    --myblue: #5d7e9b;
}

html:root {
    --theme-primary-color: var(--myblue);
    --theme-accent-text-color: var(--myblue);
    --theme-primary-color-lightened: var(--myblue);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}


- for overall blue (or whatever) scheme. It does miss some things out though.

(From either HappyPlay or PenkethBoy)

Sweet! This worked like a charm!

Thank you!

  • Like 1
Link to comment
Share on other sites

Happy2Play

or use this as already "!important" elements have to be target differently to override current element.

select.emby-select-withcolor:focus {
    border-color: red !important;
}

a.navMenuOption-selected {
    background-color: red !important;
}

but yes new html:root method is a lot easier now for theming.

Link to comment
Share on other sites

testbug
48 minutes ago, Happy2Play said:

or use this as already "!important" elements have to be target differently to override current element.


select.emby-select-withcolor:focus {
    border-color: red !important;
}

a.navMenuOption-selected {
    background-color: red !important;
}

but yes new html:root method is a lot easier now for theming.

Gotcha. Thanks for the heads up!

Link to comment
Share on other sites

testbug
1 minute ago, JohnSpartan3M said:

Where do you enter these scripts exactly?

Manage Emby Server > Settings > Custom css.

Link to comment
Share on other sites

testbug
1 hour ago, JohnSpartan3M said:

Thanks, may i see some screen shots of how your came out?

I'm still testing out stuff though, so it's not "finnished" yet.

Capture.PNG

Link to comment
Share on other sites

JohnSpartan3M
2 hours ago, testbug said:

I'm still testing out stuff though, so it's not "finnished" yet.

Capture.PNG

Bro thats awesome please let me see when your done this is inspiring!

Link to comment
Share on other sites

testbug
2 minutes ago, JohnSpartan3M said:

Bro thats awesome please let me see when your done this is inspiring!

A tinkerer's job is never done 😉

Link to comment
Share on other sites

JohnSpartan3M
11 minutes ago, testbug said:

A tinkerer's job is never done 😉

Hey bro, you know a lot more then i do about this, i keep getting these rainbow colors on the top of some of my movies, do you know what this might be? Any help would he great

4483FBA3-18D5-42C8-919F-757BD3725EB2.jpeg

05862DF6-C657-437D-8BE2-0697CFFC059A.jpeg

Link to comment
Share on other sites

testbug
1 minute ago, JohnSpartan3M said:

Hey bro, you know a lot more then i do about this, i keep getting these rainbow colors on the top of some of my movies, do you know what this might be? Any help would he great

4483FBA3-18D5-42C8-919F-757BD3725EB2.jpeg

IMG_1995.MOV

05862DF6-C657-437D-8BE2-0697CFFC059A.jpeg

I would guess that the video file is corrupt somehow.

Is the file on the same device you're playing it on?

Link to comment
Share on other sites

JohnSpartan3M
10 minutes ago, testbug said:

I would guess that the video file is corrupt somehow.

Is the file on the same device you're playing it on?

Yeah thats the fire stick, i played it also on the browser and a roku, i find this happens to some of the movies on the server but it doesnt show up when i play them on vlc or directly from my cpu, thanks for replying its much appreciated.

Link to comment
Share on other sites

testbug
3 minutes ago, JohnSpartan3M said:

Yeah thats the fire stick, i played it also on the browser and a roku, i find this happens to some of the movies on the server but it doesnt show up when i play them on vlc or directly from my cpu, thanks for replying its much appreciated.

I'm no expert, but VLC doesn't need to handle files through a browser, so it could be a combination of corruption and/or codec issue.

If it's just some videos, then I'd suggest getting a different release of the movie/series.

Edited by testbug
Link to comment
Share on other sites

arrbee99

If you browse around the css thread you'll find some nice stuff. Personally I like getting riding of posters to let the backdrops show though, among other things.

I'd also suggest starting a separate thread about any playback problems you're having, preferably including any emby logs, info about the files that are not playing properly, etc.

  • Like 1
Link to comment
Share on other sites

arrbee99

Oops, I see you've mentioned the playback thing in its own thread already...

Link to comment
Share on other sites

JohnSpartan3M
3 hours ago, testbug said:

I'm no expert, but VLC doesn't need to handle files through a browser, so it could be a combination of corruption and/or codec issue.

If it's just some videos, then I'd suggest getting a different release of the movie/series.

Thanks very much for your time and help.

Link to comment
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...