Docs

[ImpossibleDiG]

My new site is coming along nicely — I really love X Theme and Ethos!

But I’m running into a few issues with the header/menu/navigation/mobile responsive design.

• When I shrink the browser, my inline menu bounces to a second line and expands the height of the header
• When I further shrink the browser, my mobile menu does not appear. I’m sure there’s a setting for that, but I can’t seem to find it.
• And finally, this is a question, not an issue, but if I want to drop in social media icons into the header, is there a way to do that?

Thanks! You all have been amazingly helpful!

dig

Wordpress 4.5.2
X Theme 4.5.1 Ethos Stack

URL & password protect password in next (private) message

[ImpossibleDiG]

This reply has been marked as private.

[Joao]

Hi There,

I am glad you are enjoy X 🙂 Let´s try to help you:

When I shrink the browser, my inline menu bounces to a second line and expands the height of the header

Your logo is quite longo and content boxed. SO I believe for this issue the best solution would be to switch to a mobile button menu earlier, for that you could add the following code at your Appereance / Customizer / Custom / CSS

@media (max-width: 1200px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

When I further shrink the browser, my mobile menu does not appear. I’m sure there’s a setting for that, but I can’t seem to find it.

It appears but it is white, you can go to Appereance / Customizer / Ethos and change it´s color.

And finally, this is a question, not an issue, but if I want to drop in social media icons into the header, is there a way to do that?
Yes there is, please let us know which Icon you are looking to use, if you feel like doing it your self you can search the icon on this page inspect with the right button of your mouse and copy the html code that looks like this:

<i class="x-icon x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i>

After that you can add this code as a custom link in your Menu at Wp-Admin >Appereance >Menus, Just like you added all other links to the navabar.

Hope that helps,

Please let us know if you need help with anything else.

Thanks

Joao

[ImpossibleDiG]

Thanks so much!

• I’ve now adjusted the menu items based on your suggestion and it works great!
• The mobile menu solution isn’t quite ideal. Is there a way to change the mobile menu icon from white to the purple I’ve been using: rgb(122, 54, 146) – I really like the white background of the header
• In addition, is there a way to add a color border either around the whole header (I see one when I change the background color to something bolder than white) or just along the bottom of the header?
• Can I get icons for Twitter, Instagram and Patreon (if one exists).

Thanks so much!

[Rad]

Hi there,

– Please add this CSS too for mobile menu icon.

a.x-btn-navbar {
    background: rgb(122, 54, 146);
    padding: 4px 8px;
}

– Which header, the header navigation? Something like this?

.x-navbar {
    border-bottom: 2px solid rgb(122, 54, 146);
    border-top: 2px solid rgb(122, 54, 146);
}

– Sure, except Patreon, that icon isn’t available yet http://fontawesome.io/cheatsheet/

<i class="x-icon x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i>

<i class="x-icon x-icon-instagram" data-x-icon="" aria-hidden="true"></i>

Thanks!

[ImpossibleDiG]

Thanks again. You guys rock!

• On the mobile menu icon, is there a way for me to align it with my logo (effectively scooting it down a few pixels
• On the index page, I figured out how to have formatted custom excerpts, but I haven’t been able to get a MORE link (that goes to the post), preferable one that I can custom format
• Also on the index page, is there a way to alter the aspect ratio of the images? I’d like to experiment with 16:9
• On the index page and on posts, is there a way to customize the author/date/category line? I’d like to reorder as author/date/category/comment and unbold it
• Finally (phew!), on the category page, two things. 1) I am seeing “Category Archive” not the name of the category. 2) Is there a way to add custom text below the category title and above the archived posts?

Thanks! You guys are the best!!!

dig

[Christopher]

Hi there,

#1 & #3 Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
a.x-btn-navbar {
    margin-top: 30px;
}
}

.blog .entry-featured,
.archive .entry-featured{
width:50%;
}

#2 Please provide us with login credentials in private replay.

#4 Please add this code in child theme’s functions.php file :

// Entry Meta
// =============================================================================

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

    //
    // Author.
    //

    $author = sprintf( ' %1$s %2$s</span>',
      __( 'by', '__x__' ),
      get_the_author()
    );

    //
    // Date.
    //

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );

    //
    // Categories.
    //

    if ( get_post_type() == 'x-portfolio' ) {
      if ( has_term( '', 'portfolio-category', NULL ) ) {
        $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
        $separator         = ', ';
        $categories_output = '';
        foreach ( $categories as $category ) {
          $categories_output .= '<a href="'
                              . get_term_link( $category->slug, 'portfolio-category' )
                              . '" title="'
                              . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                              . '"> '
                              . $category->name
                              . '</a>'
                              . $separator;
        }

        $categories_list = sprintf( '<span>%1$s %2$s',
          __( 'In', '__x__' ),
          trim( $categories_output, $separator )
        );
      } else {
        $categories_list = '';
      }
    } else {
      $categories        = get_the_category();
      $separator         = ', ';
      $categories_output = '';
      foreach ( $categories as $category ) {
        $categories_output .= '<a href="'
                            . get_category_link( $category->term_id )
                            . '" title="'
                            . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                            . '"> '
                            . $category->name
                            . '</a>'
                            . $separator;
      }

      $categories_list = sprintf( '<span>%1$s %2$s',
        __( 'In', '__x__' ),
        trim( $categories_output, $separator )
      );
    }

    //
    // Comments link.
    //

    if ( comments_open() ) {

      $title  = apply_filters( 'x_entry_meta_comments_title', get_the_title() );
      $link   = apply_filters( 'x_entry_meta_comments_link', get_comments_link() );
      $number = apply_filters( 'x_entry_meta_comments_number', get_comments_number() );
      
      $text = ( 0 === $number ) ? 'Leave a Comment' : sprintf( _n( '%s Comment', '%s Comments', $number, '__x__' ), $number );

      $comments = sprintf( '<span><a href="%1$s" title="%2$s" class="meta-comments">%3$s</a></span>',
        esc_url( $link ),
        esc_attr( sprintf( __( 'Leave a comment on: &ldquo;%s&rdquo;', '__x__' ), $title ) ),
        $text
      );

    } else {

      $comments = '';

    }

    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
        $author,
        $date,
        $categories_list,
        $comments
      );
    }

  }
endif;

#5 Copy _landmark-header.php from framework/views/ethos and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ETHOS/_LANDMARK-HEADER.PHP
// -----------------------------------------------------------------------------
// Handles content output of large headers for key pages such as the blog or
// search results.
// =============================================================================

$disable_page_title = get_post_meta( get_the_ID(), '_x_entry_disable_page_title', true );

?>

<?php if ( ! x_is_blank( 1 ) && ! x_is_blank( 2 ) && ! x_is_blank( 4 ) && ! x_is_blank( 5 ) ) : ?>
  <?php if ( is_page() && $disable_page_title == 'on' ) : ?>
  <?php else : ?>

    <?php if ( x_is_shop() || x_is_product() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo x_get_option( 'x_ethos_shop_title' ); ?></span></h1>
      </header>

    <?php elseif ( x_is_bbpress() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo get_the_title(); ?></span></h1>
      </header>

    <?php elseif ( x_is_buddypress() ) : ?>
      <?php if ( x_buddypress_is_component_with_landmark_header() ) : ?>

        <header class="x-header-landmark x-container max width">
          <h1 class="h-landmark"><span><?php echo x_buddypress_get_the_title(); ?></span></h1>
        </header>

      <?php endif; ?>
    <?php elseif ( is_page() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>
      </header>

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

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php the_title(); ?></span></h1>
      </header>

    <?php elseif ( is_search() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Search Results', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : ?>

      <?php

      $meta  = x_get_taxonomy_meta();
      $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' );

      ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>
        <?php echo category_description(); ?>
      </header>

    <?php elseif ( is_tag() || x_is_portfolio_tag() || x_is_product_tag() ) : ?>

      <?php

      $meta  = x_get_taxonomy_meta();
      $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Tag Archive', '__x__' );

      ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo $title ?></span></h1>
      </header>

    <?php elseif ( is_404() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Oops!', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_year() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Post Archive by Year', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_month() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Post Archive by Month', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_day() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Post Archive by Day', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( x_is_portfolio() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo x_get_option( 'x_portfolio_title' ); ?></span></h1>
      </header>

    <?php endif; ?>

  <?php endif; ?>
<?php endif; ?>

Please add title and description to your categories, see the attachment.

Hope it helps.

[ImpossibleDiG]

This reply has been marked as private.

[Christopher]

Hi there,

#2 If you’re using visual editor, please remove manual excerpt to display read more.

Add this in child theme’s functions.php file :

// Excerpt More String
// =============================================================================

if ( ! function_exists( 'x_excerpt_string' ) ) :
  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;

#3 Add this code :

.blog a.entry-thumb,.archive a.entry-thumb {
    padding-bottom: 54%;
}
.p-meta>span:after {
    content: " ";
}

#4 Update previous code to :

// Entry Meta
// =============================================================================

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

    //
    // Author.
    //

     $author = sprintf( '<span>by <a href="%1$s">%2$s</a></span>',
      get_author_posts_url( get_the_author_meta( 'ID' ) ),
      get_the_author()
    );

    //
    // Date.
    //

    $date = sprintf( '<span>on <time class="entry-date" datetime="%1$s">%2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date('F j, Y g:i a') )
    );

    //
    // Categories.
    //

    if ( get_post_type() == 'x-portfolio' ) {
      if ( has_term( '', 'portfolio-category', NULL ) ) {
        $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
        $separator         = ', ';
        $categories_output = '';
        foreach ( $categories as $category ) {
          $categories_output .= '<a href="'
                              . get_term_link( $category->slug, 'portfolio-category' )
                              . '" title="'
                              . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                              . '"> '
                              . $category->name
                              . '</a>'
                              . $separator;
        }

        $categories_list = sprintf( '<span>%1$s %2$s',
          __( 'In', '__x__' ),
          trim( $categories_output, $separator )
        );
      } else {
        $categories_list = '';
      }
    } else {
      $categories        = get_the_category();
      $separator         = ', ';
      $categories_output = '';
      foreach ( $categories as $category ) {
        $categories_output .= '<a href="'
                            . get_category_link( $category->term_id )
                            . '" title="'
                            . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                            . '"> '
                            . $category->name
                            . '</a>'
                            . $separator;
      }

      $categories_list = sprintf( '<span>%1$s %2$s',
        __( 'In', '__x__' ),
        trim( $categories_output, $separator )
      );
    }

    //
    // Comments link.
    //

    if ( comments_open() ) {

      $title  = apply_filters( 'x_entry_meta_comments_title', get_the_title() );
      $link   = apply_filters( 'x_entry_meta_comments_link', get_comments_link() );
      $number = apply_filters( 'x_entry_meta_comments_number', get_comments_number() );
      
      $text = ( 0 === $number ) ? 'Leave a Comment' : sprintf( _n( '%s Comment', '%s Comments', $number, '__x__' ), $number );

      $comments = sprintf( '<span><a href="%1$s" title="%2$s" class="meta-comments">%3$s</a></span>',
        esc_url( $link ),
        esc_attr( sprintf( __( 'Leave a comment on: &ldquo;%s&rdquo;', '__x__' ), $title ) ),
        $text
      );

    } else {

      $comments = '';

    }

    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
        $author,
        $date,
        $categories_list ,                
        $comments
      );
    }

  }
endif;

#5 Please add this as well :

.archive h1.h-landmark span {
    margin-bottom: 20px;
    display: block;
}
.archive .x-header-landmark p, .archive .x-header-landmark {
    margin-bottom: 0;
    padding-bottom: 0;
}

Hope that helps.

[ImpossibleDiG]

#2: This does add the more link, but at the loss of custom formatted excerpt on the index page. To be honest, I can do this manually with the excerpt field, but I’d like to have something more turnkey if at all possible. Is there a way to keep the custom excerpt and automatically add a “Read more” link?

#3: Ding, ding, ding! Success!

#4: Closer, but still running into some issues here. a) There’s now too much space between items. b) Can we lowercase the “i” in “In” before the categories? c) Can we remove comments all together? d) I know this line is inheriting bold from the headline, but is there anyway to permanently unbold this line? e) I love how the comments link is highlighted. Can we do the same to the author and categories?

#5: Perfect!!! Can I do the same thing for the Author page now that I have a link in the posts to the authors?

Making progress!!! Thanks so much!

[Lely]

Hi There,

#2. Please check this thread:https://community.theme.co/forums/topic/adding-read-more-link-to-manual-excerpt/#post-649631

#4 a:

.p-meta>span:after {
    padding: 0 0.15em;
}

b: From the suggested code on the previous reply, please check this line of code:

        $categories_list = sprintf( '<span>%1$s %2$s',
          __( 'In', '__x__' ),
          trim( $categories_output, $separator )
        );

Update to this:

        $categories_list = sprintf( '<span>%1$s %2$s',
          __( 'in', '__x__' ),
          trim( $categories_output, $separator )
        );

c:

p.p-meta .meta-comments {
    display: none;
}

d: We have to import the normal Lato font. Current font weight available is just 700 and 900. You may check here:http://fonts.googleapis.com/css?family=Lato%3A900%2C700&subset=latin%2Clatin-ext&ver=4.5.2. We need to add the following line to import 300 and 400 on your child theme style.css file at the very top of this file:

@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

e:

.p-meta > span > a, .p-meta > span>span a {
    color: rgb(122,54,146);
}

#5 Same CSS should work on your author page. I did check this:http://possiblegirls.wpengine.com/author/possiblegirls/ and since there’s no header too, it is not needed. Please clarify.

Hope this helps.

[ImpossibleDiG]

That helps SO much! See below for details and follow up questions…

2) Aces! That works!!!

4a) Perfect!

4b) Perfect!

4c) Perfect!

4d) Line added to child theme style.css — what’s next? 🙂

4e) Perfect!

5) For the author page, I was hoping to have author name and description above the posts, much the same as the category pages with category name and description. I assumed it would pull from the user profile, and the “Display Name” and “Biographical Info” fields. Is that not the case?

6) If I may add to the list, my menu on my navbar is acting up. When I mouse over the items in the menu, the purple bar underneath only shows up for three of the items. This was working earlier today, so not sure what the cause is.

[Lely]

Hi There,

4d. It is working already. Clear your browser cache or hard refresh to see the effect.

The meta is not bold anymore.

5.) That is not available by default and it would need some customization. Please check this thread:https://community.theme.co/forums/topic/author-link-and-author-archive-page/

6.) Please also add this CSS:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 rgb(122,54,146) !important;
}

Hope this helps.

[ImpossibleDiG]

4d) Cache cleared. Works like a charm!

5) It’s alive! Alive!

6) Perfect!

Thanks for all the help.., you guys rock!

[Joao]

You are welcome.

Let us know if we can help you with anything else.

Joao

[Author]

Posts