Topic: Button With Social Media Links in Topbar

Tagged: x

Author

Posts

September 29, 2016 at 10:20 am #1195859

Participant

Hi all, I’m on to yet another site using X!

I’m trying to include a button in the topbar to the right of the social media icons, in the same row. I’ve placed the button but I cannot get it to float right of the social icons. Further, I’d like to adjust the spacing between the icons/button.

Thanks for your help! Link to follow…

September 29, 2016 at 10:20 am #1195860

Frocreate

Participant

This reply has been marked as private.

September 29, 2016 at 11:01 am #1195930

Joao

Moderator

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

.x-topbar .p-info {
    width: 10%;
    float: right;
    margin-bottom: 1%;
}

.x-topbar .x-social-global {
    margin-top: 18px;
}

To adjust the distance change width 10% for the desired value.

Hope it helps

Joao

September 29, 2016 at 11:18 am #1195952

Frocreate

Participant

Thanks – that worked great! The only issue is with mobile – I’d like to have the button remain adjacent to the icons on mobile, displaying in the center of the screen with the rest of the group. Right now, the button stays to the right and jumps to two lines on mobile and has a grey background behind.

September 29, 2016 at 12:52 pm #1196071

Rupok

Member

Hi there,

You can try adding this as well :

@media only screen and (max-width: 767px) {

.x-topbar .x-social-global {
  margin-left: 90px;
}

.x-topbar .p-info {
  background-color: transparent;
  margin-right: 13%;
  margin-top: 6px;
  width: auto;
}
}

You might need to adjust the margin-right: 13%; with your preferred value.

Thanks!

September 30, 2016 at 9:47 am #1197352

Frocreate

Participant

Thanks, Im grateful for the help but I dont think this is working out aesthetically the way I’d like.

Alternately, is there a way to add a key icon at the end of the social icons? I successfully edited the functions.php to include the Houzz icon but cannot seem to replicate this to include the key (or any of the X-icons).

Thanks again!

September 30, 2016 at 12:41 pm #1197583

Joao

Moderator

Hi There,

Can you provide the code you used on functions.php

Thanks,

Joao

October 3, 2016 at 2:13 pm #1200876

Frocreate

Participant

sure – see below:

// 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', '' );
    $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=""></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></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=""></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon=""></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon=""></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon=""></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon=""></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon=""></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon=""></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon=""></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon=""></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon=""></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon=""></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon=""></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;

      
      //
      // You can insert your custom icons here 
      //

      // Houzz
      $houzz = 'http://www.houzz.com';
      if ( $houzz )  : $output .= '<a href="' . $houzz  . '" class="houzz" title="Houzz" target="_blank"><i class="x-icon-houzz" data-x-icon=""></i></a>'; endif;

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

    echo $output;

  }
endif;

October 3, 2016 at 4:19 pm #1201043

Jade

Moderator

HI there,

I have tried to check on your site to the what’s causing the code not to work but it seems to be currently down at the moment.

October 4, 2016 at 11:25 am #1202186

Frocreate

Participant

if you’re out of the United States, you may need to use a proxy

October 4, 2016 at 1:22 pm #1202344

Rupok

Member

Hi there,

You will find all icons here – demo.theme.co/integrity-1/shortcodes/icons/

Let’s copy the HTML of icons and use within the code – http://prntscr.com/cpthkq

Hope this helps.

October 4, 2016 at 1:57 pm #1202400

Frocreate

Participant

Right, thanks. So where/how would I modify the above PHP to include the key icon too?

If I were to copy/paste the Houzz code and modify to include the Key icon, where would it go in relation to this:

$output .= '</div>';

    echo $output;

  }
endif;

I’ve tried changing it around a few different ways (based on code from other forum replies) and cant seem to get it right.

Thanks again

October 4, 2016 at 7:52 pm #1202778

Friech

Moderator

Hi There,

Please update your code to this:

// =============================================================================
// Custom Social Output
// =============================================================================
// Adding houzz and keyicon
// =============================================================================

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', '' );
    $whatsapp    = x_get_option( 'x_social_whatsapp', '' );
    $soundcloud  = x_get_option( 'x_social_soundcloud', '' );
    $rss         = x_get_option( 'x_social_rss', '' );
    $houzz       = 'http://www.houzz.com';
    $keyicon       = 'https://www.google.com';

    $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=""></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></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=""></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon=""></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon=""></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon=""></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon=""></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon=""></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon=""></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon=""></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon=""></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon=""></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-email" data-x-icon=""></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon=""></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;
      if ( $houzz )        : $output .= '<a href="' . $houzz        . '" class="houzz" title="houzz" target="_blank"><i class="x-icon-houzz" data-x-icon="&#xf27c;"></i></a>'; endif;
      if ( $keyicon )        : $output .= '<a href="' . $keyicon       . '" class="key" title="key" target="_blank"><i class="x-icon-key" data-x-icon="&#xf084;"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

Replace the https://www.google.com on where do you want to actually link the key icon.

Hope it helps, Cheers!

Author

Posts

<script> jQuery(function($){ $("#no-reply-1195859 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>