Add logo to Tonal Theme

I’ve made a workaround by creating a header image incorporating what I wanted, still interested in how to do this, though, if possible.

FWIF there is a CSS image replacement method. Suppose the logo is 250px width and height and we have the url of the image, our code to use in Custom CSS option ( from plugin or theme provided) will look like this.

.site-title a {
	background: url( "https://dummyimage.com/250x250/000000/ffe0ff.png" );
 	 width: 250px; height: 250px; display: block; margin: 0 auto 50px;
 	 text-indent: 105%; white-space: nowrap;  overflow: hidden;
}

Also we can further adjust the size based on screenwidth, make it smaller on small device.

Your site looks good Rachel. Tonal supports a custom header in the Customizer, where some folks choose to upload a logo.

paulwpxp’s method is also good.

Let us know if you need further help.

Hi guys,

Thanks!

I’m going to use paulwpxp’s method – would you be able to let me have the code to make it responsive to screensize, like the rest of my theme? Currently, the whole logo/header is tiny on my smartphone, and it doesn’t look good!

Kathryn – not sure what you mean? I could only see header background image available? Do you mean the workaround I tried?

You can wrap the CSS paulwpxp gave you in a media query to restrict it to a particular screen size.

For example, this would restrict it to screens at least 1024px wide:

@media screen and (min-width: 1024px) {

  .site-title a {
    background: url( "https://dummyimage.com/250x250/000000/ffe0ff.png" );
    width: 250px; height: 250px;
    display: block;
    margin: 0 auto 50px;
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
  } 

}

You can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Kathryn – not sure what you mean? I could only see header background image available?

Yes, I was referring to the custom header method.