Remove Grey Space Blog Post

[asn360]

For some reason, I cannot figure out how to remove the container space in newly created Blog Posts. I’ve searched this forum and I haven’t been able to find a solution.

Also, is there a way to remove the title without using CSS?

Thanks for the help!

[ruenel]

Hello Anish,

Thanks for writing in! By design, the single blog posts have a container that has some spaces around the post contents. Regretfully there is no setting in the Theme Options that you can remove or minimize these spaces. You may need to add CSS code into X > Theme Options > CSS to be able to alter it.

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The post content is using the entry-wrap class as a container and it is having this built-in styling:

.entry-wrap {
    display: block;
    padding: 60px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

Feel free to modify the code above to change the padding, background color, and other properties.

Regarding the titles, the post titles will always display. If you are going to remove it, you will have to use CSS or edit the single post template in the theme instead. Before you can modify the single template file, we would highly recommend that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is set up, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

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

?>

<header class="entry-header">
  <?php if ( is_single() ) : ?>
  
    <?php // do not display the post title ?>

  <?php else : ?>
  <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>

I am assuming that you are using the Integrity stack. If you are using another stack, you may need to copy the code from wp-content/themes/x-child/framework/views/{our-stack}/_content-post-header.php

3] Save the file named as _content-post-header.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/integrity/

You will have to create the folder path since it does not exist in your child theme yet.

We would love to know if this has worked for you. Thank you.

[asn360]

Thanks for the prompt reply! I should have clarified – I’m trying to remove the container. I jumped into the browser developer module, but I can’t seem to figure out the CSS to either change the container margins or change the color to white.

And thanks for the help on the php code!

[asn360]

Update: Just figured it out!

I used this code:

.single-post .x-container
{
  margin: auto;
  max-width: 1280px;
  width: 100%;
}

[lely]

Hi Anish,

Glad you were able to figure this out.

Cheers.