Changing logo on home screen.

August 20, 2021

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.

August 20, 2021

Easiest way to do this is with custom CSS:

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

August 20, 2021

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.

August 20, 2021

Thank you it worked!!

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

August 20, 2021

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

August 20, 2021

Got it thanks

September 9, 2021

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!

September 9, 2021

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?

September 9, 2021

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!

September 9, 2021

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).

September 9, 2021

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.

September 10, 2021

Here's the images that I used

September 10, 2021

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 :)

September 10, 2021

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;

September 30, 2021

I tried that and it didn't work.

April 23, 2022

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

January 11, 2024

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

February 7, 2024

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.

April 23, 2024

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

April 23, 2024

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.

image.png.ebdbfa8cc7012e56b21a549d3ab080a7.png

What exactly did you use?

April 23, 2024

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

image.png.7e03afd8454e76facde980d42094c03b.png

April 23, 2024

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

Sign In

Changing logo on home screen.

Recommended Posts

BrentTheZebra 1

tomnjerry74 96

Happy2Play 9352

BrentTheZebra 1

tomnjerry74 96

BrentTheZebra 1

synkoptik 0

synkoptik 0

synkoptik 0

Happy2Play 9352

Happy2Play 9352

BrentTheZebra 1

BrentTheZebra 1

Happy2Play 9352

BrentTheZebra 1

drashna 47

utah-dave 5

Happy2Play 9352

Angel273 6

Happy2Play 9352

Angel273 6

Happy2Play 9352

Create an account or sign in to comment

Create an account

Sign in

Activity