Add a logo to your blog title

Help Customization
1

Pro users can add a logo to their blog header by uploading it to somewhere like Snap.as and adding a bit of CSS.

Add a logo to your title

This will add a logo to the left of the blog title, as seen on the Snap.as blog:

#blog-title a {
 background: transparent url('https://snap.as/img/logo-mark-sm.png') no-repeat bottom left;
 padding-left: 42px;
}

(just replace https://snap.as/img/logo-mark-sm.png with the URL for your image, and adjust the padding-left to fit)

Replace the title with an image

To replace the title with an image entirely, use this:

#blog-title a {
    background-image: url(https://snap.as/img/logo.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;
}
#post #blog-title a, #subpage #blog-title a {
    /* Change size of logo on post and tags pages */
    width: 100px;
    height: 36px;
    background-size: 100px 25px;
}

(be sure to replace https://snap.as/img/logo.png with your image URL and adjust the width, height, and background-size)

9 Likes
2

If you add this argument to #blog-title a

border-radius: 50%;

You have a smooth circle image…

6 Likes
3

What if I want to replace the title with a bigger image than the original title? Can I do that? Thank you!

1 Like
4

@Matt,

Recommendations:

  1. For now, adding the code examples above to the Customization Guide’s CSS section.
  2. Long term, making it as easy as changing your profile picture on Twitter. I spent a lot of time messing around trying to get it to work. Most normies are simply going to run the other way when they see CSS. Continue to let the purists use CSS, but let the normies just upload a profile pic like they can to most platforms without having to worry about technicalities.
2 Likes
5

Thanks. To clarify, I think you are saying I can make my title image larger by using CSS. Is that correct? Thank you.

6

Yes. See the “width” and “height” parts in the code posted above and play around with it until you get the look you want.

7

Thank you, very much.

8

It’s been awhile since I’ve delved too deeply into CSS. Is there currently a way to add a logo (or avatar) rather than replace the title with it? I’m speaking here of the fuller-size approach used here in the replace method, obviously, since the other method here is to put a tiny one next to the title. Trying to suss out a way to have, stacked, avatar/title/description on the collection page and then just the usual title on the post pages.

9

This seems to work (because instead of going to bed dead tired, I took out the laptop and tinkered).

body#collection #blog-title a {
background-image: url(image.png);
background-position: center top;
background-repeat: no-repeat;
display: inline-block;
width: 100%;
background-size: 125px 125px;
padding-top: 155px;
}

At least it’s doing what I want on write.house/bix at the moment.

5 Likes
10

Has this changed? I get a blue weird something in the top right part of the title.

11

Matt - My theme has CSS that begins at the top (under the autor’s blurb) with:
*/

html {
border-top: 12px solid #2E3440;
border-bottom: 12px solid #2E3440;
}
Would your ADD Image LOGO code go above this with/without a space between?