Use logo for title in Twenty Eleven

  • Unknown's avatar

    Hi there,
    trying to replace site title with the image using code

    #site-title a {
    background-image: url("URL_of_image");
    color:transparent;
    }

    working fine in FF, safari and IE9, does not work in IE8 sit ename apears on top of the image.
    adding of opacity parameters:

    opacity:0.0;
    filter:alpha(opacity=0);

    affects text as well as image, they became transparent together.

    what code needs to be out in custom CSS to satisfy IE8 nd do not affect site visibility in other browsers?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    This is an issue with IE, which doesn’t recognize “transparent” as a color attribute. Everything else in the world does, but not IE.

    Put your logo in #site-title instead and then do the color transparent and the opacity/filter:alpha thing for #site-title a . Do note though that this might not (probably won’t) work with IE7 and certainly not IE6.

    If that doesn’t work, then we have to pull out the nuclear option.

  • Unknown's avatar

    thesacredpath, thanks for your reply.
    Just tried your suggestion, but unfortunately, doesn’t work.

  • Unknown's avatar

    Yeah, I didn’t know if that would work or not, but it was worth a try. Here is the outline of the nuclear option.

    1. use display none to hide the title and tagline.
    2. Put the image into #site-title (set height and width if necessary to match the logo dimensions).
    3. Make a transparent PNG file (no background color) the same dimensions of your logo and put it into a text widget and link it to the home page.
    4. Use position absolute, top and right or left declarations to move the text widget with the transparent linked image up and over the logo.

    I can help with #4 when you have everything ready as sometimes it can be a little tricky.

  • The topic ‘Use logo for title in Twenty Eleven’ is closed to new replies.