Jump to content

Changing logo on home screen.


BrentTheZebra

Recommended Posts

BrentTheZebra

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. 

  

Screen Shot 2021-08-20 at 2.41.11 AM.png

Screen Shot 2021-08-20 at 2.36.13 AM.png

Link to comment
Share on other sites

tomnjerry74

Easiest way to do this is with custom CSS:

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

 

  • Like 1
Link to comment
Share on other sites

Happy2Play

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.

  • Agree 1
Link to comment
Share on other sites

tomnjerry74
7 minutes ago, BrentTheZebra said:

Thank you it worked!! 

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

Screen Shot 2021-08-20 at 12.51.40 PM.png

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

Edited by tomnjerry74
Link to comment
Share on other sites

  • 3 weeks later...
synkoptik
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!

Link to comment
Share on other sites

synkoptik
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?

Link to comment
Share on other sites

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

  

Screen Shot 2021-08-20 at 2.41.11 AM.png

 

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

logowhite.thumb.png.9fff253558d59b60347b2a85828c0a6a.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Happy2Play
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;
Link to comment
Share on other sites

  • 3 weeks later...
  • 6 months later...
drashna
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

Link to comment
Share on other sites

  • 1 year later...
utah-dave

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

Link to comment
Share on other sites

  • 4 weeks later...
Happy2Play
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.

 

  • Thanks 1
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...