Need help? Check out our Support site, then


replacing header text with logo and keeping header image

  1. Hi,

    I need to replace header text (currently removed) in my blog with a .jpg logo and then below have a header image. What would be the way to do that? (I have upgraded)

    The blog I need help with is crealitycheck.com.

  2. You can use a CSS image replacement technique to do that. Here is an example for the Coraline theme:

    #site-title a {
    	text-align: left;
    	text-indent: -9999px;
    	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
    	display: block;
    	width: 176px;
    	height: 145px;
    	margin: 0 auto;
    }

    Replace the url() value with your own image link and adjust the width and height values.

    I tested using the demo site at http://coralinedemo.wordpress.com/ so if your settings and custom CSS are different, you may need to adjust the example.

  3. Thanks much for the reply - I am a novice though and do not know where this should be done - need the path to get there, seem like I am getting better but still not sure where things are of this nature. The logo will have to be in the center of the page, just in case this matters. Thanks much for your patience!:-)

  4. :) To add new CSS, go to Appearance → Themes → Customize → CSS panel. In order to make custom CSS visible to the world, you must also purchase the Custom Design upgrade—but anyone can try it out in the CSS editor before purchasing.

  5. It worked!! You ARE a happiness engineer!:-) Two questions: a) there is too much white space above the logo - how do I manage that? b) the mobile version is messed up - the logo goes way wider than the mobile blog page..what to do? Thanks so much for help!

  6. fabianapsimoes
    Staff

    Hi there,

    a) The following CSS might solve the white space above your logo. Can you give it a try? :)

    #masthead {
        padding-top: 0;
    }

    b) The width of your logo was set to 1990px. If you notice, in the desktop version you also get a horizontal scroll bar. This might solve the issue:

    #site-title a {
        width: 100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic