Jump to content


Photo
- - - - -

adding text to facebook and twitter icons


  • Please log in to reply
35 replies to this topic

#1 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 27 March 2011 - 07:46 PM

Hi I'd like to add text saying "Facebook", "RSS", "twitter" etc, next to the respective icons. Where would be the best place to add the code?

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 28 March 2011 - 12:40 AM

I don't know if this is the best way but it works:

Put this jQuery in your footerscripts section:

Please Login or Register to see this Hidden Content


You see all the before Facebook? You need to add a bunch of these to each one so that they push the test to the right so they don't hover over the icons (which are background sprites).

You also need to add some margin-left to each of the elements, for example:

Please Login or Register to see this Hidden Content



#3 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 28 March 2011 - 12:41 AM

Sorry , you need to add multiple spaces using ` `

#4 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 28 March 2011 - 07:14 AM

Hi Jimmy Thanks for that - I have inserted the script and it does seem to work but currently all the text is covering the icons and I can also see the   text. Where should I add the margin left code? I added it with the foot script but the whole thing disappeared, as it did when I added it in my custom css. Thanks!

#5 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 28 March 2011 - 07:31 AM

Looks like the ` ` is missing a semicolon. ` ` should work.. add as many of those as it takes to clear the icon. The "margin-left" setting should either go in Custom Code or the base.css file.

#6 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 28 March 2011 - 08:56 AM

Thanks. That works for the spacing but all the words are now below the icons and I'd like the words to be to the right of their respective icons. Is there a way to do this? Thanks!

#7 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 28 March 2011 - 01:16 PM

Hey Jennifer, Make sure of the widths of the icons, and widen them as needed.

#8 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 28 March 2011 - 01:25 PM

Thanks Kate - I can't see where this is set however - looking with firebug but can only find height, position and text-align. Any ideas?

#9 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 28 March 2011 - 01:31 PM

Hmmm... Do you have a link available?

#10 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 28 March 2011 - 02:57 PM

Please Login or Register to see this Hidden Content



#11 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 28 March 2011 - 05:38 PM

Hey Jennifer, couple things here.

These will pad the twitter and rss icons appropriately:
`a.twitterlink{margin-left:60px;}`
`a.rsslink{margin-left:60px;}`

And in your jquery code, you have some literal spaces mixed in with the ` ` codes. They all need to be put in as ` ` or else you'll get those unwanted line splits.

so using the rss line as an example, it needs to look something like:
`jQuery('.rsslink').append(' RSS');`

and not:
`jQuery('.rsslink').append(' RSS');`

#12 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 28 March 2011 - 08:33 PM

Thanks, that's brilliant!

#13 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 28 March 2011 - 08:57 PM

If I wanted to add a link to a mailing list next to these icons, where would I put a code for that?

#14 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 29 March 2011 - 12:27 PM

Since you're already using the jQuery approach, I think you could just add it that way, appending it to ".icons".

#15 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 29 March 2011 - 01:43 PM

Thanks Kate, that's great. I have added link icons as home and newsletter in this way; jQuery('.icons').append(' HOME'); Where in this would I add the link ref? Thanks.

#16 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 29 March 2011 - 06:02 PM

I hate to say it but I feel like it would be easier for you to remove the jquery and just copy the template.branding.php file into your Base theme and customize it directly there instead of relying on scripts. Especially if you want to add an email link and simple text.

#17 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 30 March 2011 - 05:34 AM

Thanks Adam, I'll try that and let you know how I get on.

#18 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 30 March 2011 - 12:09 PM

Thanks Adam, that's definitely the best way to go about it - I've managed to copy the template file but the nbsp; doesn't work to create space in this format - any tis as to what might work? and I have tried inserting a html for the HOME page link before the pagelines_before branding script - but nothing shows up on the webpage - any ideas as to where this should go? Thanks so much!

#19 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 30 March 2011 - 01:12 PM

Hey Jennifer, RE: the spacing: You should just be able to use CSS for that. For instance, the icons are images so you could set a margin right or something like that.

#20 jenny20k

jenny20k

    Super Member

  • Members
  • PipPipPipPip
  • 100 posts

Posted 30 March 2011 - 05:17 PM

Hey Kate Thanks - however, I'm completely useless when it comes to things like this - I 'thought' I'd done it all write bit when I come to change a margin the icon and text move together. This is since I copied the branding template instead of using the jquery. Should I be typing in a hidden 'space' field with the text? Sorry....