Adding title picture to blog – Help please :)

• 

  axsblogger · Member · Jun 21, 2010 at 5:58 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  So starting a new blog using the Greyzed theme, which is awesome.

  http://axsblogger.wordpress.com

  What I am trying to do is to replace the text that says AXS blog at title position, with this picture:
  http://axsblogger.files.wordpress.com/2010/06/axsblog2.png

  I’m a beginner at CSS, so if you could walk me through it.

  Appreciate the help!

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

• 

  timethief · Member · Jun 21, 2010 at 9:20 pm

  • Copy link

  Please note that CSS is theme specific here at wordpress.com, there is no official Staff support for the CSS upgrade, and precious little Volunteer support for it, so please be patient and consult tutorials found here > http://en.support.wordpress.com/custom-css/#css-help while waiting for a Volunteer to help you. :)

• 

  timethief · Member · Jun 21, 2010 at 9:21 pm

  • Copy link

  OOPS! This is also a link to a post you will want to read > http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

• 

  hallluke · Member · Jun 21, 2010 at 10:56 pm

  • Copy link

  Try the code below:

  #header h1 {background:url("http://axsblogger.files.wordpress.com/2010/06/axsblog2.png") no-repeat scroll bottom right; height:104px; width:423px; text-indent:-999px;}
  #header .description {display:none;}

  It is called the Phark method and there’s a bit more detail if you follow the link.

  lh

• 

  axsblogger · Member · Jun 21, 2010 at 11:06 pm

  • Copy link

  Worked, thanks, however, need to get the CSS upgrade

  Any way to work around that?

• 

  hallluke · Member · Jun 21, 2010 at 11:39 pm

  • Copy link

  You posted in the CSS customisation forum so I thought you wanted a CSS solution. It is possible to achieve something similar if you remove the title and tagline of your blog from Settings > General and then include a text widget in your sidebar and paste in the code:

  <div style="position:absolute;top:110px;left:120px;border:none;">
  <a href="http://axsblogger.wordpress.com/">
  <img src="http://axsblogger.files.wordpress.com/2010/06/axsblog2.png" height="104px" width="423px" />
  </a>
  </div>

  This solution isn’t perfect. If you resize the browser window the image will stay 120px from the left hand side as the page moves under it. Also having no title on your homepage isn’t the best idea in the world. It does give you another option though. I hope it helps!

  lh

• 

  panaghiotisadam · Member · Jun 22, 2010 at 12:43 am

  • Copy link

  @Luke: you can stabilize it this way:

  <div align="center" style="position:absolute;width:100%;top:110px;right:300px;border:none;">
  etc.