How does one go about setting a different logo replacement image for individual post pages?

Help Customization
1

Quick question, which I hope was summed up adequately in the title, but I have a few blogs on W.a, in which I’ve replaced the default test title with a picture. I believe there’s another thread on here that goes more into detail, but it looks like this (https://anxiety.fun) and can be achieved by editing some CSS which looks like this:

#blog-title a {
background-image url(https://i.snap.as/xxxxxxx.ext);
background-position: center;
background-repeat: no-repeat;
color: rgba(0,0,0,0);
display: inline-block;
width: 200px;
height: 200px;
background-size: 200px 200px;
}
#post #blog-title a, #subpage #blog-title a {
/* Change size of logo on post and tags pages */
width: 100px;
height: 100 px;
background-size: 100px 100px;

You’ll wanna supplement that Snap.as URL with your own, or the address for whichever site you’re hosting the file on, after which, you can tinker with the pixel proportions. Anyways, I shared that mostly to give an idea of where I’m at thus far with this. On a newer blog of mine, I’d wanted to hopefully use a different picture from the one on the main page, for the individual post pages, on which the image is smaller and up in the top left hand corner. I don’t know whether this is possible, but I’ve been repeatedly surprised by the things I’ve assumed I couldn’t customize on here, but have come to learn is easily done with the appropriate snippet of code. Does anyone know of a way by which I might go about achieving this? Maybe @cjeller1592 might have a trick up his sleeve?

Cheers and thanks! :slight_smile:

2

So if I understand this, you want the individual post page logo to be different than the main page logo?

Just as you intuited, this is actually pretty simple to do. All you need to do is change the following
CSS property with the logo you want for blog titles:

background-image: url(https://i.snap.as/one-photo.png);

And all you have to do is add that to the CSS that affects the blog titles on the individual pages and you’ll be golden. Here’s an example of this in action using the code for the initial Add a logo to your blog title solution.

/* This is for the logo of the main page */

#blog-title a {
    background-image: url(https://i.snap.as/one-photo.png);
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(0,0,0,0);
    display: inline-block;
    width: 200px;
    height: 50px;
    background-size: 200px 50px;
}

/* This is for the logo on the individual posts */

#post #blog-title a, #subpage #blog-title a {
    /* Change the logo url */
    background-image: url(https://i.snap.as/another-photo.png);
    width: 100px;
    height: 36px;
    background-size: 100px 25px;
}

Now you’ll probably have to change the width and height to make it work for your image, but the solution should do the trick.

Let me know if that helps in any way — if not, we’ll think of something!