Page 1 of 1
Matching HTML and DITA stylesheets
Posted: Wed Mar 05, 2014 12:16 pm
by 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
Re: Matching HTML and DITA stylesheets
Posted: Wed Mar 05, 2014 4:01 pm
by 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
Re: Matching HTML and DITA stylesheets
Posted: Wed Mar 05, 2014 5:59 pm
by 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
Re: Matching HTML and DITA stylesheets
Posted: Wed Mar 05, 2014 6:08 pm
by 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
Re: Matching HTML and DITA stylesheets
Posted: Fri Mar 06, 2015 9:03 pm
by 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
Re: Matching HTML and DITA stylesheets
Posted: Tue Mar 10, 2015 5:31 pm
by sorin_ristache
jayaram wrote: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.