how to make branding image clickable link

• 

  freesyriantranslators · Member · Jun 11, 2012 at 11:29 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I have a Rsuty Grunge theme and I have personalised the image on the top of the page to put my logo
  I want to make this image click-able to take visitors to homepage when they click on it. How can I do that?

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

• 

  jarretcade · Member · Jun 12, 2012 at 12:59 am

  • Copy link

  Unfortunately with WordPress.com you cannot modify the theme files which prevents you from creating a link. With enough heavy CSS customization though you could replace the default site title/description area and have it possibly work.

• 

  justpi · Member · Jun 12, 2012 at 2:20 am

  • Copy link

  @jarretcade: not heavy at all – you add the right HTML and inline CSS to a text widget, and use absolute positioning to place the widget in front of the logo.

• 

  freesyriantranslators · Member · Jun 12, 2012 at 10:19 am

  • Copy link

  @justpi can you give me an example of the HTML and inline CSS that I have to add please?

• 

  freesyriantranslators · Member · Jun 12, 2012 at 10:48 am

  • Copy link

  I think I did it
  I added a text widget and put inside it

  Home

  and I added to the CSS stylesheet the follwoing:
  #navbar {
  position: absolute;
  top: 2em;
  left: 29em;
  width: 50em;
  height: 11em;
  text-indent:-9999px;}

  There might be a better way but this worked for me

• 

  freesyriantranslators · Member · Jun 12, 2012 at 10:50 am

  • Copy link

  sorry the forum converted the html code i wrote above
  it is

  /*< a href=”http://****/” title=”****” id=”navbar”>Home*/

• 

  justpi · Member · Jun 12, 2012 at 12:03 pm

  • Copy link

  That’s a bit inaccurate but it’s working.

  It can be done in a variety of ways. My solution would be a linking rectangle in the widget (with a temporary border so I can see the rectangle):
  <a id="navbar" href="BLOG URL HERE"><div style="width:658px;height:135px;border:1px solid #f00;"></div></a>

  With this in the CSS editor:

  #page {
      position: relative;
  }
  #navbar {
  position: absolute;
  right: 17px;
  top: 30px;
  }

  I’d adjust the values till the rectangle falls exactly where it should then remove the border from the widget code.

  Note: to display code correctly here you enclose it in backticks (see below reply field).

• 

  freesyriantranslators · Member · Jun 12, 2012 at 1:21 pm

  • Copy link

  Thank you very much
  I did it exactly as you mentioned and it worked better than before. This is more convenient.