[Resolved] Removing redundant container rows in a content template

[Author]

Posts

[martinG-12]

I'm trying to create a very basic content template that matches the layout of a page I've built using WPBakery Page Builder on Uncode. This is the reference page showing the desired layout:

hidden link

Trying to replicate the page design as a content template, this is the result:

hidden link

Comparing the page source code, it looks like the content template adds redundant container rows which is throwing out the content spacing. What is adding these rows and how can they be removed?

FYI - I've tried creating the template using the Classic Editor, WPBakery Page Builder and the Block Editor and I get the same result regardless of which one I use.

Thanks,
Martin

[Nigel]

Hi Martin

A Content Template only replaces the content area of a post (literally, what is output by the function the_content in the theme PHP template), the remainder of the page comes from the theme.

The difference between the two links you shared is that the desired outcome is a page, and the problem outcome is a post, and your theme appears to handle the styling for those differently, including fairly significant padding in the case of posts (see the screenshot).

Those CSS style rules come from the theme stylesheet.

Check your theme settings to see if you can change the options for posts so that they don't include such padding.

Otherwise you'll need to add some CSS of your own to the content template to override these styles.

[martinG-12]

Thanks for clarifying that, and pointing me in the right direction. I'll take another look at the Uncode post layout options and theme CSS. Failing that, I'll pick this up with Uncode support.

[martinG-12]

Thanks for the great support.

[martinG-12]

Sorry Nigel - I may have been a bit premature in closing this ticket.

Based on your advice I took a closer look at the post layout options and made some changes so now posts and pages look the same as you can see here:

hidden link

hidden link

Unfortunately I'm still having the same issue with spacing around the content coming from the template as you can see here:

hidden link

For reference I have enabled the display of the body content from the activity itself, but even if I disable this and only show the template content, the spacing issue remains.

Before I raise this with Uncode, are you sure that the template is not adding any additional containers?

Thanks,
Martin

[Waqar]

Hi Martin,

Thanks for writing back.

If you'll compare the output of the content from the theme and the content template, you'll see that the content from the content template is wrapped within two extra divs.
Screenshot: hidden link

Under the theme's div with classes "post-content un-no-sidebar-layout", the content from the theme directly shows the div with class "vc_row style-color-lxmt-bg row-container".

<div class="post-body">
  <div class="post-content un-no-sidebar-layout">
    <div data-parent="true" class="vc_row style-color-lxmt-bg row-container" id="row-116717" data-section="0">
      <div class="row limit-width row-parent" data-imgready="true">
      ......
      </div>
    </div>
  </div>
</div>

But the output coming from the content template is adding two extra divs with classes "row-container" and "row row-parent style-light limit-width no-top-padding double-bottom-padding" respectively, before the div with class "vc_row style-color-lxmt-bg row-container".

<div class="post-body">
  <div class="post-content un-no-sidebar-layout">
    <div class="row-container">
      <div class="row row-parent style-light limit-width no-top-padding double-bottom-padding">
        <div data-parent="true" class="vc_row style-color-lxmt-bg row-container" id="row-158810" data-section="1">
          <div class="row limit-width row-parent" data-imgready="true">
          ......
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

These two extra divs are resulting in the spacing and background color differences, between the two outputs. You can remove those two extra divs from your content template to make the output look the same.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[martinG-12]

Thanks Waqar. So I understand that it's the extra divs that are causing the issue but how do I remove them from the template?

As you can see from the attached screenshots, I have entered the same HTML in both the reference POST and in the Toolset template, so how do I remove the divs as they seem to be coming from the underlying template itself which I don't have access to?

If it helps, I can give you admin access to the site - just not sure where to provide login details securely.

[Waqar]

Thanks for writing back and it would help if I can get admin access.

I've set your next reply as private, so that you can share temporary admin login details.

Note: Please make a complete backup copy, before sharing the access details.

[Waqar]

Thank you for sharing the admin access.

As the extra divs are not part of the Toolset content template "Template for Activity-Walks 1", it means that either the "Uncode" theme or the "Uncode WPBakery Page Builder" plugin is adding them.

To remove them from the output, you can consult their official support team and for now, the workaround can be to remove them using this custom script:

jQuery( document ).ready(function() {
	jQuery('.post-wrapper .post-body .post-content > .row-container > .row.row-parent > .row-container > .row.row-parent').addClass('remove-this');
	jQuery('.post-wrapper .post-body .post-content > .row-container > .row.row-parent > .row-container').addClass('remove-this');
	jQuery('.post-wrapper .post-body .post-content > .row-container > .row.row-parent').addClass('remove-this');
	jQuery('.post-wrapper .post-body .post-content > .row-container').addClass('remove-this');
	jQuery('.post-wrapper .post-body .post-content .remove-this').removeClass();
});

Note: You can add this code in the content template's "JS editor".

[martinG-12]

Thanks for taking a closer look at the issue and for coming up with a workaround - much appreciated.