Docs

[dminot]

I am using Ethos with a child theme. I can’t seem to figure out how to fix some spacing issues, that I have indicated in the attached images

My site is http://www.autismspectrumnews.org

1) The first file shows the sidebar has no margin/padding below the post slider, and I want the top of the sidebar to be aligned with the top of the content to the left.

2) The second file shows how pages have lots of extra space over the left content container, and I would like to bump it up to be in line with the sidebar widget.

3) The third file shows how there is no Page title shown (because I globally removed page titles in Custom Css as indicated below), but I want to show page titles for shop pages. Additionally, there is the same problem with the right sidebar spacing being too close to the navigation bar.

I’m thinking there might just be one issue that is causing all of the spacing problems, it might have something to do with Custom CSS changes I’ve made:

/* Remove Social Icons from Top Bar */
.x-topbar .x-social-global {
display: none;
}

/* Topbar Text color */
.x-topbar .p-info {
color: #000000;
}

/* Topbar Link color */
.x-topbar .p-info a{
color: #2e50ec;
}

/* Topbar link hover color */
.x-topbar .p-info a:hover {
color: #7d91f1;
}

/* Topbar align right */
.x-topbar .p-info {
float: right;
}

/* Left Align Logo */
.x-logobar {
text-align: center;
}

/* Change Logo Background Color */
.x-logobar {
background: white;
background-color: white;
}

/* Change Footer Background Color */
.x-colophon.bottom {
background-color: #333333;
}

/* Change Home Hover Color*/
#menu-item-149 a{
color: white !important;
}

/* Remove Title of Page */
.h-landmark, .h-landmark.entry-title {
display: none;
}

/*Adjust spacing height above post */
.x-header-landmark {padding: 1em 0 1.5em;
}

/* — TYPOGRAPHY — */

/* adjust paragraph line spacing
Default is: margin-bottom: 2.15em;
line-height: 1.8;*/
.entry-content p {
margin-bottom: 1.2em;
line-height: 1.62;
}
/* Changing Heading Size and Margins */
h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 25px;
margin-bottom: .6em;
}
h3, .h3 { font-size: 30px; }
h4, .h4 { font-size: 30px; }
h5, .h5 { font-size: 30px; }

/*Remove white space under navbar in woocommerce */
.woocommerce .x-header-landmark {
display:none;
}

/* Product price info stays present */
.woocommerce li.product .entry-wrap, .woocommerce-page li.product .entry-wrap {
top: calc(100% – 10.4em);
}

/* Adjust padding between content and right sidebar */
.x-main.left {
padding-right: 20px;
}
.x-sidebar.right {
padding-left: 20px;
}

/* Hide Author in Post Meta */
.p-meta > span:nth-child(1) {
display: none;
}

/* Edit text style for widgets */
.x-sidebar .widget_text a {
text-decoration: none;
color: #2e50ec;
}
.x-sidebar .widget_text a:hover {
color: #2AAC51;
}

/* HIDE FEATURED IMAGE IN A POST */
.postid-388 .entry-featured{
display:none;
}
.postid-171 .entry-featured{
display:none;
}

/* Remove the Next Arrow in Posts */
.single-post .x-nav-articles {
display: none;
}

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

For #1, use the following:

.x-header-landmark+.x-container>.offset>.x-sidebar {
    margin-top: 0;
}

This will align it to the horizontal line. If you want it to align to the image and text vertically, change the value to 35px.

For #2, use this:

.page-id-202 .entry-content {
    margin-top: -73px;
}

This effect is limited to the contact page. You can remove the .page-id-202 and it will affect all pages. It may have some undesired effects on other pages without the issue though. You could also add page IDs to the selector.

.page-id-# .entry-content
.page-id-# .entry-content,
.page-id-202 .entry-content {
    margin-top: -73px;
}

You can find the “page-id-#” by inspecting the page and looking at the body classes.

For #3, use the following:

.woocommerce .h-landmark, .h-landmark.entry-title {
    display: block;
}

.woocommerce .x-header-landmark {
    display: block;
}

This will get put the shop title back for the shop page. CSS in #1 will align the sidebar to the content, and the title will add additional spacing above.

Hope this helps – thanks!

[dminot]

Thanks!

The first bit of code combined with the second now makes the right sidebar too low on pages. Pages look fine if I take out the first bit of code and only use the second bit of code…

Looks like the top margin in <div class=”offset cf”> is causing the extra space – any way to make that smaller or gone?

Also, another issue is the meta – I only want authors hidden. I utilized this to get rid of authors but it also hid categories, which I don’t want hidden:
p-meta > span:nth-child(1) {
display: none;
}

[Christopher]

Hi there,

#1 Please add this :

.offset.cf {
    margin-top: 0;
}

#2 Please remove CSS and insert following 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() );

      if ( $number == 0 ) {
        $text = __( 'Leave a Comment' , '__x__' );
      } else if ( $number == 1 ) {
        $text = $number . ' ' . __( 'Comment' , '__x__' );
      } else {
        $text = $number . ' ' . __( 'Comments' , '__x__' );
      }

      $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>',
        $categories_list,
       $author,
        $date,
        $comments
      );
    }

  }
endif;

Hope it helps.

[dminot]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this :

p.p-meta span:after, time.entry-date:before {
    content: " / ";
}
p.p-meta span:nth-child(4):after {
    content: "";
}
.page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
    margin-top: 0;
    margin-right: 0;
}

Hope it helps.

[dminot]

This reply has been marked as private.

[Rad]

Hi there,

1. Please add this CSS as well with your preferred spacing.

.x-page-title-disabled .x-sidebar {
padding-top: 50px;
}

2. Please add this as well,

.single-product .entry-top-navigation {
display: none;
}

Cheers!

[Author]

Posts