[gabriellavanrijParticipant]

Hi, there!

Thanks always for the help you provide. Sooo appreciative!

Here’s my current issue. I’d like to add my phone number (1.844.888.5463) to my footer, next to the IMDB icon, and about the same size. Could you let me know how to do this? Or if I provide my log in details, could you do this for me? (Log in credentials in my previous topic)

See attached image for placement.

http://gabriella.global/

I am running WordPress 4.7.3 running X – Child Theme theme.

Thank you so much!

[RupokMember]

Hi there,

Thanks for writing in! You can place the phone number within Customize > Footer > Footer Content.

Cheers!

[gabriellavanrijParticipant]

Hi,

I tried that, but it places the phone number underneath the icons, and not next to the IMDB icon. How would I do it if I wanted to add something on the same line as the icons in the footer? Please see the image I uploaded in my first comment. Thanks!

[RupokMember]

Hi there,

Let’s add that and update us; we’ll help to align properly. We can’t tailor the code for you unless you add them.

Cheers!

[gabriellavanrijParticipant]

OK. I’ve added the phone number into the footer. Please let me know how I can get it next to “IMDB”. Thanks.

[RahulModerator]

Hi There,

Thanks for writing us back 🙂

Please add the code

<div class="x-social-global"><a href="https://www.facebook.com/Authorgabriella" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://twitter.com/gabriellavanrij" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://plus.google.com/+gabriellavanrij" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://linkedin.com/in/gabriellavanrij" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://www.youtube.com/user/gabriellavanrij" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://instagram.com/gabriellavanrij/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a><a href="http://www.imdb.com/name/nm4927549/?ref_=fn_al_nm_1" target="_blank"><img src="http://gabriella.global/wp-content/uploads/2016/03/imdb_sm.png"></a>
<a>1.844.888.5463</a></div>

and Remove the code <div class="x-colophon-content">1.844.888.5463</div>

Let us know how it goes.

Cheers!

[gabriellavanrijParticipant]

Thanks. Can you tell me where I should place this? Does it go in Customize under footer content?

[LelyModerator]

Hi There,

We’re sorry for the confusion. If you want it to add instead on the right side of the IMDB, we can add it instead on the On Appearance > Customize > Social. Add it a textfield that you’re not using at the moment. For example, let’s add the phone number on RSS Feed URL textfield. Let say we can add tel:+18448885463
Then we will use custom CSS to replace the RSS FEED URL icon with just a number. Add this CSS on Appearance > Customize > Custom > Edit global CSS:

.x-colophon.bottom .x-social-global a i.x-icon-rss-square:before {
    content: '1.844.888.5463';
}

That’s better instead of adding on footer content because by default it is position below the icons.

Hope this helps.

[gabriellavanrijParticipant]

Thanks! This helps a lot!

Just one thing… It’s showing before the IMDB icon. Is there a way to place the phone number after the IMDB icon. To the right of the IMDB icon? Not the left?

Thank you again for your help! Very appreciated!

http://gabriella.global/

[gabriellavanrijParticipant]

Also, how do you make the phone number so that it isn’t hyperlinked?

[Paul RModerator]

Hi,

To achieve that, please remove the code provided above then create file wp-footer.php in wp-content/themes/x-child/framework/views/integrity and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Integrity.
// =============================================================================

?>

  <?php x_get_view( 'global', '_header', 'widget-areas' ); ?>
  <?php x_get_view( 'global', '_footer', 'scroll-top' ); ?>
  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?><span class="telno">1.844.888.5463</span>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

After that, add this in Custom > Edit Global CSS in the customizer.

.x-colophon.bottom .x-social-global {
   display:inline-block;
   vertical-align:middle;
}
.x-colophon.bottom .x-social-global a {
    margin: 0 10px;
}

.x-colophon.bottom .telno{
   display:inline-block;
   vertical-align:middle;
}

Hope that helps.

[Author]

Posts