[windeewinataParticipant]

Hi,

How do I add a Tripadvisor icon to the topbar and bottom footer with the other social media icons? Thank you for your help…

[Rue NelModerator]

Hello There,

Thanks for writing in!

What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once your child theme is setup, you can insert the following code in your child theme’s functions.php

// 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', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $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"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></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"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square"></i></a>'; endif;

    // Add your trip advisor link here
    $output .= '<a href="http://your-trip-advisor-link/" class="trip-advisor" title="Trip Advisor" target="_blank"><i class="x-icon-plane"></i></a>';

    $output .= '</div>';

    echo $output;

  }
endif;

Please let us know if this works out for you.

[windeewinataParticipant]

Thank you so much for your help, I’ll try it.

I’m new here and thought that I’d get an email to notify for a post reply :), so I just waited and wondered :). Thanks again.

[DarshanaModerator]

Hi there,

You can enable this option by clicking on the “Subscribe” link located on the top right hand side of the window.

Please refer to the screenshot here (http://prntscr.com/68t8e5).

Thanks!

[windeewinataParticipant]

Wonderful, thank you!

[Paul RModerator]

You’re welcome!

[windeewinataParticipant]

It’s working nicely. Thank you very much.

I’ve prepared a custom icon for tripadvisor to replace the standard plane icon. Could you please tell me where I can switch it? Thank you again.

[DarshanaModerator]

Hi there,

Change the following line of the above code and set the image URL.

    $output .= '<a href="http://your-trip-advisor-link/" class="trip-advisor" title="Trip Advisor" target="_blank"><img src="http://www.path.to/triavisor/image.png"></a>';

Hope that’s clear.

[windeewinataParticipant]

Thank you very much!

[Rue NelModerator]

You are always welcome.
If there’s anything else, we can help you with, please let us know.

[LucyKeileParticipant]

Hey guys I followed all these instructions and was able to accomplish the same on my child theme.

Thank you!!!

I have one little issue my icon picture is not quite the same size as the ones we have in the footer.

Can you tell me the sizes you use for those icons so I can adjust mine accordingly or is it possible to make the other social icons a little bigger?

I also want to use the imdb icon on the connect page as well, so maybe it would be easier to upload the image icon to the correct place and point to where it should be or I can substitute one of the icons I will never use to the imdb one.

Thank you!

Lucy

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[LucyKeileParticipant]

This reply has been marked as private.

[RupokMember]

Hello Lucy,

I have solved your problem by adding some Custom CSS –

.imdb img {
  height: 20px;
  margin-top: -5px;
}

You can adjust the style more with your choice by changing the rules/values.
Hope you’re happy with that now. Let me know if you have any other issue.

Cheers!

[LucyKeileParticipant]

That is great! I also added this on the customize to make the icons bigger.

.x-colophon.bottom .x-social-global a {
font-size: 35px; /* increase depending on the size you prefer.*/
}

You guys ROCK!

How do I add the imdb to the connect page though. Should I create a new thread for the question?

[Author]

Posts