Jump to content

Custom CSS with Emby Web App

Luke

By Luke,
in Web App CSS

 Share Followers 15

Recommended Posts

Happy2Play

Happy2Play 4696

Posted
Posted

And for the stable version? ;)

Something like this.

input.emby-checkbox:checked+span+span+.checkboxOutline .checkboxIcon-checked {background-color: #4285F4;  }
input.emby-checkbox:checked+span+span+.checkboxOutline {border-color: #4285F4; }
  • Like 1
Link to post
Share on other sites
Happy2Play

Happy2Play 4696

Posted
Posted

Thanks a lot!

 

Is it possible to make all the green elements in Emby Server blue like this?

Yes it was done here.

https://emby.media/community/index.php?/topic/28743-emby-dark-themes-in-different-accent-colors/

 

But it is dated and no longer updated.  So there would have to be updated to the current code for 4.3.1.0, but will change some more in 4.4.x.x.

 

I currently use a bat file and a program called Find and Replace (fnr) and replace everything green with blue (#0C57D6)

 

FNR program and Emby path dependant

"C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.*" --excludeFileMask "*.dll, *.exe,*.png, *.gif, *.jpg, *.woff, *.woff2, *.ico" --includeSubDirectories --useRegEx --find ":green" --replace ":#0C57D6"

"C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.*" --excludeFileMask "*.dll, *.exe,*.png, *.gif, *.jpg, *.woff, *.woff2, *.ico" --includeSubDirectories --useRegEx --find "#52b54b|#2bc253|#54f054|#5EC157|#009F00|#00B32C" --replace "#0C57D6"

"C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.css" --includeSubDirectories --find "rgba(82,181,75" --replace "rgba(12,87,214"

"C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.css" --includeSubDirectories --find "rgba(82, 181, 75" --replace "rgba(12, 87, 214"

as for logos you can find them here and use them via url as you can see in the base code

https://github.com/BenZuser/Emby-Dark-Themes-Resources/tree/master/images/logos-and-icons

 

But I just maintain a local copy and replace the image with every update in my bat file.

copy Y:\Emby-Server\logowhite.png Y:\Emby-Server\system\dashboard-ui\bower_components\emby-webcomponents\themes\logowhite.png /y

Not necessarily pretty but does what I need.

  • Like 2
Link to post
Share on other sites
PenkethBoy

PenkethBoy 2009

Posted
Posted

@@Happy2Play

 

the latest beta .14 has stopped a couple of things working - could you give me a idea what to change please

/*Remove Scroll from - Seasons*/
#childrenCollapsible div.scrollSlider {
 flex-wrap: wrap;
 padding-right: 2.5%;
 padding-left: 2.5%; }
#childrenCollapsible .scrollbuttoncontainer-right {display: none; }

and

/* ----- Smaller Movie/Series Cast Pictures Beta Server----*/
.card.portraitCard.personCard{width: 9.5em !important; height: auto;}

i had a quick play but with no luck

 

Thanks

Link to post
Share on other sites
Happy2Play

Happy2Play 4696

Posted
Posted

@@Happy2Play

 

the latest beta .14 has stopped a couple of things working - could you give me a idea what to change please

/*Remove Scroll from - Seasons*/
#childrenCollapsible div.scrollSlider {
 flex-wrap: wrap;
 padding-right: 2.5%;
 padding-left: 2.5%; }
#childrenCollapsible .scrollbuttoncontainer-right {display: none; }

and

/* ----- Smaller Movie/Series Cast Pictures Beta Server----*/
.card.portraitCard.personCard{width: 9.5em !important; height: auto;}

i had a quick play but with no luck

 

Thanks

Looks like

/*Remove Scroll from - Seasons*/
div.childrenSection-x div.scrollSlider {
 flex-wrap: wrap;
 padding-right: 2.5%;
 padding-left: 2.5%; }
div.childrenSection-x div.scrollbuttoncontainer.scrollbuttoncontainer-right {display: none; }


/* ----- Smaller Movie/Series Cast Pictures Beta Server----*/
div.peopleSection div.portraitCard {width: 9.5em; height: auto;}
  • Like 1
Link to post
Share on other sites
  • 4 weeks later...
ITTechNut

ITTechNut 0

Posted
Posted

Changing Fonts

 

A simple one to get some folks started. You can adjust the fonts the WebUI uses. Currently by default this is -

body {
    font-family: Roboto,Arial,Helvetica,sans-serif;
} 

You could delete the "Roboto" and change your font to Arial, or change it for any other font you have available. You could even import fonts available on the web.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
}

Here I've imported the Open Sans font from google fonts.

is there a way to import a font thats not hosted on googles api webfonts. If so could you please explain how to do so with a dafont font .ttf or a webfontkit

 

Link to post
Share on other sites
Floflobel

Floflobel 21

Posted
Posted

Hello,

On my homepage my icons of the number of episodes (picture 1) left to watch is displayed well but when I go to a series it is displayed in the middle (picture 2).

Do you have a workaround to solve the problem?

/* Make Played Indicator into Ribbon RHS */
.cardIndicators {right: -21px !important; top: 4px !important; left: initial;}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; background-color: #94131E; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 110px; right: unset;}
div.playedIndicator i {transform: rotate(-45deg);}
.listItemIndicators {top: 4px !important; right: -21px !important;}
.playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; background-color: #94131E; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.progressring {right: 28px;}

/* Ribbon For Video Indicator LHS */
.videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
div.videoIndicator i {transform: rotate(45deg);}

post-259220-0-80993800-1584492054_thumb.png

 

post-259220-0-59965300-1584492058_thumb.png
 

Link to post
Share on other sites
Happy2Play

Happy2Play 4696

Posted
Posted

Hello,

On my homepage my icons of the number of episodes (picture 1) left to watch is displayed well but when I go to a series it is displayed in the middle (picture 2).

 

Do you have a workaround to solve the problem?

/* Make Played Indicator into Ribbon RHS */
.cardIndicators {right: -21px !important; top: 4px !important; left: initial;}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; background-color: #94131E; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 110px; right: unset;}
div.playedIndicator i {transform: rotate(-45deg);}
.listItemIndicators {top: 4px !important; right: -21px !important;}
.playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; background-color: #94131E; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.progressring {right: 28px;}

/* Ribbon For Video Indicator LHS */
.videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
div.videoIndicator i {transform: rotate(45deg);}

attachicon.giffirefox_RaLvGu0GLa.png

 

attachicon.giffirefox_hXO7cWltyC.png

 

Did you see this? You will need to add borders back in.

https://emby.media/community/index.php?/topic/36755-some-css-fixes-tweaks/?p=858211

  • Like 1
Link to post
Share on other sites
  • 1 month later...
danergo

danergo 6

Posted
Posted

Guys, I know this is not possible directly from CSS, but most users in this topic is involved in some customization and I didn't want to open a new topic.

 

I'd like to add a new link (a href...) to the sidebar, let's say between "Sign out" and "Settings", what shall be the easiest way doing it?

 

5eb988c263a79_emby_newmenu.png

Link to post
Share on other sites
Happy2Play

Happy2Play 4696

Posted
Posted

Guys, I know this is not possible directly from CSS, but most users in this topic is involved in some customization and I didn't want to open a new topic.

 

I'd like to add a new link (a href...) to the sidebar, let's say between "Sign out" and "Settings", what shall be the easiest way doing it?

 

5eb988c263a79_emby_newmenu.png

 

Similar to this

 

https://emby.media/community/index.php?/topic/85931-emby-server-4508-hamburger-menu-usability-defect/page-2&do=findComment&comment=880823

Link to post
Share on other sites
  • 1 month later...
danergo

danergo 6

Posted
Posted

Thanks, Happy2Play!

One more question regarding custom CSS: is there any way to put "@media (min-size: xy)" config? Does not seem to be taken into account if I do that.

Link to post
Share on other sites
  • 4 months later...
gtxr24

gtxr24 4

Posted
Posted (edited)

Hi all I've had a look round but cannot find anything specific to what I'm looking for but is it possible to add a notes field/text box into my user accounts either when creating a user or an already created user via CSS or other method, thank you 

Edited by gtxr24
Link to post
Share on other sites
  • 1 month later...
Prism16

Prism16 1

Posted
Posted
On 08/11/2020 at 22:06, gtxr24 said:

Hi all I've had a look round but cannot find anything specific to what I'm looking for but is it possible to add a notes field/text box into my user accounts either when creating a user or an already created user via CSS or other method, thank you 

Not possible via css alone, would need injecting into the html by javascript i think which isn't my area, maybe one of the lads can assist though..

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
 Share
Followers 15
Go to topic listing
×
×
  • Create New...