Add a <div> in each DITA topic

[catherine]

Hi, I wonder if I can add a customized <div> in each DITA topic?
After I generate the webhelp, and view each topic, I can see the added div.

Is that possible?

[Costin]

Hi Catherine,

As it is not clear what you mean by "customized <div>", could you please elaborate what exactly you need to achieve?

The DITA 1.3 language makes it possible to use <div> elements to organize content.

If you create a <div> element somewhere in the iris.dita topic from the flowers.ditamap sample - flowers sample DITA Map in the oXygen sample project - and set a specific ID on it as an attribute (eg: <div id="divID">), it should be reflected in the output.
In order to better notice the div, you could add some custom styling through a custom CSS. You can test this by creating a custom.css stylesheet with some style customization on the specific div element.
To find the specific selector, you could investigate your topic in the WebHelp output (you can use the CSS Inspector from your internet browser to help you with that - see instructions in our User-Guide).
In the specific example I provided, in your custom .css file you could use a rule like:

Code: Select all

#iris__divId{

    color:red;

}

to better notice the div element.
In a similar fashion you could use div elements for your own DITA topics.

Regards,
Costin

[catherine]

Hi, Costin
Thanks for your reply!
I am trying to figure out how to add a div that contains a feedback button on each article/topic.

I want to add a feedback button at the end of each topic page.
Is there any way, that I can edit the webhelp template or DITA XSLT to achieve this?

[ionela]

Hi,

You can achieve this by adding a custom HTML content to the WebHelp Responsive output. For more details, please check this topic from our user manual:
https://www.oxygenxml.com/doc/versions/ ... -html.html

Also, in case you need the feedback system, you can check our DITAMap Webhelp Responsive with FeedBack transformation scenario. An example of this type of output is our user guide.

Regards,
Ionela