Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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.

    #302323

    Hi Sharon!

    Thank you for using Enfold.

    Looks like you managed to change it. Is that correct?

    Best regards,
    Ismael

    #319370

    How did you change it?
    Have the same “problem”.

    #319550

    I’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;
    		}
    
    #319670

    Hey!


    @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!
    Ismael

    #384181

    Ismael, 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!!!!!

    #384815

    Hey!

    Glad we could help. You can find the social media styling on css > layout.css.

    Best regards,
    Ismael

    #386132

    Thanks 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
    Jon

    #386249

    Hi!

    Yes, to edit Layout.css file, you should go to Enfold/css folder via FTP.

    Best regards,
    Yigit

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to change text in tooltip for social media icons in header.’ is closed to new replies.