Suburbia theme replace site title with image

  • Author
    Posts
  • #1519835

    What do I need to put in the CSS editor to replace the site title in the Suburbia theme with an image?

    In this theme the header image is the square one on the left. I want it to stay how it is. I need to know how to replace the site title text (currently blank) with an image. So my site would have the lady gravatar, an image, and then the tagline as-is on the right.

    Thanks for all your help!

    The blog I need help with is memphistypehistory.wordpress.com.

    #1519983

    Hi, I would suggest the code below, which puts the image into the site title div.

    #site-title {
        background: url("http://memphistypehistory.files.wordpress.com/2013/11/screen-shot-2013-11-08-at-1-15-08-pm1.png") no-repeat scroll left top / contain rgba(0, 0, 0, 0);
        height: 70px;
    }

    I would suggest resizing your header image to about 130px in width. Right now I’ve used contain for the background size to make it fit in the available space. Upload a new image, get the URL and replace the URL in the above. You can also play with the height and match it to the height of your final image.

    #1520028

    That worked like a charm! I can’t thank you enough.

    Is there a way to adjust the padding of the image and push it down a bit so that I can position it more center aligned with the header image on the left?

    #1520030

    justpi
    Member

    Where it says “left top” in the above code, change it to “left 25px” and adjust the px value. If you want more than 27px you’ll have to increase the height value too.
    (And then you might also need to adjust the positioning of the tagline, and maybe also decrease the space below the header area.)

    #1520053

    Thank you justpi! Worked great!

    #1520098

    I wanted to do exactly the same thing and found this thread really useful. I problem I now have, however, is that since replacing the site title with an image, the blog’s title is no longer included on the browser window and I worry that it’ll affect search engine displays. Is there any way to remedy this please? My blog can be found at http://lifeasawidower.com. Thanks a lot.

    #1520099

    Hi @lifeasawidower, what you want to do when you insert the image is to go to Appearance > Header and under “Header Text, deselect “Show header text with your image” and then you can put your site title back in at Settings > General and it will be there in the tabs and browser bar, but will not show at the top of the site.

    #1520100

    Thanks a lot, but this doesn’t work in the way I was hoping it would. It leaves me without the site title, tagline or the image I was trying to insert to replace the site title with. I think that’s because the CSS is replacing the site title so if you deselect “Show header text with your image” nothing shows up at all.

    #1520101

    I’ve just realised that this might not be clear. I’m trying to replace the site title with an image (just a logo I’ve created), which sits alongside the header image. I’m not trying to have a completely blank space next to the header image. Essentially I want it to look exactly as it does here: http://lifeasawidower.com but the way it is set up at the moment means that the site title doesn’t show up in the browser window. Thanks

    #1520102

    Add this to your CSS and save, and then go back to Settings > General, add your site title and save.

    #site-title a {
        color: rgba(0, 0, 0, 0);
    }
    #1520103

    That has worked perfectly. Thanks very much.

    #1520104

    You are welcome.

The topic ‘Suburbia theme replace site title with image’ is closed to new replies.