Docs

[fullboost88]

Hello

I have a few things bugging me with the layout in my Renew theme:

I am wanting to move the sidebar to the right of the main content area, so the red columns sits nicely against the dark background.

Remove the bottom gap under the side bar, you can also see the gap under the large image it on the contact us page.

The main area that has the image and orange, can the white be removed from top, left and right? I want the whitespace to be removed.

I’ll send the login details in the next message.

Thank you.

[fullboost88]

This reply has been marked as private.

[Joao]

Hi There

Please add to your Appearence / Customizer / Custom / CSS the following code:

@media (min-width: 979px) {

 .page-template-template-layout-content-sidebar .x-container.max.width.offset {
   width: 100%;
    max-width: 100%;
background-color: red ; 
padding-left: 40px;
margin: 0px;
padding-top: 40px !important;

}
}

@media (max-width: 979px) {

 .page-template-template-layout-content-sidebar .x-container.max.width.offset {
   width: 100%;
    max-width: 100%;
background-color: red ; 
margin: 0px;
!important;

}
.x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
padding-top: 60px;
} }

Hope that helps

Thanks

Joao

[fullboost88]

Hello Joao

Thanks for looking into that.

The sidebar has moved over on the home page but not the services page.

Also, can the white area be removed? That was my 3rd point. I want the top image to spread out so it’s against the top left and sidebar, so the x-main container spreads out. I understand if I want some padding for other items, I will add a style or use a container.

I would like to use the page titles (landmark container) but it pushes the sidebar down, is there a way for both to exist?

Regards

[Rad]

Hi there,

The above CSS will only work on the page that uses page template’s content sidebar. Please change your service page template to the content sidebar.

And landmark is a full-width element under the masthead, it’s not part of the content area where sidebar is, hence, pushing other elements down.

Please change your CSS to this,

@media (min-width: 979px) {

 .page-template-template-layout-content-sidebar .x-container.max.width.offset {
   width: 100%;
    max-width: 100%;
background-color: red ; 
padding-left: 0px;
margin: 0px;
padding-top: 0px !important;

}

.page-template-template-layout-content-sidebar .x-main {
    width: calc(70.79803% + 73px);
}
.page-template-template-layout-content-sidebar .x-sidebar {
    padding-top: 40px !important;
}

}

@media (max-width: 979px) {

 .page-template-template-layout-content-sidebar .x-container.max.width.offset {
   width: 100%;
    max-width: 100%;
background-color: red ; 
margin: 0px;
!important;

}
.x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
padding-top: 60px;
} }

Hope this helps.

[fullboost88]

Thanks Rad, that worked as how I wanted it too 🙂

How do I get the sidebar to move over on the post page like this – http://promaz.com.au/wp/index.php/2016/04/29/2nd-post/

Regards

[Christopher]

Thanks for writing in! Regretfully, 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.

[fullboost88]

Thanks Christopher

I’d like the right hand sidebar to move to the right. The CSS provided has worked on the template pages, but on the blog page and posts page, it still sits indented from the right.

So here is a page it sits all the way right (correct)
http://promaz.com.au/wp/index.php/services/

And here are the blog pages where it sits inwards (incorrect)
http://promaz.com.au/wp/index.php/news/
http://promaz.com.au/wp/index.php/2016/04/29/3rd-post/

Regards

[fullboost88]

I’ve since removed this page,
http://promaz.com.au/wp/index.php/2016/04/29/3rd-post/

Please refer to this one instead.
http://promaz.com.au/wp/index.php/2015/05/05/13b-20b-rx-8s/

[fullboost88]

Not sure why but the services page is not showing the sidebar at all (incorrect)
http://promaz.com.au/wp/index.php/services/

Even though it’s using the same page as the home page (correct)
http://promaz.com.au/wp/

[Rue Nel]

Hello There,

To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.blog .x-container.max.width.offset,
.archive .x-container.max.width.offset {
  width: 100%;
  max-width: 100%;
  background-color: red ; 
  margin: 0px;
}
 

.blog .entry-header, 
.blog .entry-content,
.archive .entry-header, 
.archive .entry-content {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 0;
}

The sidebar on the services page is empty because you have assigned a different sidebar to display. You can change it by going to Appearance > Sidebars

http://prntscr.com/b0hpas

Hope this helps.

[fullboost88]

Thanks Rue

The sidebar has moved over on the news (blog) page, but not on the post page, for example – http://promaz.com.au/wp/index.php/2015/04/14/sound-20b-rotary-engine-mazda-rx-7/

Also, on the blog page there are really large gaps between the posts, can these be removed?

[Lely]

Hello There,

Please update above CSS to this for it to work on single post page too:

.single-post .x-container.max.width.offset,
.blog .x-container.max.width.offset,
.archive .x-container.max.width.offset {
  width: 100%;
  max-width: 100%;
  background-color: red ; 
  margin: 0px;
}
 

.single-post .entry-header, 
.single-post .entry-content,
.blog .entry-header, 
.blog .entry-content,
.archive .entry-header, 
.archive .entry-content {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 0;
}
.blog .hentry {
    margin-top: 0px; /* To remove large gap between post on blog page*/
}

Hope this helps.

[duncan_m]

After much searching there is also an option in Customizing => Layout & Design => Layout that allows you to toggle what side the sidebar appears on the blog.

[Rad]

Hi there,

Yes, it will only inherit the global sidebar positioning. But can be changed through custom coding. For example, this can be place on child theme’s functions.php

  function x_get_content_layout() {

    $content_layout = x_get_option( 'x_layout_content' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }

if ( is_home() ) {
return 'content-sidebar';
}

    return $layout;

  }

The code that I added will enforce content-sidebar layout, you can change it to sidebar-content if you prefer it.

if ( is_home() ) {
return 'content-sidebar';
}

Thanks!

[Author]

Posts