Adding Custom HTML to Responsive Webhelp Index Page

dgallo
Posts: 80

Adding Custom HTML to Responsive Webhelp Index Page

Mon Dec 04, 2017 5:46 pm

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
Posts: 265

Re: Adding Custom HTML to Responsive Webhelp Index Page

Tue Dec 05, 2017 1:29 pm

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
Costin Sandoi
oXygen XML Editor and Author Support

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest