Webhelp: custom CSS on left frame

[ArtGoddess]

Hello,

I'm working in software documentation done in DITA. I'm exporting the dita map using DITA MAP WebHelp.

Currently using the args.css parameter, I am able to apply an extra css in the html files loaded in the frame of the right.

But now I want to apply this CSS also to the html file loaded in the frame of the left: the tree with links.

How can I achieve this? Thank you very much.

[sorin_ristache]

Hello,

This problem was fixed for the upcoming version (15.0) and you can test a beta 15.0 version from here.

If you want to fix it yourself in a previous version (up to 14.2) you will have to modify the XSLT stylesheet that creates the main index.html file: [Oxygen-14.2-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\createMainFiles.xsl. You will have to insert the CSS link in the index.html file by modifying the following template in this stylesheet:

Code: Select all

  <xsl:template name="create-tocWDiv-file">

Regards,
Sorin

[ArtGoddess]

Thank you Sorin,

While I'm trying to install version 15, I would like to make this work correctly in 14.x.

I have edited XSL file and created an extra CSS. Everything works fine.

My concern now is that this CSS file is placed in the same folder as the other CSS, inside the oxygen installation folder.

frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/css/

I have also modified the icons.png in the Img/ folder.

How can I place this two files inside my dita folder and then copied to the webhelp export folder? I don't want them to be in the application folder, as they can be lost, or replaced in future updates.

Thank you very much.

[sorin_ristache]

How can I place this two files inside my dita folder and then copied to the webhelp export folder? I don't want them to be in the application folder, as they can be lost, or replaced in future updates.

By setting the args.copycss parameter to value yes in the DITA transformation.


Regards,
Sorin

[ArtGoddess]

Thank you for your answer.

So then, I can have a folder, inside my DITA folder, with several CSS files, and in args.csspath setting, I can select the folder, right?

What about images? Where do I store them, and how can I get them copied in the same manner as CSS files?

Thank you very much.

[sorin_ristache]

Hello,

You don't have to set the args.csspath parameter. You just set a relative path in the args.css parameter, for example resources/css/my.css, and also set the args.copycss parameters to yes.

If the image files are located in the directory of the DITA map or a subdirectory of that directory then they will be copied automatically in the output directory of the DITA WebHelp transformation (what you call exporting the DITA map using DITA MAP WebHelp). You don't have to set a parameter for that, just make sure the image files are not outside the map directory.


Regards,
Sorin

[ArtGoddess]

Thank you,

I have a folder inside my DITA documentation, called "resources".

Inside I have four folders:


resources

-- css
|--- my_webhelp_toc.css (for left frame)
|--- mydocs.css (for right frame)

-- fonts
|--- several .svg, .eot. ttf and .woff files (css fonts called from both css files)

-- img
|--- several png files, used in both css files

-- html
|--- body_header.html
|--- head_content.html
|--- body_footer.html

Current settings:

args.copycss
yes

args.css
documentation/nxweb_user_guide/resources/css/mydocs.css

args.csspath
/Users/me/git/documentation/my_user_guide/resources/css/

args.ftr
/Users/me/git/documentation/my_user_guide/resources/html/body_footer.html

args.hdf
/Users/me/git/documentation/my_user_guide/resources/html/head_content.html

args.hdr
/Users/me/git/documentation/my_user_guide/resources/html/body_header.html

Using Oxygen Editor 14.

The problem is that only mydocs.css is copied. The rest of files are no copied. I am not able to point from CSS files to the images and font files. HTML files are working fine.

I kindly ask you to pint me in the right direction. This is driving me crazy.

Thank you very much.

[sorin_ristache]

Hello,

As I said before, in version 15 (which you can test in the Oxygen 15.0 beta kit) you can use only one CSS for both the left frame and the right one so you won't have this problem because you set one CSS file in the args.css parameter and that file is copied automatically to the output directory. In version 14.2 the second CSS file (my_webhelp_toc.css) is not copied automatically to the output directory. You will have to edit the build.xml file that runs the DITA transformation and add an instruction for copying the CSS file. For copying the CSS from the args.css parameter to the output directory the Oxygen Webhelp plugin calls the ANT target called copy-css which is defined in the build file [Oxygen-14-install-dir]\frameworks\dita\DITA-OT\plugins\org.dita.xhtml\build_dita2xhtml.xml. You can modify this ANT target for copying also the other CSS files from the directory ${basedir} (where the input DITA map is located) and all subdirectories of this directory to the directory ${dita.output.dir} (the output directory of the Webhelp transformation).

For copying the image and font files from the DITA map directory (that is, the ANT variable called ${basedir} in the Oxygen Webhelp transformation) and all subdirectories to the output directory (the ANT variable called ${dita.output.dir} ) I suggest adding them to the DITA map as resources (using the processing-role="resource-only" attribute) and adding all their extensions (.eot, .ttf, .woff, etc) in the file [Oxygen-14-install-dir]\frameworks\dita\DITA-OT\lib\org.dita.dost.platform\plugin.properties. This is necessary because these file extensions are not standard resource files. An alternative would be modifying the ANT target called copy-image which is defined in the file [Oxygen-14-install-dir]\frameworks\dita\DITA-OT\plugins\org.dita.base\build_preprocess.xml.


Regards,
Sorin

[ArtGoddess]

Thank you Sorin,

Now I'm using 15 beta, and the issue with the CSS file is solved.

For copying the image and font files from the DITA map directory (that is, the ANT variable called ${basedir} in the Oxygen Webhelp transformation) and all subdirectories to the output directory (the ANT variable called ${dita.output.dir} ) I suggest adding them to the DITA map as resources (using the processing-role="resource-only" attribute) and adding all their extensions (.eot, .ttf, .woff, etc) in the file [Oxygen-14-install-dir]\frameworks\dita\DITA-OT\lib\org.dita.dost.platform\plugin.properties. This is necessary because these file extensions are not standard resource files. An alternative would be modifying the ANT target called copy-image which is defined in the file [Oxygen-14-install-dir]\frameworks\dita\DITA-OT\plugins\org.dita.base\build_preprocess.xml.

Regarding copying images and fonts to ouput directory, it is really a mess to add file by file as resources in Dita Map. Is there any way to add a folder and all its contents?

If not, is possible to group all resources into another one inside dita map?

Also I have made a screenshot of the window: http://img46.imageshack.us/img46/9842/mapresource.gif

Is topicset the best value for element? Am I doing it right? Thank you!

[sorin_ristache]

Hello,

A solution that handles your resource files in the same way as the Oxygen Webhelp resource files is to add your resources directory as a subdirectory of [Oxygen-15.0-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp and modify the ANT task called "copy-webhelp-resources" from file [Oxygen-15.0-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\build_common.xml for copying your subdirectory to the output directory too.

Other option is keep your resources directory where you have it now and modify the same task (the ANT task called "copy-webhelp-resources" from file [Oxygen-15.0-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\build_common.xml) to copy the resources from their current location to the output directory of the Oxygen Webhelp transformation, by following the existing model from the "copy-webhelp-resources" task.


Regards,
Sorin