Docs

[anthony2483]

I have this shortcode in a text widget on my sidebar
[recent_posts count="4" class="custom" orientation="vertical" ] [recent_posts count="4" class="custom" no_image="true" orientation="vertical" fade: “true”]

This CSS

.x-recent-posts.custom.vertical > a {
  margin-bottom: 0px;
}

The problem I’m trying to solve is removing the padding between the two shortcodes so there isn’t a break between them.

[Thai]

Hi There,

Please add the following CSS:

.x-sidebar .x-recent-posts {
    margin: 0 !important;
}

Hope it helps 🙂

[anthony2483]

1. That worked great but I have another issue that I implemented the changes here https://community.theme.co/forums/topic/ethos-next-post-button-at-the-bottom-of-the-page/

to move the post navigation arrows which did work but now the padding on the recent posts was affected as well. I believe this bit is causing the issue but I’m unsure how to tweak so that it doesn’t change the sidebar items.

.single-post article.post {
	position: relative;
	padding-bottom: 60px;
}

2. I can’t figure out the CSS for the hover border around the recent post

[anthony2483]

This reply has been marked as private.

[anthony2483]

I tried working on it more and attempted to implement the arrows with titles as listed here
https://community.theme.co/forums/topic/toggle-between-posts/page/3/

however I cannot figure out how to reference the 2nd navigation arrows so they are not displaying properly

What I’m trying to achieve is splitting the previous and next items the width of the page and be able to format the title

Any help would be greatly appreciated

[anthony2483]

I ran into quite a few issues but I got this figured out. One thing you guys may want to check on your end is that to me the x_entry_navigation icons were working backwards.

For example the right arrow was linked to the previous(older) post and the left linked to the newer. I reversed these so the left arrow links to older and the right to newer.

Anyways here is the code added to functions.php

// Entry Navigation
// =============================================================================
if ( ! function_exists( 'x_entry_navigation' ) ) :
  function x_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, '', true);
  $next_post = get_adjacent_post( false, '', false);
  $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;

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

    $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, '', true );
    $next_post = get_adjacent_post( false, '', false );
    $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
    $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;
    $space = "  ";
    $output = '<div class="x-nav-articles2">';

    if ( $prev_post ) {
      $output .= '<a href="'. get_permalink( $prev_post ) .'" title="'. __( 'Previous Post', '__x__' ) .'" class="prev">'
                  . $prev_icon .$space  .'<span>'. get_the_title( $prev_post ) .'</span>'
                  . '</a>';
    }

    if ( $next_post ) {
      $output .= '<a href="'. get_permalink( $next_post ) .'" title="'. __( 'Next Post', '__x__' ) .'" class="next">'
                   . '<span>'. get_the_title( $next_post ) .'</span>' .$space .$next_icon
                  . '</a>';
    }

    $output .= '</div>';

    return $output;
  }
endif;

add_filter( 'the_content', 'post_nav_articles');

function post_nav_articles( $content ) {
  if ( is_single() ) {
    return $content . x_entry_navigation2();
  } else {
    return $content ;
  }
}

And this added to CSS

.x-nav-articles2 .next {
    float:right;
  
}

Let me know if there are any improvements I can make in the changes I made.

[Rue Nel]

Hello There,

Thanks for the updates! By default the latest should be at on the left side and the previous will be on the right. In your case, you have switched it. I think it is working perfectly right on my end. No need to have more improvements for it. Unless otherwise you want something else. At this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[anthony2483]

I’m good to go with the post navigation now. I just wanted to post my results for future searchers but I do have the one other thing.

What is the CSS needed to change the border hover color for the recent posts in my sidebar.

Thanks

[Rad]

Hi there,

Please add this CSS as well,

.x-recent-posts a:hover {
    border-color: #56AA55;
}

Thanks!

[Author]

Posts