Need help? Check out our Support site, then


Suburbia theme - problem replacing title with image

  1. angelawilson2014
    Member

    My site is http://funnymatters.co.uk. I wanted to insert an image in place of the site title (but still keep the tagline) so I inserted the below:

    #site-title {
    background: url("http://funnymatters.co.uk/wp-content/uploads/2014/11/Funny-Matters-new-header-title.png") no-repeat scroll left 20px / contain rgba(0, 0, 0, 0);
    height: 70px;
    }

    However, it only works if I delete the title of the site ('Funny Matters') from the Settings>General box which means that it doesn't appear at the top of the browser window.

    If I put the title of the site back in the Settings>General box then both the site title and the image appear on top of each other.

    And if I deselect the 'show header text with your image' in the Appearance>Header section, nothing comes up at all. (this is how I've currently got it setup)

    Ideally I want for the header image to be displayed (instead of the title), plus the tagline, and for the site name and tagline to both appear at the top of the browser window. Is this possible?

    Any help would be so appreciated. Thanks in advance!

    The blog I need help with is funnymatters.co.uk.

  2. thesacredpath
    Staff

    Hi @angelawilson2014, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.

    For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

    The differences between WordPress.com and WordPress.org.

    I did take a quick look at your site, and in addition to adding the image, you need to make the existing text invisible. I've done that by setting it to a transparent color for #site-title a.

    #site-title {
        background: url("http://funnymatters.co.uk/wp-content/uploads/2014/11/Funny-Matters-new-header-title.png") no-repeat scroll left 20px / contain rgba(0, 0, 0, 0);
        height: 70px;
    }
    #site-title a {
        color: rgba(0, 0, 0, 0);
        display: block;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic