Jump to content
Sign in to follow this  
jenny20k

adding text to facebook and twitter icons

Recommended Posts

jenny20k

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?

Share this post


Link to post
Share on other sites
kastelic

I don't know if this is the best way but it works: Put this jQuery in your footerscripts section:

<script>
	jQuery('.facebooklink').append('     Facebook');
	jQuery('.twitterlink').append('Twitter');
	jQuery('.rsslink').append('RSS');
	</script>
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:
a.facebooklink{margin-left:60px;}

Share this post


Link to post
Share on other sites
kastelic

Sorry , you need to add multiple spaces using ` `

Share this post


Link to post
Share on other sites
jenny20k

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!

Share this post


Link to post
Share on other sites
timlinson

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.

Share this post


Link to post
Share on other sites
jenny20k

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!

Share this post


Link to post
Share on other sites
Kate

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

Share this post


Link to post
Share on other sites
jenny20k

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?

Share this post


Link to post
Share on other sites
timlinson

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');`

Share this post


Link to post
Share on other sites
jenny20k

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

Share this post


Link to post
Share on other sites
Kate

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

Share this post


Link to post
Share on other sites
jenny20k

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.

Share this post


Link to post
Share on other sites
cmunns

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.

Share this post


Link to post
Share on other sites
jenny20k

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

Share this post


Link to post
Share on other sites
jenny20k

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!

Share this post


Link to post
Share on other sites
Kate

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.

Share this post


Link to post
Share on other sites
jenny20k

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....

Share this post


Link to post
Share on other sites
cmunns

The css selector you would want to change is: You can add a <span> and </span> around the actual link text then control the padding on that by: ` .icons a span { padding-left:15px; } ` This should work although it's untested.

Share this post


Link to post
Share on other sites
jenny20k

Thanks! That's great. Would I add the link ref before the action to get the icons?

Share this post


Link to post
Share on other sites
jenny20k

I mean the link ref for the Home page and mailing list btw...I'd like to display them in line with the icons.

Share this post


Link to post
Share on other sites
timlinson

Hey Jennifer, in order to keep your links lined up with the social icons, you'll want to keep them inside the "icons" div class. Beyond that, it's just a matter of how you want the links to be ordered. For your home link, you can use this for the href part: `href="<? php echo home_url(); ?>"`

Share this post


Link to post
Share on other sites
jenny20k

Hi Tim Thanks for your help - I've put that in the base branding template (after it says div class icons but before the end of pagelines_branding_end) and get this Parse error: syntax error, unexpected T_ECHO in /home1/jennymc2/public_html/creativecheshire/wp-content/themes/platformbase/template.branding.php on line 7 I'm doing something stupid but I don't know what....

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×