Matching HTML and DITA stylesheets

[Oda]

Hi,

I imported a remote stylesheet of the existing website of my company. As I want to migrate to DITA, how do I tell Oxygen to match the existing stylesheet with DITA stylesheet elements so the output has the exact same look and feel as the existing one?

Thanks

[sorin_ristache]

Hi,

I understand that you want to have in the output of the DITA XHTML transformation (or other XHTML related DITA transformation, like Webhelp) the same look/style as on the website of the company. If the style of the company website is set with a CSS stylesheet (or maybe more than one CSS stylesheets, which can be combined into one CSS by importing all of them in one global CSS) then you just have to set that CSS file as the value of the args.css parameter of the DITA transformation in the dialog box for editing DITA transformations. The CSS styles will be applied to the XHTML elements of the DITA XHTML transformation output in the same way as to the XHTML pages of the company website.

If you need other type of customization of a built-in DITA transformation or if I did not understand your request please provide more details.


Regards,
Sorin

[Oda]

Thanks for your answer. Here is a more detailed question:

For example, for a paragraph:
<p>My paragraph</p>

We are perfectly able to ask a CSS to display paragraphs with the desired font and size, but how do we ask Oxygen to produce an XHTML tag such as:

<div class="paragraph">
<p>My paragraph</p>
</div>


Another example: we want to define a specific link. In our DITA file, we have:
<xref href="https://cloud.genymotion.com/page/support/" format="html" scope="external">support page</xref>

How do we ask DITA-->XHTML scenarios to specifically produce a structure different to the basic <a href/>, as shown below, for example?

<a href="https://cloud.genymotion.com/page/support/" target="_blank">
<button class="btn">
Support page
</button>
</a>

Thanks for your help

[sorin_ristache]

For these modifications you need to customize the XSLT stylesheets that create the XHTML output pages, which are located in directory:

Code: Select all

[Oxygen-install-dir]\frameworks\dita\DITA-OT\xsl

You should start from file dita2xhtml.xsl in this directory. You just have to locate the XSLT code fragment in the dita2xhtml.xsl stylesheet (or one of the imported XSLT files) that creates every element that you want to customize (the <p> element, the <a> element, etc) and modify that XSLT code.


Regards,
Sorin

[jayaram]

Hi,

I have a situation where I think I need to do this but could you please tell me how to do this modification so that I have the option to choose which XSLT custom code is called for an element in the transformation configuration?

Thanks,
Jayaram

[sorin_ristache]

I have a situation where I think I need to do this but could you please tell me how to do this modification so that I have the option to choose which XSLT custom code is called for an element in the transformation configuration?

Please tell us what Oxygen version number you use and what DITA transformation you want to customize. Also give an example of the output elements in the current format (as they are generated in the output pages of the DITA transformation) and of the expected modified elements that you want to have in the output pages.