Tagged: customization, enfold, header, social media icons
-
AuthorPosts
-
August 10, 2014 at 7:01 pm #302278
I need to change the hover text for the social media icons in the site I’m developing. I want to change 1) ‘Mail’ to ‘Check my Email’ and 2) ‘Support’ to ‘Customer Support’. I’m not asking to create new social media icons. I’d like to just change the words that appear on hover using the Title element. If you can point me to the file where this code exists, I can make the change. I’ve found all the other arrays to change to customize my color and icons. But I’ve not been able to locate the array or location of the code that supplies the Title. Many thanks.
August 11, 2014 at 12:13 am #302323Hi Sharon!
Thank you for using Enfold.
Looks like you managed to change it. Is that correct?
Best regards,
IsmaelSeptember 15, 2014 at 7:48 pm #319370How did you change it?
Have the same “problem”.September 16, 2014 at 3:48 am #319550I’ll do my best to help, although I am not the person who changed it.
If you are using child themes, then you’ll have to change it in the child.
We changed a line in /wp-content/themes/enfold/includes/helper-social-media.php
You’ll see the if statements below, I wanted to change ‘mail’ to ‘Check your Email’ and ‘support’ to ‘Customer Support’Hope this helps. Good luck.
Here is the code inside the helper-social-media.php for me beginning at line 55. I’ll give you a big chunk so you can see the context.
function build_icon($icon) { global $avia_config; //special cases switch($icon['social_icon']) { case 'rss': if(empty($icon['social_icon_link'])) $icon['social_icon_link'] = get_bloginfo('rss2_url'); break; case 'twitter': case 'dribbble': case 'vimeo': case 'behance': if(strpos($icon['social_icon_link'], 'http') === false && !empty($icon['social_icon_link'])) { $icon['social_icon_link'] = "http://".$icon['social_icon'].".com/".$icon['social_icon_link']."/"; } break; } if(empty($icon['social_icon_link'])) $icon['social_icon_link'] = "#"; $blank = "target='_blank'"; //dont add target blank to relative urls or urls to the same domain if(strpos($icon['social_icon_link'], 'http') === false || strpos($icon['social_icon_link'], home_url()) !== false) $blank = ""; $html = ""; $html .= "<".$this->args['inside']." class='".$this->args['class']."_".$icon['social_icon']." av-social-link-".$icon['social_icon']." social_icon_".$this->counter."'>"; $html .= "<a {$blank} href='".$icon['social_icon_link']."' ".av_icon_string($icon['social_icon']); if($icon['social_icon'] == 'mail'){ $html .= "title = 'Check your Email'"; } elseif($icon['social_icon'] == 'support'){ $html .= "title = 'Customer Support'"; } else { $html .= "title='".ucfirst($icon['social_icon'])."'"; } $html .= "><span class='avia_hidden_link_text'>".ucfirst($icon['social_icon'])."</span></a>"; $html .= "</".$this->args['inside'].">"; return $html; }
September 16, 2014 at 9:07 am #319670Hey!
@sharwest: Thanks for sharing.@mrbenjamin: You can follow the code he posted above. Change this line on 83:
$html .= "<a {$blank} href='".$icon['social_icon_link']."' ".av_icon_string($icon['social_icon'])." title='".ucfirst($icon['social_icon'])."'><span class='avia_hidden_link_text'>".ucfirst($icon['social_icon'])."</span></a>";
With this:
$html .= "<a {$blank} href='".$icon['social_icon_link']."' ".av_icon_string($icon['social_icon']); if($icon['social_icon'] == 'mail'){ $html .= "title = 'Check your Email'"; } elseif($icon['social_icon'] == 'support'){ $html .= "title = 'Customer Support'"; } else { $html .= "title='".ucfirst($icon['social_icon'])."'"; } $html .= "><span class='avia_hidden_link_text'>".ucfirst($icon['social_icon'])."</span></a>";
Cheers!
IsmaelJanuary 23, 2015 at 3:59 am #384181Ismael, thanks a ton!
I have been trying to find this piece of code for a while as I swapped out the Skype logo for Tripadvisor manually and wanted to change the hover text also.
It also made it clear that removing this from line 83 will get rid of all hover text on the social icons which was even better for me.
title='".ucfirst($icon['social_icon'])."
Two related questions:
1. As we swap out icons, where would I find the code dictating the default hover background color for each icon?
2. I noticed some enfold users have the hover background color as a round shape, others a square, and some have a square with rounded corners. Where would I find this in the code?Thanks again!!!!!
January 24, 2015 at 10:21 am #384815Hey!
Glad we could help. You can find the social media styling on css > layout.css.
Best regards,
IsmaelJanuary 27, 2015 at 11:26 am #386132Thanks Ismael
I haven’t been able to find it under Appearance>Editor so I assume that means I have to use FTP only?
Found the background colors on line 1116 of layout.css in the theme zip file
Thanks again
JonJanuary 27, 2015 at 3:02 pm #386249 -
AuthorPosts
- The topic ‘How to change text in tooltip for social media icons in header.’ is closed to new replies.