Jump to content

How to change color of these?


testbug
 Share

Go to solution Solved by arrbee99,

Recommended Posts

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

Posted (edited)
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

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

Posted (edited)
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

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

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

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

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

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

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

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

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

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

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

Posted (edited)
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

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

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
 Share

×
×
  • Create New...