Docs

[eradmin]

Hello! I am very close to having the social icons in the footer of my site to where I want them, but there is one piece of code that I need to get it just right. Basically, I would like to size the Social Icon Background independently from the icons themselves.

The goal I am trying to achieve by this is to have the background NOT show up outside the border of the icons themselves. Let me know if there is any code that will help me achieve this. Thank you.

[Nabeel A]

Hi there,

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.

[eradmin]

This reply has been marked as private.

[eradmin]

Here is the custom css I have in place already for the social icons.

x-social-global a i {
display: block;
font-size: 35px !important;
}

.x-colophon .facebook { color: #3b5998 }
.x-colophon .instagram { color: #cd486b}
.x-colophon .youtube { color: #bb0000 }
.x-colophon .twitter { color: #00aced}
.x-colophon .pinterest { color: #cb2027}

.x-social-global a:hover.facebook {
background-color: #3b5998;}
.x-social-global a:hover.twitter {
background-color: #00aced;}
.x-social-global a:hover.youtube {
background-color: #bb0000;}
.x-social-global a:hover.instagram {
background-color: #cd486b;}
.x-social-global a:hover.pinterest {
background-color: #cb2027;
}

.x-social-global a {
background-color: #fff;
}

[Thai]

Hi There,

Please add the following CSS:

.x-colophon.bottom .x-social-global a {
    background-color: #222 !important;
}

http://i.imgur.com/8ff0TKP.png

Hope it helps 🙂

[eradmin]

Hello,

I actually want the white background to remain, but I don’t want it to stick out beyond edges of the colored icons. As you can see, there is a white edge above and below the icons and that is what I want to go away. Is there a way to achieve that?

[Joao]

Hi There,

That is actually not possible, youn will need to change your icons for icons without background than give them a white color and a color background individually.

To start you will need to do changes on your CHild Theme.

Hi Melissa,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After that open/edit your child theme’s functions.php file and paste the code below in there.

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', '' );
    $emailme     = '[email protected]';

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

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook" data-x-icon=""></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter" 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" data-x-icon=""></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin" 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" data-x-icon=""></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo" 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" 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" data-x-icon=""></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr" 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 ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;
      if ( $emailme )     : $output .= '<a href="mailto:' . $emailme     . '" class="email" title="Email"><i class="x-icon-email" data-x-icon=""></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

Once you have that let us know so we can help you with the background,

Cheers.

Joao

[Author]

Posts