Docs

[Dx3Creations]

Hmm, I tried to post but it said there was an error so trying again!

I’m following your instructions to create a child theme:
https://community.theme.co/forums/topic/social-media-icons-in-the-navbar/

I have it activated. Then you said:
“Then copy the file _navbar.php in “x/framework/views/global/” into your Child Theme’s respective location “x-child-{stack}/framework/views/global/” and replace with the following code using a text editor.”

Where do I go to copy the files? Do I need an FTP thing or can I do that in WordPress?

Then I assume I need to upload my social images to the media gallery, right? My URL is redlanternescaperooms.com

Thanks!

[Christian]

Hey there,

You’ll need to login to your web server via FTP or cPanel then you can navigate to where you installed WordPress and go to wp-content/themes/x and wp-content/themes/x-child for the child theme. See https://community.theme.co/kb/customization-best-practices/ for more details.

You do not need to upload social images as that is available out of the box. You just need to insert your social profile URLs in Appearance > Customize > Social

Thanks.

[Dx3Creations]

Okay! I finally figured out how to get into Filezilla and copy the navbar. I don’t think the URL up above is what i wanted though. That helpful page was moving the current icons into the navbar.

I am actually happy where they are now (see https://www.redlanternescaperoom.com ) but I simply want to have a custom icon up there. Not the square icons. I had a designer make me new ones.

So you said “You do not need to upload social images as that is available out of the box.” But I actually do need to upload my new icons. How do I do that?

THANKS!!

[Dx3Creations]

AHH! I figured it out.
Wow my icons are huge.

You can close this. 🙂

[Dx3Creations]

Oops, I lied! I can’t get the Instagram logo to change. Here is what I have for FB, Twitter and Instagram. It looks like it should work, but it does not? FB and T are good.

.x-icon-facebook-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-fb-small.png);
}
.x-icon-twitter-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-tw-small.png);
}
.x-icon-instagram-square:before {
content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-insta-small.png);
}

#2 – How do I remove (or change!) the alt text for Google+ and LinkedIn? I’m using those two for TripAdvisor and Yelp.

#3 – Can I change the order? How?

THANKS!!

[Rue Nel]

Hello There,

Thanks for updating in!

1] Please change your code and use this instead:

.x-icon-facebook-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-fb-small.png);
}
.x-icon-twitter-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-tw-small.png);
}
.x-icon-instagram:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-insta-small.png);
}
.x-icon-youtube-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-youtube-small.png);
}
.x-icon-google-plus-square:before {
    content: url(https://www.redlanternescaperooms.com/wp-content/uploads/2016/12/lantern-tripadvis-small.png);
}

2] To change the titles for TripAdvisor and Yelp, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('a[href="https://www.tripadvisor.com"]').attr('title', 'Trip Advisor');
  $('a[href="http://www.yelp.com"]').attr('title', 'Yelp');
})(jQuery);

3] If you want to change the order of the icons, you will need to modify the code itself. Since you already have a child theme, please add the following code in your child theme’s functions.php file

// Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;
// =============================================================================

Please copy the raw code here: http://pastebin.com/9qwZy5Nm to preserve the Unicode html entities or data-x-icon values.

Please do not forget to re arrange the icons.

[Dx3Creations]

That worked perfectly, thank you!

[Darshana]

Glad we were able to help 🙂

[Ben]

I know this will probably be a simple and rudimentary question, but how do you get the social buttons like at the bottom of the Renew 1 demo? Basically, how do you get the buttons that change to the color of the social media service when you hover over it?

Home

Thanks and I apologize if this was answered somewhere else.

[Friech]

Hi There,

Thanks for writing in! Actually that should be automatic if you’re using the renew stack. If not, you can add this under Custom > Global CSS in the Customizer.

/*Hover color for social icons*/
.x-social-global a:hover.facebook {
    color: #3b5998;
}

.x-social-global a:hover.twitter {
    color: #00abf0;
}

.x-social-global a:hover.google-plus {
    color: #d84b35;
}

.x-social-global a:hover.linkedin {
    color: #1a81ad;
}

.x-social-global a:hover.pinterest {
    color: #cd1f28;
}

.x-social-global a:hover.instagram {
    color: #3f729b;
}

.x-social-global a:hover.vimeo {
    color: #44bbff;
}

.x-social-global a:hover.youtube {
    color: #cc181e;
}

Hope it helps, Cheers!

[Author]

Posts