Docs

[yhshin1020]

Hey,

I would like to make two changes to my blog posts:

1) I would like to remove the border around individual blog posts (x theme container shadow) and make the white container transparent.

2) Add a next / prev post arrows / buttons at the bottom of the post page.

I’ve seen two other threads which deal with the integrity stack:
https://community.theme.co/forums/topic/single-post-next-previous-arrow-navigation-like-ethos/
https://community.theme.co/forums/topic/is-there-a-next-postprevious-post-shortcode-for-integrity/

But i’m not sure which one works or whether they still work.

Thanks!

[yhshin1020]

This reply has been marked as private.

[Christian]

Hey there,

1. Please add the code below in your Appearance > Customize > Custom > Global CSS

.entry-wrap {
    box-shadow: none;
}

2. Please add the code below in your functions.php. It should look like the attachment.

//* Add Entry Nav Below Content

add_action( 'x_before_the_content_end', 'x_entry_navigation' );

[yhshin1020]

This reply has been marked as private.

[Christian]

Please replace the code with

//* Integrity Entry Nav Below Content

add_action( 'x_before_the_content_end', 'custom_entry_navigation' );

function custom_entry_navigation() { 
$stack = x_get_stack();

  if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-chevron-left" data-x-icon=""></i>';
    $right_icon = '<i class="x-icon-chevron-right" data-x-icon=""></i>';
  } else {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon=""></i>';
    $right_icon = '<i class="x-icon-arrow-right" data-x-icon=""></i>';
  }

  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );
  $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
  $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;
?>

<div class="x-nav-articles">

  <?php if ( $prev_post ) : ?>
    <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
      <?php echo $prev_icon . " <span>" . __( 'Previous Post', '__x__' ) . "</span>"; ?>
    </a>
  <?php endif; ?>

  <?php if ( $next_post ) : ?>
    <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
      <?php echo  "<span>" . __( 'Next Post', '__x__' ) . "</span> " . $next_icon; ?>
    </a>
  <?php endif; ?>

</div>

<?php

}

Then add the CSS below in your Appearance > Customize > Custom > Global CSS

.x-nav-articles {
    width: 35%;
}

Result would look like the attachment. Moving the text below the arrow would require additional CSS and further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer.

Thanks for understanding.

[yhshin1020]

This reply has been marked as private.

[Lely]

Hi There,

Please use the following code instead on your child theme’s functions.php file:

// Entry Navigation
// =============================================================================

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

  $stack = x_get_stack();

    $left_icon  = '<i class="x-icon-chevron-left" data-x-icon=""></i>';
    $right_icon = '<i class="x-icon-chevron-right" data-x-icon=""></i>';

  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );
  $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
  $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;

  ?>

  <div class="x-nav-articles">

    <?php if ( $prev_post ) : ?>
      <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
        <?php echo $prev_icon; ?>
      </a>
    <?php endif; ?>

    <?php if ( $next_post ) : ?>
      <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
        <?php echo $next_icon; ?>
      </a>
    <?php endif; ?>

  </div>

  <?php

  }
endif;

Then the following CSS:

.x-nav-articles a {
    display: block;
    width: 38px;
    height: 42px;
    font-size: 18px;
    line-height: 42px;
    border: 1px solid #333;
    text-align: center;
    color: #333;
    background-color: #fff;
    -webkit-transition: color .3s ease,background-color .3s ease;
    transition: color .3s ease,background-color .3s ease;
    position: relative;
}
.x-nav-articles {
   float: right;
    width: 88px;
    margin-left: 35px;
}
.x-nav-articles .prev {
    float: left;
    right: -1px;
}
.x-nav-articles .next {
    float: right;
}

Hope this helps.

[yhshin1020]

I have followed and added all the codes but nothing is showing up on the blog posts.

Could you help me check?

Thanks

[Paul R]

Hi,

To add nav beside your post tilte, create file _content-post-header.php in wp-content/themes/x-child/framework/views/integrity
and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/INTEGRITY/_CONTENT-POST-HEADER.PHP
// -----------------------------------------------------------------------------
// Standard <header> output for various posts.
// =============================================================================

?>

<header class="entry-header">
  <?php if ( is_single() ) : ?>
  <?php x_entry_navigation(); ?>
  <h1 class="entry-title"><?php the_title(); ?></h1>
  <h2 class="entry-title">
    <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 endif; ?>
  <?php x_integrity_entry_meta(); ?>
</header>

Hope that helps.

[Author]

Posts