Docs

[Chris Stovall]

I would like very much if you could tell me how to create this mouseover effect for the integrity theme portfolio items. The position of the text, what text is displayed and also the effect itself.

http://giant.is/creating/

Please let me know.

Thanks!
CDS

[Rue Nel]

Hello There,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

For the meantime, you may try to use TheGrid or Essential Grid and select the skin that does have a similar hover effect.

Thank you for your understanding.

[Lely]

Hello CDS,

Please use the following custom CSS:

.entry-thumb {
    background-color: rgba(0, 0, 0, .5);
}
.entry-thumb:before {
    content: "";
    background-color: transparent;
}
.x-portfolio .entry-wrap {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    background-color: transparent;
    padding: 0;
}
.x-portfolio .x-entry-share {
    border: none;
}
.x-portfolio:hover .entry-wrap {
    opacity: 1;
}
.x-portfolio .entry-wrap {
    opacity: 0;
}

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 your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then copy the file content-portfolio.php from \wp-content\themes\x\framework\views\integrity to \wp-content\themes\x-child\framework\views\integrity then open the copied file and replace the entire code with the following:

<?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(); ?>
    <?php if ( !x_is_portfolio_item() ) : ?>

	  <div class="entry-wrap cf">
		  <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>LELY
			</h2>
			<?php if ( $archive_share == '1' ) : ?>
			  <?php x_portfolio_item_social(); ?>
			<?php endif; ?>
		  </header>
	  </div>
	  <?php endif; ?>
  </div>
  <?php if ( x_is_portfolio_item() ) : ?>
  
  <div class="entry-wrap cf">

      <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_social(); ?>
      </div>
  </div>

    <?php endif; ?>

</article>

Hope this helps.

[Chris Stovall]

Well, thanks for trying. This is the result of the above css and new child-theme file. I get that it’s outside of the normal scope of help.

I was planning on using “The Grid” or “Essentials Grid” but here’s the problem. I can get a page of portfolio posts looking the way I want with the mouse over, etc.

The problem occurs when you click on a category link on the portfolio item. That link sends you back to the default portfolio layout looking totally different than the portfolio page built with The Grid. How do we fix that?

[Paul R]

Hi Chris,

Yes, Integrity default portfolio category page it completely different than the grid or essential grid.

Making the default look the same as the grid will require custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts