Question 2 of 4: Controlling the divs generated by a Fixed Area Layout

Hello! I'm very new to TeamSite and need some guidance on the best way to implement some things.

If you have reviewed my other questions, this section is the same:

<about>

Background: A vendor has designed HTML for a new site and we need to manage the pages in TeamSite. We have componentized the common aspects of the pages. The vendor developed the pages without consideration for requirements/restrictions of TS. Being a responsive design, we want to match the HTML provided by the vendor as closely as possible. This way, if the design doesn't work, we can push back to the vendor and request they fix it.

Products/Versions/Current Methodology: We are using TeamSite 7.4.1 with SitePublisher. No customizations have been made to the installation. The pages are currently based on custom fixed area layouts used in a template with various components which are then used to create pages using the same general format (c-clamp etc). NOTE: The pages are typical static marketing type pages and are therefore "invariant" with respect to each request, so we are deploying the HTML generated and NOT using the LSDS.

My background: I am an application architecture and have many years of experience. I know countless languages such as Java as well as technologies like XSL, XML, javascript etc. However, often I know only enough to be dangerous and not enough to say I'm an expert.

</about>

Consider reviewing the other questions posted in separate messages in case they would change your recommendation. They will concern controlling the excess divs generated by a fixed layout, controlling structure of the URL namespace when generating the HTML via the PLC and (somewhat unrelated) can a single server also serve as a development environment separate from the current installation so changes suggested for these questions be tested without affecting the current installation.

Question 2

When using a custom fixed layout, several excess divs are generated. These divs aren't adding value and in some situations are causing problems with the responsive design.

How can these divs be controlled or suppressed?

Here is an example:

The FAL definition looks like this:

<?xml version="1.0" encoding="utf-8"?>
<Canvas inline-css="false" css-class="leftCol noHero" width="100%">
<Name>Template E Fixed Layout</Name>
<Row Id="row-1" css-class="skipMenu">
<Area Id="row-1-area-1" width="100%">
<Name>Mobile Skip Menu</Name>
</Area>
</Row>
<Row Id="row-2" html-id="outerWrap" css-class="container">
<Column html-id="innerWrap" css-class="innerWrapper">
<Row width="100%">
<Area Id="row-2-area-1" width="100%">
<Name>Header</Name>
</Area>
</Row>
<Row>
<Area Id="row-3-area-1" width="100%">
            <Name>Navigation</Name>
         </Area>
      </Row>
      <Row css-class="mainContainer group">
         <Column Id="nest-col-1">
            <Row html-id="breadcrumbsCtr" css-class="group">
               <Area Id="row-4-area-1">
                  <Name>Breadcrumbs & CTAs</Name>
               </Area>
            </Row>
            <Row>
               <Area Id="row-5-area-1">
                  <Name>Mobile Navigation</Name>
               </Area>
            </Row>
            <Row>
               <Area Id="row-6-area-1">
                  <Name>Left Navigation</Name>
                 </Area>
                <Column Id="nest-col-3">
                  <Row Id="nest-col-3-row-1">
                     <Area Id="nest-col-1-row-1-area-1">
                        <Name>Body</Name>
                     </Area>
                  </Row>
               </Column>
            </Row>
         </Column>
      </Row>
      <Row Id="row-7">
         <Area Id="row-7-area-1" width="100%">
            <Name>Footer</Name>
         </Area>
      </Row>
   </Column>
</Row>
<Row Id="row-8" width="100%">
   <Area Id="row-8-area-1" width="100%">
       <Name>Initialization</Name>
    </Area>
</Row>
</Canvas>

If the solution is either a custom page type or an "external" (which the docs lead me to believe are how this is done), could you provide short step-by-step directions (go the this file, add this section go to that file do such and such) and any example "snippets" or complete demos would be greatly appreciated...

Thanks in advance. Some here recently helped me with a problem in the generated the HTML (the stuck in preview mode bug) and would really appreicate your suggestions on these problems.

Find more posts tagged with

Comments

Garth McMillan

You can edit the fixed-layout.page.xsl and customise it as needed. You'll see all the additional divs you've specified in there.

There are a lot of posts about editing the fixed layout page XSL for more information. Do a search for "fixed layout page XSL" and you should find lots of useful information.

NOTE: If you do end up deciding to use LSDS, you need to edit the file on the LiveSite server as well as the TeamSite server.

Rick Poulin

I have found that for the most part, I could "fix" the responsive design by overriding certain CSS classes produced by iwov. Also, try not to set anything with widths in your layout definition -- let your CSS handle all that.

But yeah, Zaarin's solution is the way to go if it still interferes too much. Just rememeber you only get one of these for the whole runtime, so keep that in mind if you're going to have other sites with different front-end implementations.

nipper

I have done a few responsive sites in LSDS. In those cases I generated some blanks pages with the required page layout, and gave that HTML to the team writing the responsive code. It seems to work pretty well and I do nto have to change the fixed page layout

Bowker

We have a few responsive sites built with LSDS. Our initial attempts were, as you found, rather challenging with all the extra DIVs generated.

Ultimately we updated the Fixed Layout xsl (remember, there can be only one) to accomodate our dual environment by calling different templates within the one xsl based upon the page-type selected.

You can see the effect at these sites

www.northerntrustopen.com - responsive site

125.northerntrust.com - responsive site

www.northerntrust.com - non-responsive site

Dan Bowker

TS 7.2.1 (migrating to 7.4.1 shortly)

vima

Dan,

I am trying to implement the same. Please if you could share your Fixed Layout xsl.

Thanks!

Bowker

Sorry - Asking to share the complete XSL for this is asking too much.

You will need to update the main fixed-layout xsl for your whole environment. We have created a new one and have it here:

Interwoven\TeamSite\local\config\lib\content_center\livesite_customer_src\etc\classes\com\ntrs\xsl\runtime\custom-fixed-layout.page.xsl

Unfortunately I don't remember where we told TS/LiveSite to use the custome-fixed-layout.page.xsl instead of the OOTB one. Maybe someone knows and can respond.

Good luck and sorry I can't be of more help.

Rick Poulin

bowker wrote:
Unfortunately I don't remember where we told TS/LiveSite to use the custome-fixed-layout.page.xsl instead of the OOTB one. Maybe someone knows and can respond.

pagetype-config.xml

WGM

People here have helped me a lot so I'll try to contribute back.

I'm not saying this is the perfect solution but it is working for us and it will at least give you some pointers on where to start even if you don't like our solution.

Create/make:

TS-HOME/local/config/lib/content_center/livesite_customer_src/etc/conf/livesite_customer/pagetype-config.xml

look something like this (Note: replace acmeco with your company abbreviation):

<layout-config>
  <page-types>
    <page-type id="responsive-html5">
      <name>Responsive HTML 5 - Fixed Layout</name>
      <output>
        <doctype>
          <document-root>html</document-root>
          <doctype-public/>
          <doctype-system/>
        </doctype>
        <method>html</method>
        <content-type>text/html</content-type>
        <omit-xml-declaration>true</omit-xml-declaration>
      </output>
      <allowed-layouts>
        <layout refid="fixed-layout"/>
      </allowed-layouts>
    </page-type>
  </page-types>
  <layouts>
    <layout id="fixed-layout">
      <name>Responsive Fixed</name>
      <stylesheet>com/acmeco/xsl/fixed-layout.page.xsl</stylesheet>
      <class>com.interwoven.livesite.layout.impl.FixedLayout</class>
    </layout>
  </layouts>
</layout-config>

Then create a file called fixed-layout.page.xsl in:

TS-HOME/TeamSite/local/config/lib/content_center/livesite_customer_src/etc/classes/com/acmeco/xsl

Place this in the new fixed-layout.page.xsl -

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
  <xsl:import href="http://www.interwoven.com/livesite/xsl/runtime/fixed-layout.page.xsl"/>
  <!--
    CUSTOMIZED FIXED PAGE LAYOUT
  -->

  <xsl:template match="/">
    <xsl:apply-templates select="/Page/Page_Display_Properties" />
  </xsl:template>

  <xsl:template match="Page_Display_Properties">
    <xsl:choose>
      <xsl:when test="/Page/Page_Display_Properties/PageType/Id/text()='responsive-html5'">
        <xsl:apply-templates select="." mode="responsive-html5"" />
      </xsl:when>
      <xsltherwise>
        <xsl:apply-imports />
      </xsltherwise>
    </xsl:choose>
  </xsl:template>

  <xsl:template match="Page_Display_Properties" mode="responsive-html5">
     <!--
         Custom template goes here
     -->
  </xsl:template>

  <xsl:template match="div">
    <xsl:choose>
      <xsl:when test="starts-with(@id,'ls-suppress')">
        <xsl:apply-templates select="child::*"/>
      </xsl:when>
      <xsl:when test="@class = 'ls-fxr'">
        <xsl:apply-templates select="child::*"/>
      </xsl:when>
      <xsl:when test="@class = 'ls-area-body'">
        <xsl:apply-templates select="child::*"/>
      </xsl:when>
      <xsl:when test="@class = 'ls-row-clr'">
        <xsl:apply-templates select="child::*"/>
      </xsl:when>
      <xsl:when test="@class = 'ls-col-body'">
        <xsl:apply-templates select="child::*"/>
      </xsl:when>
      <xsl:when test="@class = 'ls-cmp-wrap' or @class = 'ls-cmp-wrap ls-1st'">
        <xsl:apply-templates select="child::*"/>
      </xsl:when>
      <xsltherwise>
        <div>
          <xsl:apply-templates select="@class | @id | entity | div | container"/>
        </div>
      </xsltherwise>
    </xsl:choose>
  </xsl:template>

  <xsl:template match="container">
    <xsl:variable name="ComponentID" select="ContainerProperties/@ComponentID"/&gt;
    <xsl:value-of disable-output-escaping="yes"
        select="/Page/ComponentData/Component[@ID = $ComponentID]"/>
  </xsl:template>

</xsl:stylesheet>

In the "custom template goes here" section above, replace the comment with the contents of the

  <xsl:template match="Page_Display_Properties">

node from:

IW_HOME/ApplicationContainer/server/default/deploy/iw-cc.war/WEB-INF/classes/com/interwoven/xsl/runtime/fixed-layout.page.xsl

(however, see note at end)

Now you have cordoned-off a fixed layout just for your new page type using a sort of poor man's inheritance in XSLT. The XSLT process will "fallback" to the templates imported from

IW_HOME/ApplicationContainer/server/default/deploy/iw-cc.war/WEB-INF/classes/com/interwoven/xsl/runtime/fixed-layout.page.xsl

if there isn't a matching XSLT template in your file.

Under the body tag in

TS-HOME/TeamSite/local/config/lib/content_center/livesite_customer_src/etc/classes/com/acmeco/xsl/fixed-layout.page.xsl

    <xsl:element name="body">

you can move the canvas' div's class up to the body (this is important because the first div that represents the canvas will be removed), so add:

      <xsl:if test="/Page/Layout/div[@fx_type = 'canvas']/@class != ''">
        <xsl:attribute name="class">
          <xsl:value-of select="/Page/Layout/div[@fx_type = 'canvas']/@class"/&gt;
        </xsl:attribute>
      </xsl:if>

and to control the other divs generated, after:

      <xsl:text>$PAGE_SCOPE[body_injection_top]</xsl:text>

remove:

        <xsl:apply-templates select="/Page/Layout"/>

add:

      <xsl:apply-templates select="/Page/Layout/div[@fx_type = 'canvas']/*"/>

This effectively hijacks the part of the rendering process that outputs all the extra divs. In the

  <xsl:template match="div">

in the XLST at the top of this message, you can see some rules that cause the extraneous divs that you CAN'T control in the fixed layout file to be just omited.

Additionally, a conditional test checks to see of the id of the rows, columns and areas in the fixed layout start with:

ls-suppress

and if it does, it omits the div generation. So you can use specially named ids to omit the div that would otherwise be generated if it is interfering with your design:

<Canvas inline-css="false" css-class="home" width="100%">
    <Name>Template A Fixed Layout</Name>
    <Row html-id="skipMenu">
        <Area Id="row-1-area-1" html-id="ls-suppress-row-1-area-1" width="100%">
            <Name>Mobile Skip Menu</Name>
        </Area>
    </Row>

Also, there is a modified component XSLT template so remove the div wrapping components.

Obviously, this is drastically altering the structure of what is generated so things may break.

See Advanced Configurations and Custom Types in the Site Developers guide regarding most of the above. Use the build.bat or build.sh in

IW-HOME/TeamSite/local/config/lib/content_center/livesite_customer_src

to build your changes into the application container.

It has been some time since I did this and I'm not sure that I noted all the changes to the template you copy from

IW_HOME/ApplicationContainer/server/default/deploy/iw-cc.war/WEB-INF/classes/com/interwoven/xsl/runtime/fixed-layout.page.xsl

so you may need to play around with it to get it working.

Also note that we don't use the LSDS and instead just deploy generated HTML so you may need additional steps to deploy this if you are using the display runtime.

Oh and if you are doing responsive, you will probably need some special meta tags and comments at the top of your HTML that are difficult to add in the SitePulisher UI pattern.

You can just stick them at the top of your custom type:

  <xsl:template match="Page_Display_Properties" mode="responsive-html5">
    <xsl:text disable-output-escaping="yes"><![CDATA[<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
]]></xsl:text>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta charset="utf-8"/>

Finally, there seems to be two different fixed-layout.page.xsl in our installation:

IW-HOME/ApplicationContainer/server/default/deploy/iw-cc.war/WEB-INF/classes/com/interwoven/xsl/runtime/fixed-layout.page.xsl

IW_HOME/LiveSiteDisplayServices/runtime/web/WEB-INF/classes/com/interwoven/xsl/runtime/fixed-layout.page.xsl

I believe I started with the iw-cc.war version as we don't use LSDS. However, you need to determine which one is appropriate for your use.

OK, too much time spent on this, need to get back to the grind.

Hope this helps....