Bueno: Replace blog title with image

• 

  hrytsk · Member · Dec 26, 2010 at 8:41 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have just upgraded to custom CSS and am unsure of how to do the following:

  On http://selebspy.com I would like to replace the blog title “Seleb Spy” with an image, namely this one:
  http://img.photobucket.com/albums/v72/TATYUK/SelebSpylogo.jpg

  I would like this logo to appear in line with the menu bar (i.e. with the links X Factor, Katie Price…. etc.), i.e. replacing the current blog title position as closely as possible.

  How would I do this using custom CSS?

  Many thanks in advance.

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

• 

  thesacredpath · Member · Dec 26, 2010 at 9:36 pm

  • Copy link

  The following will do it for you.

  #logo {
  background: url("http://img.photobucket.com/albums/v72/TATYUK/SelebSpylogo.jpg") no-repeat scroll 0 0 transparent;
  width: 376px;
  }
  
  .site-title a:link, .site-title a:visited {
  color: transparent;
  }

  One note though. There are only two here in the forums that volunteer to answer CSS questions, and we are not always around, so for the most part you need to have a general understanding of CSS and how it relates to the markup (HTML). Waiting for one of us to show up might at times take a few days or even a week.

• 

  hrytsk · Member · Dec 26, 2010 at 10:08 pm

  • Copy link

  Brilliant, thanks a lot, exactly how I wanted it to look.

  Thanks again!

• 

  thesacredpath · Member · Dec 26, 2010 at 10:16 pm

  • Copy link

  You’re welcome.

• 

  hrytsk · Member · Jan 10, 2011 at 1:14 pm

  • Copy link

  Hi again,

  At the time I only viewed my blog in Chrome and Safar which display it correctly.

  However when I viewed it in IE 8 today the old title text ‘SELB SPY’ is still appearing over the new image banner.

  Any idea how to stop this from happening?

  Thanks in advance!

• 

  panaghiotisadam · Member · Jan 10, 2011 at 2:02 pm

  • Copy link

  Try changing the above to this:

  #logo {
  background: url(“http://img.photobucket.com/albums/v72/TATYUK/SelebSpylogo.jpg”) no-repeat scroll 0 0 transparent;
  width: 376px; height: 60px;
  }

  .site-title a:link, .site-title a:visited {
  display: none;
  }

• 

  hrytsk · Member · Jan 10, 2011 at 7:56 pm

  • Copy link

  Great, thank you! That has worked.

  However the logo no longer links back to the home page.

  I can see that that’s because the link is on the site-title and in thesacredpath’s original code this was set to color:transparent, which worked in Safair and Chrome (but not IE).

  Now that the site title is set to display:none, the link goes as well.

  Is there a way to restore the link but ensure the site title does not display? I’ve been looking online for solutions and it seems to be quite tricky to do.