Changing logo on home screen.

[BrentTheZebra 1]

How would I go about changing the home screen logo on the top left? I figured out how to change the initial boot logo, but I can't figure out how to change the home screen one. As you can see I have a red theme lol. I've provided pictures below. 

  

[tomnjerry74 94]

Easiest way to do this is with custom CSS:

.pageTitleWithDefaultLogo{background-image:url(https://myserver/customlogo.svg)!important}

 

[Happy2Play 8296]

Yes hosted image works.  

I personally just replace the "logowhite.png" as that is what is shown for logo and splash screen, but has to be done with every update.

[BrentTheZebra 1]

Thank you it worked!! 

Can I do custom css on my Roku TV Emby app?

[tomnjerry74 94]

7 minutes ago, BrentTheZebra said:

Thank you it worked!! 

Can I do custom css on my Roku TV Emby app?

Nice! And unfortunately you aren’t able to change any of the client app assets. Only the web-ui.

Edited August 20, 2021 by tomnjerry74

[BrentTheZebra 1]

Got it thanks

[synkoptik 0]

On 8/20/2021 at 12:14 PM, Happy2Play said:

Yes hosted image works.  

I personally just replace the "logowhite.png" as that is what is shown for logo and splash screen, but has to be done with every update.

Hey there, where can I find that logowhite.png file?  I have a Linux box Ubuntu Server 20.10.  Thank!

[synkoptik 0]

On 8/20/2021 at 7:02 AM, tomnjerry74 said:

Easiest way to do this is with custom CSS:

.pageTitleWithDefaultLogo{background-image:url(https://myserver/customlogo.svg)!important}

 

Where does this go though?  I'm lost here.  How do I insert that CSS code into Emby?

[synkoptik 0]

On 8/20/2021 at 2:45 AM, BrentTheZebra said:

How would I go about changing the home screen logo on the top left? I figured out how to change the initial boot logo, but I can't figure out how to change the home screen one. As you can see I have a red theme lol. I've provided pictures below. 

  

 

My I ask where you found that file?  I would like to change my logo too!  Thanks so much!

[Happy2Play 8296]

8 minutes ago, synkoptik said:

Hey there, where can I find that logowhite.png file?  I have a Linux box Ubuntu Server 20.10.  Thank!

Look at the top of a server log and you will see the "Application path:" within the system folder you would go to "\dashboard-ui\modules\themes"

6 minutes ago, synkoptik said:

Where does this go though?  I'm lost here.  How do I insert that CSS code into Emby?

It goes in the custom css box on Dashboard-Settings.  Note custom css only applies to the web client (not the online web client).

[Happy2Play 8296]

2 hours ago, synkoptik said:

My I ask where you found that file?  I would like to change my logo too!  Thanks so much!

Note sure what color OP actually used, I just edited original image filling new color.

[BrentTheZebra 1]

Here's the images that I used

[BrentTheZebra 1]

html:root {
  --theme-primary-color:#B41803;
  --theme-accent-color:#B41803;
  --theme-primary-color-lightened:#B41803;
  --theme-accent-text-color:#B41803;
  --theme-icon-focus-background: #262628;
  --docked-drawer-background: #2F2F30;
  --theme-text-color: #ffffff;
  --header-blur-background: #2F2F30;
  --theme-background: #242125;
  --theme-body-secondary-text-color: #ffffff;
  --card-background: #2F2F30;
  --theme-text-color-opaque: #ffffff;
  --theme-body-secondary-text-color: #C3C3C3;
}

.btnHeaderPremiere { 
  display: none ! important; 
}

.pageTitleWithDefaultLogo {
  background-image: url(https://www.dropbox.com/s/871caw9u4udnsko/logo.png?dl=1)!important;
}

.skinHeader-withBackground {
  background-color: #2F2F30!important; 
}

#txtCustomCss.textarea-mono.emby-textarea {
  background: #2F2F30;
}

p#pUpToDate i.md-icon {
  background-color: #B41803 !important; 
}

#txtLoginDisclaimer{
  background: #2F2F30;
}

#selectLocalizationLanguage{
  background: #2F2F30;
}

#txtCachePath {
  background: #2F2F30;
}

.emby-select-withcolor.emby-select {
  background: #2F2F30;
}

.txtNewPasswordConfirm.emby-input {
  background: #2F2F30;
}

.txtNewPassword.emby-input {
  background: #2F2F30;
}

.txtCurrentPassword.emby-input {
  background: #2F2F30;
}

.txtConnectUserName.emby-input {
  background: #2F2F30;
}

.txtUserName.emby-input {
  background: #2F2F30;
}

#txtSupporterKey.emby-input {
  background: #2F2F30;
}

#txtValue.emby-input {
  background: #2F2F30;
}

#txtDirectoryPickerPath.emby-input { 
   background: #2F2F30;
}

#txtNetworkPath.emby-input { 
   background: #2F2F30;
}

#txtLanNetworks.emby-input { 
   background: #2F2F30;
}

#txtLocalAddress.emby-input {
  background: #2F2F30;
}

#txtPortNumber.emby-input {
  background: #2F2F30;
}

#txtHttpsPort.emby-input {
  background: #2F2F30;
}

#txtExternalAddressFilter.emby-input {
  background: #2F2F30;
}

#txtPublicPort.emby-input {
  background: #2F2F30;
}

#txtPublicHttpsPort.emby-input {
  background: #2F2F30;
}

#txtDdns.emby-input {
  background: #2F2F30;
}

#txtCertificatePath.emby-input {
  background: #2F2F30;
}

#txtCertPassword.emby-input {
  background: #2F2F30;
}

#txtRemoteClientBitrateLimit.emby-input {
  background: #2F2F30;
}

#txtTranscodingTempPath.emby-input {
  background: #2F2F30;
}

#txtDownMixAudioBoost.emby-input {
  background: #2F2F30;
}

#txtH264Crf.emby-input {
  background: #2F2F30;
}

#txtSyncTempPath.emby-input {
  background: #2F2F30;
}

#txtUploadSpeedLimit.emby-input {
  background: #2F2F30;
}

#txtAddic7edUsername.emby-input {
  background: #2F2F30;
}

#txtAddic7edPassword.emby-input {
  background: #2F2F30;
}

#txtNumTrailers.emby-input {
  background: #2F2F30;
}

#txtCustomIntrosPath.emby-input {
  background: #2F2F30;
}

#txtCodecIntrosPath.emby-input {
  background: #2F2F30;
}

#txtOpenSubtitleUsername.emby-input {
  background: #2F2F30;
}

#txtOpenSubtitlePassword.emby-input {
  background: #2F2F30;
}

.txtUrl.emby-input {
  background: #2F2F30;
}

#txtCustomName.emby-input {
  background: #2F2F30;
}

.focuscontainer.dialog.actionSheet.dialog-blur.actionsheet-padded-bottom.actionsheet-padded-top.dialog-transformorigin-lefttop.opened.dialog-blur {
  color: #ffffff;
  background: #2F2F30;
}

#txtUploadPath.emby-input {
  background: #2F2F30; 
}

#txtName.emby-input {
  background: #2F2F30; 
}

#txtMaxAllowedBitrate.emby-input {
  background: #2F2F30; 
}

#txtMusicStreamingTranscodingBitrate.emby-input {
  background: #2F2F30; 
}

#txtInput.emby-input {
  background: #2F2F30; 
}

#txtIdFriendlyName.emby-input {
  background: #2F2F30; 
}

#txtIdManufacturer.emby-input {
  background: #2F2F30; 
}

#txtIdManufacturerUrl.emby-input {
  background: #2F2F30; 
}

#txtIdModelName.emby-input {
  background: #2F2F30; 
}

#txtIdModelNumber.emby-input {
  background: #2F2F30; 
}

#txtIdModelDescription.emby-input {
  background: #2F2F30; 
}

#txtIdModelUrl.emby-input {
  background: #2F2F30; 
}

#txtIdSerialNumber.emby-input {
  background: #2F2F30; 
}

#txtIdDeviceDesription.emby-input {
  background: #2F2F30; 
}

#txtAlbumArtPn.emby-input {
  background: #2F2F30; 
}

#txtAlbumArtMaxWidth.emby-input {
  background: #2F2F30; 
}

#txtAlbumArtMaxHeight.emby-input {
  background: #2F2F30; 
}

#txtIconMaxWidth.emby-input {
  background: #2F2F30; 
}

#txtIconMaxHeight.emby-input {
  background: #2F2F30; 
}

#txtInfoFriendlyName.emby-input {
  background: #2F2F30; 
}

#txtInfoManufacturer.emby-input {
  background: #2F2F30; 
}

#txtInfoManufacturerUrl.emby-input {
  background: #2F2F30; 
}

#txtInfoModelName.emby-input {
  background: #2F2F30; 
}

#txtInfoModelNumber.emby-input {
  background: #2F2F30; 
}

#txtInfoModelDesription.emby-input {
  background: #2F2F30; 
}

#txtInfoModelUrl.emby-input {
  background: #2F2F30; 
}

#txtInfoSerialNumber.emby-input {
  background: #2F2F30; 
}

#txtProtocolInfo.emby-input {
  background: #2F2F30; 
}

#txtXDlnaCap.emby-input {
  background: #2F2F30; 
}

#txtXDlnaDoc.emby-input {
  background: #2F2F30; 
}

#txtSonyAggregationFlags.emby-input {
  background: #2F2F30; 
}

#txtClientDiscoveryInterval.emby-input {
  background: #2F2F30; 
}

#txtBlastInterval.emby-input {
  background: #2F2F30; 
}

#txtRecordingPath.emby-input {
  background: #2F2F30; 
}

#txtMovieRecordingPath.emby-input {
  background: #2F2F30; 
}

#txtSeriesRecordingPath.emby-input {
  background: #2F2F30; 
}

#txtPrePaddingMinutes.emby-input {
  background: #2F2F30; 
}

#txtPostPaddingMinutes.emby-input {
  background: #2F2F30; 
}

#txtPostProcessor.emby-input {
  background: #2F2F30; 
}

#txtPostProcessorArguments.emby-input {
  background: #2F2F30; 
}

toggleLabel.emby-toggle:checked+.toggleLabel::before {
  background: #fff;
}

.mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open.mainDrawer {
  opacity: 96%;
}

As well as my css. Enjoy :)

[Happy2Play 8296]

15 hours ago, BrentTheZebra said:

html:root {
  --theme-primary-color:#B41803;
  --theme-accent-color:#B41803;
  --theme-primary-color-lightened:#B41803;
  --theme-accent-text-color:#B41803;
  --theme-icon-focus-background: #262628;
  --docked-drawer-background: #2F2F30;
  --theme-text-color: #ffffff;
  --header-blur-background: #2F2F30;
  --theme-background: #242125;
  --theme-body-secondary-text-color: #ffffff;
  --card-background: #2F2F30;
  --theme-text-color-opaque: #ffffff;
  --theme-body-secondary-text-color: #C3C3C3;
}

.btnHeaderPremiere { 
  display: none ! important; 
}

.pageTitleWithDefaultLogo {
  background-image: url(https://www.dropbox.com/s/871caw9u4udnsko/logo.png?dl=1)!important;
}

.skinHeader-withBackground {
  background-color: #2F2F30!important; 
}

#txtCustomCss.textarea-mono.emby-textarea {
  background: #2F2F30;
}

p#pUpToDate i.md-icon {
  background-color: #B41803 !important; 
}

#txtLoginDisclaimer{
  background: #2F2F30;
}

#selectLocalizationLanguage{
  background: #2F2F30;
}

#txtCachePath {
  background: #2F2F30;
}

.emby-select-withcolor.emby-select {
  background: #2F2F30;
}

.txtNewPasswordConfirm.emby-input {
  background: #2F2F30;
}

.txtNewPassword.emby-input {
  background: #2F2F30;
}

.txtCurrentPassword.emby-input {
  background: #2F2F30;
}

.txtConnectUserName.emby-input {
  background: #2F2F30;
}

.txtUserName.emby-input {
  background: #2F2F30;
}

#txtSupporterKey.emby-input {
  background: #2F2F30;
}

#txtValue.emby-input {
  background: #2F2F30;
}

#txtDirectoryPickerPath.emby-input { 
   background: #2F2F30;
}

#txtNetworkPath.emby-input { 
   background: #2F2F30;
}

#txtLanNetworks.emby-input { 
   background: #2F2F30;
}

#txtLocalAddress.emby-input {
  background: #2F2F30;
}

#txtPortNumber.emby-input {
  background: #2F2F30;
}

#txtHttpsPort.emby-input {
  background: #2F2F30;
}

#txtExternalAddressFilter.emby-input {
  background: #2F2F30;
}

#txtPublicPort.emby-input {
  background: #2F2F30;
}

#txtPublicHttpsPort.emby-input {
  background: #2F2F30;
}

#txtDdns.emby-input {
  background: #2F2F30;
}

#txtCertificatePath.emby-input {
  background: #2F2F30;
}

#txtCertPassword.emby-input {
  background: #2F2F30;
}

#txtRemoteClientBitrateLimit.emby-input {
  background: #2F2F30;
}

#txtTranscodingTempPath.emby-input {
  background: #2F2F30;
}

#txtDownMixAudioBoost.emby-input {
  background: #2F2F30;
}

#txtH264Crf.emby-input {
  background: #2F2F30;
}

#txtSyncTempPath.emby-input {
  background: #2F2F30;
}

#txtUploadSpeedLimit.emby-input {
  background: #2F2F30;
}

#txtAddic7edUsername.emby-input {
  background: #2F2F30;
}

#txtAddic7edPassword.emby-input {
  background: #2F2F30;
}

#txtNumTrailers.emby-input {
  background: #2F2F30;
}

#txtCustomIntrosPath.emby-input {
  background: #2F2F30;
}

#txtCodecIntrosPath.emby-input {
  background: #2F2F30;
}

#txtOpenSubtitleUsername.emby-input {
  background: #2F2F30;
}

#txtOpenSubtitlePassword.emby-input {
  background: #2F2F30;
}

.txtUrl.emby-input {
  background: #2F2F30;
}

#txtCustomName.emby-input {
  background: #2F2F30;
}

.focuscontainer.dialog.actionSheet.dialog-blur.actionsheet-padded-bottom.actionsheet-padded-top.dialog-transformorigin-lefttop.opened.dialog-blur {
  color: #ffffff;
  background: #2F2F30;
}

#txtUploadPath.emby-input {
  background: #2F2F30; 
}

#txtName.emby-input {
  background: #2F2F30; 
}

#txtMaxAllowedBitrate.emby-input {
  background: #2F2F30; 
}

#txtMusicStreamingTranscodingBitrate.emby-input {
  background: #2F2F30; 
}

#txtInput.emby-input {
  background: #2F2F30; 
}

#txtIdFriendlyName.emby-input {
  background: #2F2F30; 
}

#txtIdManufacturer.emby-input {
  background: #2F2F30; 
}

#txtIdManufacturerUrl.emby-input {
  background: #2F2F30; 
}

#txtIdModelName.emby-input {
  background: #2F2F30; 
}

#txtIdModelNumber.emby-input {
  background: #2F2F30; 
}

#txtIdModelDescription.emby-input {
  background: #2F2F30; 
}

#txtIdModelUrl.emby-input {
  background: #2F2F30; 
}

#txtIdSerialNumber.emby-input {
  background: #2F2F30; 
}

#txtIdDeviceDesription.emby-input {
  background: #2F2F30; 
}

#txtAlbumArtPn.emby-input {
  background: #2F2F30; 
}

#txtAlbumArtMaxWidth.emby-input {
  background: #2F2F30; 
}

#txtAlbumArtMaxHeight.emby-input {
  background: #2F2F30; 
}

#txtIconMaxWidth.emby-input {
  background: #2F2F30; 
}

#txtIconMaxHeight.emby-input {
  background: #2F2F30; 
}

#txtInfoFriendlyName.emby-input {
  background: #2F2F30; 
}

#txtInfoManufacturer.emby-input {
  background: #2F2F30; 
}

#txtInfoManufacturerUrl.emby-input {
  background: #2F2F30; 
}

#txtInfoModelName.emby-input {
  background: #2F2F30; 
}

#txtInfoModelNumber.emby-input {
  background: #2F2F30; 
}

#txtInfoModelDesription.emby-input {
  background: #2F2F30; 
}

#txtInfoModelUrl.emby-input {
  background: #2F2F30; 
}

#txtInfoSerialNumber.emby-input {
  background: #2F2F30; 
}

#txtProtocolInfo.emby-input {
  background: #2F2F30; 
}

#txtXDlnaCap.emby-input {
  background: #2F2F30; 
}

#txtXDlnaDoc.emby-input {
  background: #2F2F30; 
}

#txtSonyAggregationFlags.emby-input {
  background: #2F2F30; 
}

#txtClientDiscoveryInterval.emby-input {
  background: #2F2F30; 
}

#txtBlastInterval.emby-input {
  background: #2F2F30; 
}

#txtRecordingPath.emby-input {
  background: #2F2F30; 
}

#txtMovieRecordingPath.emby-input {
  background: #2F2F30; 
}

#txtSeriesRecordingPath.emby-input {
  background: #2F2F30; 
}

#txtPrePaddingMinutes.emby-input {
  background: #2F2F30; 
}

#txtPostPaddingMinutes.emby-input {
  background: #2F2F30; 
}

#txtPostProcessor.emby-input {
  background: #2F2F30; 
}

#txtPostProcessorArguments.emby-input {
  background: #2F2F30; 
}

toggleLabel.emby-toggle:checked+.toggleLabel::before {
  background: #fff;
}

.mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open.mainDrawer {
  opacity: 96%;
}

As well as my css. Enjoy

Is there a reason you did each emby-input or not change the html:root value removing 75+ lines?

original code

Quote

.emby-input, .emby-textarea {
    color: inherit;
    background: var(--button-background);
    border: var(--line-size) solid var(--button-background);
}

 

html:root
	--button-background: #2F2F30;

[BrentTheZebra 1]

I tried that and it didn't work. 

[drashna 46]

On 8/20/2021 at 7:02 AM, tomnjerry74 said:

Easiest way to do this is with custom CSS:

.pageTitleWithDefaultLogo{background-image:url(https://myserver/customlogo.svg)!important}

 

what about for the initial logo, and such

[utah-dave 4]

Have you guys ever tried to import a photo from good drive or even a sinology NAS?  I am having a hard time to get the URL to work in the css

[Happy2Play 8296]

On 1/11/2024 at 1:19 PM, utah-dave said:

Have you guys ever tried to import a photo from good drive or even a sinology NAS?  I am having a hard time to get the URL to work in the css

You could say script copy the images into say \system\dashboard-ui\modules\themes folder or customized folder location with \system\dashboard-ui with every server update.  As the local images needs to be within the system\dashboard-ui webserver.

 

[Angel273 3]

On 20/8/2021 at 8:02, tomnjerry74 said:

La forma más sencilla de hacerlo es con CSS personalizado:

background-image:url(https://myserver/customlogo.svg)!important}

 

ya no funciona en la vercion Versión 4.8.5.0  

[Happy2Play 8296]

14 minutes ago, Angel273 said:

On 8/20/2021 at 7:02 AM, tomnjerry74 said:

La forma más sencilla de hacerlo es con CSS personalizado:

background-image:url(https://myserver/customlogo.svg)!important}

 

ya no funciona en la vercion Versión 4.8.5.0  

Sorry I don't follow as I just tested and it works with a proper url. used that code and pointed to an image above.

What exactly did you use?

[Angel273 3]

me equivoque me refiero es este logo de inicio cuando carga la pagina principal

[Happy2Play 8296]

1 minute ago, Angel273 said:

I was wrong I mean it's this home logo when it loads the main page

The splash is a little different as it technically loaded before custom css as to why I mentioned changing the physical image or the index.html.  Discussed in other topics.

.app-slash