[Obsidian Publish] Site Logo

[jacklaing]

Enable us to upload a logo that would be displayed instead of the site title (in the top left corner). Clicking this logo should work the same way (redirecting to the start page).

If this could alternatively be done with CSS, I’d love to know how!

[GreenFlux]

+1 for site logo!

[SSEE.ME]

+1 for site logo!

[anthonyamar]

+1 for site logo !

[jacklaing]

Looks like someone figured out how to do it with the publish.css file

Obsidian publish is great, thank you

this is the code i put into my publish.css file: .site-body-left-column-site-name::before { background: none; display: block; content: url(https://chad-bennett.github.io/links/meCircle.png); width: 100%; } you have to have the image stored publicly on the web somewhere, so i’m hosting it on github. guess i could have it somewhere on the publish site and get the url link so at least it is saved with the rest of the site. it is a png with transparent background so it doesn’t loo…

[jacklaing]

@misterchad’s CSS didn’t quite work for my image size, but I figured out a variant with the help of @CurioHeart and also added a logo that displays on mobile.

/* Site Logo */

.search-view-container {
  margin: 100px 0;
}

.site-body-left-column-site-name {
    color: transparent;
    line-height: 0;
    padding: 0;
}

.site-body-left-column-site-name::before {
    display: block;
    content: url(https://daobase.github.io/daobase-assets/logo_obsidian_publish.png);
    width: 100%;
    transform: scale(0.085);
    -webkit-transform-origin-x: left;
    -webkit-transform-origin-y: top;
    position: absolute;
}

  /* Site Logo Mobile */

.site-header-text {
  color: transparent;
}

.site-header {
  background: url(https://daobase.github.io/daobase-assets/logo_obsidian_publish.png) no-repeat;
  padding: 10px 10px 10px 10px;
  background-position-x: center;
  background-size: contain;
}

You’ll need to adjust transform: scale(0.085); and .search-view-container { margin: 100px 0; depending on the dimensions of your logo.

If you want the name of your site to be displayed, remove the transparent lines and adjust line-height/padding to make it play nicely with the logo.

[misterchad]

this looks great. tested it out on my site. the aesthetic isn’t what i’m looking for, but it is functional. good work.

[yangwao]

As native add logo feature somehow doesn’t work for me, I found this thread and another resource and need to try it out Obsidian Publish CSS Tips
Hence it takes time since making publish till I see changes live so, it’s quite takes time when I see if it worked out

Edit, both solution in this thread, one I’ve posted doesn’t work, even I tried built-in, doesnt work for me. Happy to debug on Discord

[WhiteNoise]

This was implemented at some point