Replace site title/description with image (logo)

One way to add a site logo in Panel would be to add support for the Jetpack plugin’s Site Logo feature. There are directions to do that here:

https://jetpack.me/support/site-logo/

If you prefer a CSS-only method, this technique described by Sheri for Pictorico should also work in Panel:

.site-branding {
     max-width: 300px;
}

.site-title {
     width: 300px;
}

.site-title a {
     background: url("https://mydomain.com/wp-content/uploads/your-logo-file.png") no-repeat scroll 0% 0% transparent;
     display: block;
     height: 80px;
     overflow: hidden;
     text-indent: 100%;
     white-space: nowrap;
     width: 300px;
}

Be sure to change the file path to your real logo URL, and adjust the width, max-width, and height as needed, depending on the real dimensions you need.

Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

I’m pretty sure this is exactly what I’m looking for Kathryn, thanks!!! I’ll give this a try over the holidays and report back ??

Great! Let me know how it goes.

Okay… I’ve finally had a chance to look at this again, my apologies for the delay. I’m trying to do as much modification work as possible without coding, as that is not my specialty at all :). Anyways, my version of jetpack does NOT include a ‘site logo’ module – only site icon. It appears this is the latest version of jetpack, however I’m using the www.remarpro.com (self-hosted) version. Could this be why I don’t have the complete functionality of jetpack?

What I provided above are actually two separate and unrelated methods for adding a site logo. ??

To go the CSS-only route – which is really the easiest option if you’re not comfortable with editing code – you’d first need to activate Jetpack Custom CSS module in the Jetpack settings.

After it’s activated, you would then add the CSS I gave you above under Appearance > Edit CSS. Be sure to modify the CSS I gave you with your specific image details such as image path, height and width.

Let me know how it goes.

Any news on this? I’ve tried the stictly-CSS method and Jetpack method, both to no avail. ??

Andrew – could you please start a new thread and provide a link to your site so folks can better help you? Thanks.