Skip Navigation

[Resolved] Tag, class and ID not working on Child Layout cell

This support ticket is created 8 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 9 replies, has 2 voices.

Last updated by peterJ-3 8 years, 4 months ago.

Assisted by: Beda.

Author
Posts
#347253

I am trying to: Add a wrapper to all elements in a child layout by editing the Child Layout cell in the parent layout. I have tried doing this by editing both the Child Layout Cell itself as well as the containing row of the child layout.

I expected to see:

<header>
</header>
<section id="page">
  <header>
     ...
  </header>
  <section>
    ...
  </section>
  <aside>
    ...
  </aside>
  <footer>
    ...
  </footer>
</section>
<footer>
  ...
</footer>

Instead, I got:

<header>
</header>
<header>
   ...
</header>
<section>
  ...
</section>
<aside>
  ...
</aside>
<footer>
  ...
</footer>
<footer>
  ...
</footer>
#347395
Bildschirmfoto 2015-11-15 um 15.58.31.png

Thank you for contacting us here in the Support Forum

While you are in a Parent layout and add a Child Layout, that Row can not be edited from the parent layout.
Also editing the Child Layout Cell has no effect, as you see a message should be rendered when you try to duo that.

To style Row or Cells, you should do this in the Child Layout itself instead of the parent layout.

Please let me know if you need further infos about this and do not hesitate to open a new thread if other issues or problems arise

Thank you for your patience.

#348073

Can you suggest a way to produce nested sections within headers, other sections or footers - making use of bootstrap containers on the nested sections - or is that not possible without hacking bootstrap and the grids?

#348172

What you can do, is to include a Child layout Cell together with some other cell in the same row.

Then, the Child Layout Cell is editable (HTML Tags and Classes).

Or, you can edit those in the Child Layout Directly.

This is what you can do with layouts.

Customizing Bootstrap itself is not possible with Layouts.

But also, to add classes or tags of div's, you do not need to customize Bootstrap as this only provides the CSS and JS, not the HTML itself.

Please let me know if you need further infos about this.

Thank you for your patience.

#348241

That is a shame. Extremely restrictive and means that unless I hack the Bootstrap CSS to death, I am unable to produce semantic HTML for my clients.

Is there anything in the roadmap to improve this?

If not, then I will most likely have to drop layouts and go back to writing all of my HTML directly into content templates in Views.

#348251

I apologize deeply the inconveniences you are facing due to this issue. I will try to help you as fast and effective as possible, so you can go on with your project.

I might misunderstand the issue, but if you refer to modifying Bootstrap default features with a Plugin, this is not possible.

You can add every kind of HTML you need (ID, Class) in layouts.

As mentioned, if it's a Child layout, you can do that in 2 places:

1. In the Child layout itself.
==> If the Cell is lonely in a Row

2. In the Child Layout cell
==> if the Cell is not lonely in a Row

Layouts can not modify Bootstrap.
There is no plugin that can do that, as far I know

HTML Is produced by Layouts, and that can be customized with Classes and ID's, as elaborated above.

Semantically, I don't see a restriction here.
It is just like you edit a PHP File and modify the HTML in it.

If the Layout covers the entire Template, you have only output from the Layout.

If you wrap the call to the Layout with some Theme default HTML, that will be outputted too.

Layouts uses Bootstrap default Classes and ID's.

We can not modify this.

I hope I did not fully misunderstand your concern.

Please do not hesitate to correct me, if so.

Thank you for your patience.

#348270

OK. I think you are misunderstanding.

----------------------------------------------------------------------
Example 1:

Say I want to include two sections as rows in a footer that will use the layouts built in feature of full width background but contained cells.

<footer [THIS IS A LAYOUT ROW] >
  <div [THIS IS A GRID LAYOUT] >
  <section [THIS IS A GRID ROW] >...</section>
  <section [THIS IS A GRID ROW] >...</section>
</footer>

In the above scenario, I can only apply the "Row background extends to full width" to the containing footer. What I want to do is to apply "Row background extends to full width" to the contained sections so that each can have a different full-width background but with contained content.

-----------------------------------------------------------------------
Example 2:

Parent:

  <header>...<header>
  <section >
    THIS IS A PARENT LAYOUT 
  <section>
  <footer>...</footer>

Child:

  <header [Row background extends to full width] >
    ...
  </header>
  <section [Row background extends to full width] >
    ...
  </section>

Expected output:

  <header>...<header>
  <section >
    <header [Row background extends to full width] >
      ...
    </header>
    <section [Row background extends to full width] >
      ...
    </section> 
  </section>
  <footer>...</footer>

What I actually get:

  <header>...<header>
  <header [Row background extends to full width] >
    ...
  </header>
  <section [Row background extends to full width] >
    ...
  </section
  <footer>...</footer>
#348482

Thanks for the Details

I understand.

What you mean, is that if you want to create this below you need actually 2 ROW's, in order to make it Full Width, and can not style the GRID Layout Rows themselves as full background.

Since you want 2 <sections> full back ground, in the same Row <footer> this is not producing the correct HTML but twice a ROW (<footer>) or however you would approach it, it produces a "double" (or xy) entry.

I have reported this, to see if we can make GRID ROWS also editable just like Layout Rows

Thank you for reporting this, I apologize I did not recognize the issue initially.

#348562

I apologize the delay here

I will make a example below of manual code and code produced with a possibly minimal Layout (not using a Child Layout, just one single layout):

Manual to your template:

<footer class="row" >
  <div class="container-fluid" >
  <section class="container-fluid" style="background-color:red;" >...</section>
  <section class="container-fluid" style="background-color:blue;">...</section>
</footer>

It is not possible to make that with Layouts as you will have a ROW each section, instead of just section, or a double section if you class the Row as section (and the "holded" cell too)

The above HTML (coded directly in a php template) produces this HTML:

<footer class="row">
  <div class="container-fluid">
  <section class="container-fluid" style="background-color:red;">...</section>
  <section class="container-fluid" style="background-color:blue;">...</section>
</div></footer>

With the Layout, you have something similar to this HTML:

  <footer class="row">
    <div class="col-sm-12 container-fluid">                
      <div class="row">
        <section class="col-sm-12 container-fluid">...</section>
      </div>                
      <div class="row">
        <section class="col-sm-12 container-fluid">...</section>
      </div>
    </div>
  </footer>

It is clear that if it's coded manually it's very "raw" and you get what you code, not a single thing more.
What you code with a tool (in this case layouts) it is different - it is impossible to cover all the possible cases of nesting with a tool, unfortunately.

The GRID (Layouts) has that structure.
You can code manually and have exactly the structure you want, but that's a different thing, also in terms of time.
We try to give the best possible approximation that lets you build things quickly, those are the possibilities you have to build 100% row with nested structure inside.

A tool (in this case Layouts) gives always a set of "limited" possibilities, which are not present in a manual code where you go in and edit Code manually.

In regard to the functionality, and the time, with Layouts we provide a possibility to do this quickly and no manual code.

Unfortunately it also restricts us to certain output scaffolds.

I apologize this inconveniences, but unfortunately I can not change this in Layouts, as it is built by default that way.

That said, you could achieve exactly the structure you want by using the Child Layout rendering and adding an additional wrapper to the 2 rows using our API Filters:

apply_filters( 'ddl_render_row_start', $markup, $args  );
apply_filters( 'ddl_render_row_end', $markup, $args  );

In "args" you have all the necessary info to know with what your' dealing and in "markup" you could append the additional element you want to achieve the structure shown.
https://toolset.com/documentation/user-guides/layouts-framework-api/

Please do not hesitate to open a new thread if other issues or problems arise

Thank you for your patience.

#350772

OK. Thank you. I have got around this by moving large chunks of my code out of layouts and manually writing into views.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.