Docs

[Jennifer S]

Hi there! I’ve found a few older posts about how to add custom social icons next to the standard social icons in the topbar. But I want to add some custom login buttons next to my social icons. How do I do that?

http://www.precisionpointinc.com – everything is current. Thanks!

[Thai]

Hi There,

Please add the following code under functions.php file locates in your child theme:

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 .= '<a href="#" class="x-btn x-btn-red x-btn-real x-btn-rounded x-btn-regular">Button</a>';

  $output .= '</div>';

  echo $output;

}

After that add the following CSS:

.x-social-global a.x-btn {
    width: auto !important;
    height: auto !important;
    padding: 10px 8px;
    line-height: 1 !important;
    font-size: 18px !important;
}

Hope it helps 🙂

[Jennifer S]

Hmm, I’m not sure I follow that. I just want to add a button (like this one: http://precisionpointinc.com/wp-content/uploads/2016/10/Webshare-Login22x100.png), next to the standard social icons in that right side of the topbar.

that seems like a lot of code for something that seems like it should be pretty simple. Am I missing something? Please let me know – thanks! 🙂

[Joao]

Hi There,

Adding a button is different from a custom Item, it is actually “easier”.

Add the following code to Appereance > Customizer > Header > Top bar Content and adjust it according to your needs:

<a class="top-btn" href="http://www.google.com" > Button </a>

Add the following code to Appereance > Customizer > Custom > CSS

.top-btn {
    color: #fff !important;
    border-color: #002d72;
    background-color: #002d72;
    border-radius: 0.25em;
    padding: 6px;
    color: white;
    float: right;
    font-size: 15px;
    margin-top: -5px;
}
.top-btn:hover {
  background: red;
}
.x-topbar .p-info {
  width: 88%;
}

Hope that helps

Joao

[Jennifer S]

Ok, I’ll give that a try and let you know – thanks!

How soon until your custom headers features get released? Excited for those! 🙂

[Rahul]

Sure, let us know how it goes!

Stay tuned for the next update of X theme. We’ll have a list of new features in the coming update suggested by users like you.

Thanks for your patience!

[Jennifer S]

That solution for the button worked perfectly, btw – thank you! 🙂

[Rad]

You’re welcome!

[Author]

Posts