Blog Post Layout Customization

Hi there,

I’m using Integrity on my website, but I want to change the default layout of the blog posts.

Is there any method I can use to achieve a layout like this sample?

=> https://www.dropbox.com/s/nuxeim1vu34m8pm/Blog-Post-Page-Sketch-DriFru.jpg?dl=0

Many thanks in advance for your support.

Hello Charles,

We can hide those default feature image on top using the following CSS:

.single-post .entry-featured {
    display: none;
}

Then build the content using Cornerstone/Content Builder. That specific layout is easy to achieve in Cornerstone/Content builder. Use recent post shortcode to display recent articles after the content.

Hope this helps.

Hi, Lely!

Many thanks for your support.

I’m trying to follow your advice, but Cornerstone doesn’t want to load. We recently installed the Pro version and it was working fine, but don’t know why it isn’t loading now.

I disabled the plugins that I have installed on the site to see if it works, but still does not want to load.

Can you help me solve this issue too, please?

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Hi, Joao!

Sure. I will send you the login credentials in a secure note.

Many thanks!

Hi there,

Thank you for providing the login information. I’ve checked your website and could not see the problem you were discussing regarding the Pro Editor.

I’ve added a new blog post called test post and used the pro editor to somehow design the post like the mockup that you’ve sent.

Thank you.

Hello, Christopher.

Thank you very much for your assistance.

Apparently, my connection to the internet was not very good. For that reason, the Pro Editor did not want to load, I suppose. But now it’s working fine.

So, after following the steps recommended by you in relation to the personalization of the blog posts, now the appearance of the blog shows as follows:

https://www.dropbox.com/s/btg2e2tpixus4pl/Screen%20Shot%202017-12-04%20at%2011.47.16%20AM.png?dl=0

But if I delete the blog post designed with Pro Editor, everything returns to normal.

How can I solve that?

Hi there,

Thanks for sharing login credentials so we could investigate this on your site. I’ve taken a look and this appears to be a conflict with Essential Grid and the V2 element system in Pro. Regretfully I don’t have a workaround for this. We are working on a way to fix it in a future release.

What you could do is use classic elements. This is possible by holding cmd on Mac and ctrl on Windows before clicking “Add Section”. You’ll see it replaced with “Add Classic Section”. If you use classic layout elements (sections, rows, columns) and classic elements inside them, you won’t experience this. You could also build your blog posts using the WordPress editor instead. I don’t have an ETA on when this will be fixed, but it will be something we start looking into into before the next update.

Thanks for your reply.

Okay. It seems that It works with classic elements.

Is there any way I can eliminate the container and the comment form that comes by default on the blog post?

I also need to edit the main title.

I tried to use the code provided by your co-worker, but it doesn’t work.

Your assistance is very appreciated.

Hi There,

Can you clarify which container you want to eliminate? In case you are referring to the box surrounding the content, we can remove it using the following CSS:

.single-post .entry-wrap {
    box-shadow: none;
}

See this: https://screencast-o-matic.com/watch/cblhcq2glV

To disable comment, go to Settings > Discussion

Hi,

Yes, I refer to the box surrounding the content. I followed your instructions and it disappears, but when I refresh the site, the box appears again.

Regarding the comments section, I disabled it, but it appears despite that.

I will appreciate if you try to make those changes, please. You already have the login.

Thanks!

Hello There,

You will need to add this code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

.single-post .entry-wrap {
    box-shadow: none;
}

To disable the comments, please check out the several ways how to do it from here:

Hope this helps.

I used the “Disable Comments” plugin and it works. The code you provided works as well. Thanks!

On the other hand, I will definitely not be able to use the Pro Editor for the posts because even though I use the classic elements, the blog page is displayed as the image I sent you before. It worked well before, but now it has the same problem again.

Now, I wonder if there is any way to display the content (text-image) like the attached image. No full-width. All centralized with more space on the sides. I would also like to know how I can centralize the title.

Thank you!

Hi there,

I think you’ll need some CSS in that type of layout (if you don’t wish to use the builder). In that case, please add this CSS to your global custom CSS.

.single-post .site > .x-container.max.width.offset {
max-width: 600px;
}
.single-post .entry-title {
text-align: center;
}

Hope this helps.

Excellent! It works. Thank you.

Is there any way I can increase the font size of the posts?

Additionally, I’m using the extension “Email Forms” in the footer area of the site. Is there any way I can change its appearance? Just like the option 02 in the attached image.

Your assistance is highly appreciated.

Hi again,

To increase the font size you can make use of the following code:

.page-id-787 .esg-content {
    font-size: 18px !important;
}

For the email forms, try this code:

.tco-subscribe-form fieldset {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

Let us know how this goes!

Hi,

I applied the code for the font size, but it didn’t change. See the attached image.

I also applied the code for the email form and it now looks like the attached image.

Any solution?

Hi there,

Please add this code as well:


.single-post .entry-content p {
    font-size: 1.3rem;
}

.tco-subscribe-form fieldset:nth-child(4),
.tco-subscribe-form fieldset:nth-child(5) {
    display: none;
}

.tco-subscribe-form input[type="email"] {
    border-radius: 0;
}

.tco-subscribe-form input[type="submit"] {
    margin-top: 0;
}

Please note that further customization falls outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Hope this helps.

Hi, Jade.

Thanks, it works.

And sorry for the inconvenience with the customization of the site.

That completely fin, and we are glad that we could help you.

Thanks