Forum Discussion

peterlu's avatar
peterlu
Champion
10 years ago

Lithium html markup change

Hi Lithium Dev,   We have noticed that recently your team has been updating a lot of HTML at the layout level. And it breaks 90% of my customers community. Please be careful of doing so, coz these...
  • DougS's avatar
    DougS
    10 years ago

    Hi Peter,

     

    I spoke with the development team that made this change and they are going to change the markup so the new div tag they added gets moved inside of the top div.lia-quilt for the page so the selector you pointed out will continue to work.  We also think that as a general rule, we shouldn't be adding html around that top-most div.lia-quilt.  

     

    However, we do need the ability to add new markup to the page in order to add new features and functionality to the community.  We won't (intentionally) remove elements, change class names, or change the order that class names should come in css selectors, but we sometimes need to wrap pre-existing tags in other tags, so selectors that use the child combinator selector (div.lia-content > div.lia-quilt) are dangerous to use because they may stop working when we place additional markup around already-existing markup on a page.

     

    -Doug

OlivierS's avatar
OlivierS
Lithium Alumni (Retired)

peterlu 

 

Sorry to hear that Peter.

Lithium platform upgrades are meant to be transparent to the end users and designed to not break custom development.

Release Notes are published long before upgrading customers, but might lack of technical details - I agree.

Stage environment are usually deployed before the production ones, which lets you a few days to check everything works well. And contact Lithium support if needed.

 

Now, could you please let us know about the changes made that impacted your communities header / footer?

 

 

peterlu's avatar
peterlu
Champion
10 years ago

On the edit message page, originally Lithium have 

div.lia-content > div.lia-quilt

 

In the new version, Lithium added in 

div.lia-content > div[data-message-id="3215"] > div.lia-quilt

 

If our customers css are like 

#lia-body .lia-content > .lia-quilt > blablabla

then it is gonna break.

 

My question is why don't add the data-message-id into div.lia-quilt? This way no html layout is changed.

  • DougS's avatar
    DougS
    Khoros Oracle
    10 years ago

    Hi Peter,

     

    I spoke with the development team that made this change and they are going to change the markup so the new div tag they added gets moved inside of the top div.lia-quilt for the page so the selector you pointed out will continue to work.  We also think that as a general rule, we shouldn't be adding html around that top-most div.lia-quilt.  

     

    However, we do need the ability to add new markup to the page in order to add new features and functionality to the community.  We won't (intentionally) remove elements, change class names, or change the order that class names should come in css selectors, but we sometimes need to wrap pre-existing tags in other tags, so selectors that use the child combinator selector (div.lia-content > div.lia-quilt) are dangerous to use because they may stop working when we place additional markup around already-existing markup on a page.

     

    -Doug

    • peterlu's avatar
      peterlu
      Champion
      10 years ago

      Hi Doug,

       

      There is a big reason we use > in .lia-content > .lia-quilt.

      We have found that this .lia-quilt class is not unique and it exists in component level. That is the main reason to use >

       

      I agree that Lithium can update their HTML. But for top level HTML, Lithium needs to be very careful, because those HTML are always used for layout CSS purpose. And in the component level HTML, there wouldn't be too much a problem.

       

      If you need something for JAVAscript hooks, you should only add attributes to the current HTML instead of adding HTML wrapper to the current HTML, simply because HTML is very connected to the quilt structure and your tutorial and TKB articles explain that quilt strucuture in HTML terms. So if you are going to update the layout HTML, you are going to update all your tutorials and articles :)

       

      I am just throwing my 2 cents and hope it can reduce the emails to your support team :)

       

      And big thanks to push the change for me.

       

      BTW, ANOTHER BIG SUGGESTION for future projects:

      At the top level quilt, is it possible for get Lithium DEV to add a special class for the top level quilt? eg. .lia-quilt-master or something else.

      Because we are using that top quilt class a lot, and lithium quilt is like quilt nested in a quilt nested in another quilt. So that we can just use that .lia-quilt-master instead of using > in css

       

      Peter

      • DougS's avatar
        DougS
        Khoros Oracle
        10 years ago

        Hi Peter,

         

        That makes total sense.  We really do need to fix that top quilt element for pages so it has a unique CSS class you can use.  I have filed a ticket to have this added and checked in a change to add a css class named "lia-top-quilt" to the outer-most quilt on the page.  This will be available in 14.11.

         

        Thanks,

         

        -Doug