Adding Custom HTML to Responsive Webhelp Index Page

[dgallo]

I am using the webhelp.fragment.after.toc_or_tiles parameter to insert custom html into my responsive webhelp's homepage. I have tried to reference .htm, .xml., and .xhtml files and nothing seems to work. The filepath appears in the output, rather than the html. The only time it works is when I copy the actual html and paste it into the parameter.

Here is my html:

Code: Select all

<div class="row">

        <h2>Help & Documentation</h2>

        <div class="col">

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

        </div>

    </div>

    <div class="row">

        <h2>Modeling</h2>

        <div class="col">

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

        </div>

        <h2>Solve</h2>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

        </div>

        <h2>Design</h2>

        <div class="col">

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

            <div class="tile">

                <img src="###"/>

                <h3>Product</h3>

                <p>Descriptio</p>

            </div>

        </div>

    </div>

[Costin]

Hi,

I looked over the snippet you provided and the issue seems to be due to the fact that the fragment you are using is not well-formed.
As per the parameters documentation in our User-Guide, for both "webhelp.fragment.before.toc_or_tiles" and "webhelp.fragment.before.toc_or_tiles", the value should be an XHTML fragment or a path to a file that contains the XHTML fragment that must be well-formed.

You can notice that the first <div/> element in your fragment closes, then it is followed by other elements (div, header, etc.).
As there is no root element in your document, it can not be parsed as a well-formed XML.
Therefore, you should first create an XHTML document in oXygen with the contents you provided in the snippet, use the "Check Well-Formedness" action (menu Document > Validate > Check Well-Formedness) to check if the document is well-formed and in case it isn't, modify your file to obtain a well-formed document. The easiest way would probably be to wrap all elements in a parent element which would be considered as root (this is also what oXygen does when you paste the contents directly - as you already did).

Regards,
Costin