Docs

[Itwebdevelopment]

Hi, I’d like to setup these sidebar share buttons to show on all my blog pages:

btn-group-vertical

Here’s a link to my site:

https://www.dzdrones.com/drones/3-reasons-night-flying-tough/

[Itwebdevelopment]

This reply has been marked as private.

[Christopher]

Hi there,

Please copy _content.php from framework/views/icon and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
      <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
      <?php endif; ?>
      <?php x_get_view( 'global', '_content' ); ?>
        <div class="sharebuttons btn-group btn-group-vertical">
  <a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=<?php echo get_the_author_meta( 'twitter', 1 ); ?>" class="btn btn-twitter" target="_blank"><i class="fa fa-twitter"></i> <span>Tweet</span></a>
  <a href="http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="btn btn-facebook" target="_blank"><i class="fa fa-facebook"></i> <span>Share</span></a>
  <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="btn btn-google"><i class="fa fa-google-plus" target="_blank"></i> <span>Plus 1</span></a>
  <a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=<?php the_title(); ?>" class="btn btn-linkedin"><i class="fa fa-linkedin" target="_blank"></i> <span>Link</span></a>
  <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<?php bloginfo('description'); ?>&media=<?php echo $image[0]; ?>" class="btn btn-pinterest" target="_blank"><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
    </div>
  </div>
</article>

Insert CSS under Customize -> Custom -> global CSS.

Hope it helps.

[Itwebdevelopment]

Hi Chris thanks so much for the quick response.

I’ve done this but I must have done something wrong because the icons are not appearing vertically on the side of the text and are instead below everything.

Could you take a look?

Thanks so much for your help!

[Rad]

Hi there,

You didn’t add the CSS in custom CSS, and that code is for Bootstrap. Hence, for it to work, it should have the complete implementation of the bootstrap library.

1. Please implement the CSS in customizer’s custom CSS

2. Replace the icon code (eg. <i class="fa fa-twitter"></i> , with this code

<?php echo do_shortcode('[x_icon type="twitter-square"]'); ?>

Icons

Example,

<a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=<?php echo get_the_author_meta( 'twitter', 1 ); ?>" class="btn btn-twitter" target="_blank"><?php echo do_shortcode('[x_icon type="twitter-square"]'); ?> <span>Tweet</span></a>

Hope this helps.

[Itwebdevelopment]

Hi, I installed bootstrap and it changed the fonts and everything on the site. Is this normal?

[Rad]

Hi there,

No, you shouldn’t do that. Bootstrap is a library, anything that matches its classes will be overridden by it.

Instead, please implement the icons as recommended on #2, then add the CSS provided here http://codepen.io/Pc/pen/Fzlqw, except this

/* For CodePen Demo */
body {font-size: 1.75em;padding: 40px;} span {display: none;}

Thanks.

[Author]

Posts