Docs

[Christina r]

Hi

I want to add the ‘add to favorites’ heart to the end of the line: http://screencast.com/t/oXuh7F0Ge

I put this in the code but it places it underneath?
<div class=”entry-extra”>
<?php x_portfolio_item_tags(); ?>
<?php x_portfolio_item_project_link(); ?>
<?php x_portfolio_item_social(); wpfp_link(); ?>

</div>

content-portfolio.php

Thanks for help
Christina
moreparsmorefun.com
integrity light using child
Version: 4.4.2
WP 4.5

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

span.wpfp-span {
    float: right;
    margin-top: -50px;
}

Hope it helps 🙂

[Christina r]

This reply has been marked as private.

[Christina r]

This reply has been marked as private.

[Friech]

Hi There,

To show the favorites link in the portfolio index page as well, add this on your functions.php file.

// Output Portfolio Item Social with Favorites
// =============================================================================

if ( ! function_exists( 'x_portfolio_item_social2' ) ) :
function x_portfolio_item_social2() {

  $share_project_title = x_get_option( 'x_portfolio_share_project_title' );
  $enable_facebook     = x_get_option( 'x_portfolio_enable_facebook_sharing' );
  $enable_twitter      = x_get_option( 'x_portfolio_enable_twitter_sharing' );
  $enable_google_plus  = x_get_option( 'x_portfolio_enable_google_plus_sharing' );
  $enable_linkedin     = x_get_option( 'x_portfolio_enable_linkedin_sharing' );
  $enable_pinterest    = x_get_option( 'x_portfolio_enable_pinterest_sharing' );
  $enable_reddit       = x_get_option( 'x_portfolio_enable_reddit_sharing' );
  $enable_email        = x_get_option( 'x_portfolio_enable_email_sharing' );

  $share_url     = urlencode( get_permalink() );
  $share_title   = urlencode( get_the_title() );
  $share_source  = urlencode( get_bloginfo( 'name' ) );
  $share_content = urlencode( get_the_excerpt() );
  $share_image   = urlencode( x_get_featured_image_with_fallback_url() );

  $facebook    = ( $enable_facebook == '1' )    ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Facebook', '__x__' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i></a>" : '';
  $twitter     = ( $enable_twitter == '1' )     ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Twitter', '__x__' ) . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i></a>" : '';
  $google_plus = ( $enable_google_plus == '1' ) ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Google+', '__x__' ) . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i></a>" : '';
  $linkedin    = ( $enable_linkedin == '1' )    ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on LinkedIn', '__x__' ) . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&url={$share_url}&title={$share_title}&summary={$share_content}&source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"\"></i></a>" : '';
  $pinterest   = ( $enable_pinterest == '1' )   ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Pinterest', '__x__' ) . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&media={$share_image}&description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" data-x-icon=\"\"></i></a>" : '';
  $reddit      = ( $enable_reddit == '1' )      ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Reddit', '__x__' ) . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"\"></i></a>" : '';
  $email       = ( $enable_email == '1' )       ? "<a href=\"mailto:?subject=" . urlencode( get_the_title() ) . "&body=" . urlencode( __( 'Hey, thought you might enjoy this! Check it out when you have a chance:', '__x__' ) ) . " " . get_permalink() . "\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share email\" title=\"" . __( 'Share via Email', '__x__' ) . "\"><span><i class=\"x-icon-envelope-square\" data-x-icon=\"\"></i></span></a>" : '';
  

  if ( $enable_facebook == '1' || $enable_twitter == '1' || $enable_google_plus == '1' || $enable_linkedin == '1' || $enable_pinterest == '1' || $enable_reddit == '1' || $enable_email == '1' ) :

    ?>

    <div class="x-entry-share man">
      <div class="x-share-options">
        <p><?php echo $share_project_title; ?></p>
        <?php echo $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . urldecode( $email ); ?>
        <?php wpfp_link(); ?>
      </div>
    </div>

    <?php

  endif;

}
endif;

Then update your content-portfolio.php file to this:

<?php

// =============================================================================
// VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Integrity.
// =============================================================================

$archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' );

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-featured">
    <?php x_portfolio_item_featured_content(); ?>
  </div>
  <div class="entry-wrap cf">

    <?php if ( x_is_portfolio_item() ) : ?>

      <div class="entry-info">
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social2(); ?>
      </div>

    <?php else : ?>

      <header class="entry-header">
        <h2 class="entry-title entry-title-portfolio">
          <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
        </h2>
        <?php if ( $archive_share == '1' ) : ?>
          <?php x_portfolio_item_social2(); ?>
        <?php endif; ?>
      </header>

    <?php endif; ?>

  </div>
</article>

You can then style that favorite link hover like other icons with the custom css below.

.wpfp-span {padding: 20px;}
.wpfp-span:hover {background-color: #e41e93;}

Now here’s the catch, the heart is the same color as the hover background that will hide the heart on hover. So you might want to change either the heart color or the hover background color.

Another thing, the actual link of that icon is only the + sign. The heart is not wrap inside the <a> tag so it is only a cosmetics.

Yes, you can edit the code so the heart would be wrap inside <a> tag. Regretfully, we cannot provide support for third party plugins. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Christina r]

I greatly appreciate your help. It is almost there. One small css to move the icon over a notch to the right –

Not sure how to position the heart. It displays different on main portfolio index and actual portfolio page:
If I use -10px looks pretty good, not perfect here: http://screencast.com/t/CxrdUOqt
http://moreparsmorefun.com/distance-now/
http://moreparsmorefun.com/lesson/tee-box-power-tips-get-lag-2/

I am using this is the global css but it is not really working:

span.wpfp-span {
float: right;
margin-bottom: -55px;
}

Support is AWESOME. One of the reasons why I will not use any other theme.

Christina

[Christina r]

This reply has been marked as private.

[Jack]

Hi there Christina,

Thanks for writing back!

Try replacing the CSS you’re currently using with this:

.page-id-7993 span.wpfp-span {
    float: right;
    margin-top: -10px;
}

.single-x-portfolio span.wpfp-span {
    float: none;
    margin-right: 0 !important;
    margin-top: -10px !important;
    position: absolute;
}

That should correctly align the heart on both the portfolio and the pages, note that the first piece of code only targets that specific page you linked to, if you need it for another page, let me know and I’d be happy to modify the code.

The tooltip for the social share icons is stored in a variable per icon, for example this is Facebooks:

$facebook = ( $enable_facebook == '1' ) ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Facebook', '__x__' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"&#xf082;\"></i></a>" : '';

Where did you want that heart to link to? Or did you just want to show the tooltip with no link? 🙂

Thanks!

[Christina r]

Hi

That CSS worked – many thanks for that. The heart which is still not in the tag yet adds the page to their favorites. So doesn’t link out anywhere. Just adds and removes favorites so the tooltip would say Add to Favorites so how can I add a tooltip?

Is that page id just one portfolio page? Example, I have many of these:
http://moreparsmorefun.com/fundamentals/

Many thanks!
Christina

[Rue Nel]

Hello Christina,

Thanks for the updates!The page id (.page-id-7993) can no longer be found in your pages section. You must have remove this page. Anyways, you can get rid of the page ID if you want to apply that css globally.

Regarding heart icon, adding a tooltip would mean that we have to edit the WP Favorite Post plugin. Regretfully, we cannot provide support for this request as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Christina r]

Okay – got it – thanks for your help!

Christina

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts