Suburbia theme replace site title with image

  • memphistypehistory · Member ·

    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: (visible only to logged in users)

  • thesacredpath · Member ·

    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.

  • memphistypehistory · Member ·

    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?

  • 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.)

  • memphistypehistory · Member ·

    Thank you justpi! Worked great!

  • benbrooksdutton · Member ·

    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.

  • thesacredpath · Member ·

    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.

  • benbrooksdutton · Member ·

    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.

  • benbrooksdutton · Member ·

    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

  • thesacredpath · Member ·

    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);
}
  • benbrooksdutton · Member ·

    That has worked perfectly. Thanks very much.

  • thesacredpath · Member ·

    You are welcome.

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