overwrite existing footer

[anne_siemens]

How can I overwrite the footer in the Webhelp Responsive Design?

"WebHelp output generated by <oXygen/> XML Author "

I tried pointing webhelp.fragment.footer to a footer.html file but it wouldn't build. When I removed the reference to the html file it builds the webhelp correctly and displays it in a browser.

There are several CSS files in the output folder. Which CSS file or which XSL needs to be copied and modified to affect the look and feel of the generated responsive webhelp?

Some of the things I'd like to change are:
- color of the tiles
- fonts - to add my company's truetype or websafe fonts

Is there an description of the numerous css files produced in the various subfolders of the out/ folder?

I'm using oXygenXML18 on Windows 7.

[bogdan_cercelaru]

Hello,

How can I overwrite the footer in the Webhelp Responsive Design?

I've tried using the Oxygen version 18.0 and the built-in DITA Map WebHelp Responsive transformation scenario. I have set the webhelp.fragment.footer parameter to point to the footer.xml file with the following content:

Code: Select all

<div>My other footer</div>

The WebHelp footer was overwritten with the content of the footer.xml file. Please make sure that the footer.xml file is wellformed.

Which CSS file or which XSL needs to be copied and modified to affect the look and feel of the generated responsive webhelp?

Depending on the template (variant/skin) that you are using for the transformation, you should edit the ${DITA_OT_DIR}/plugins/com.oxygenxml.webhelp/templates/dita/bootstrap/variants/${variant}/${skin}/skin.css file.

Regards,
Bogdan

[anne_siemens]

The WebHelp footer was overwritten with the content of the footer.xml file. Please make sure that the footer.xml file is wellformed.
Where do I find that footer.xml file?

[Radu]

Hi Anne,

You are the one who should create a custom "footer.xml" located somewhere on the harddrive and containing an HTML <div> with your custom HTML content.

Regards,
Radu

[anne_siemens]

Is there one XSL file for the entire transformation from the dita map to the responsive webhelp output? If so, where is it located?

[radu_pisoi]

Hi,

There are many XSLT stylesheets implied in the Webhelp Responsive transformation, some of them come with DITA-OT and others are specific for Webhelpl Responsive output.

I will try to enumerate the most important two XSLT stylesheets that are associated only with the Webhelp Responsive output. For DITA-OT 2.x they are:

• DITA-OT2.x\plugins\com.oxygenxml.webhelp\xsl\dita\responsive\dita2webhelp.xsl
  This stylesheeet is responsible to generate one HTML file for each DITA topic.
• DITA-OT2.x\plugins\com.oxygenxml.webhelp/xsl/dita/responsive/createMainFiles.xsl
  This stylesheet is used to generate index terms page and the main page(index.html).

Unfortunately, there is no mechanism to specify a customization stylesheet for the above stylesheets. So, if you want to customize them you can create an additional stylesheet and import it from the main stylesheets specified earlier.

[anne_siemens]

"Unfortunately, there is no mechanism to specify a customization stylesheet for the above stylesheets. So, if you want to customize them you can create an additional stylesheet and import it from the main stylesheets specified earlier."

I'm not sure what you mean: are you saying the two XSL sheets you mentioned should not be edited

[radu_pisoi]

Sorry if I was not very clear.

You are allowed to modify the XSLT stylesheets within the Webhelp plugin. But, it will be a little difficult for you to update to a new Webhelp version. Keeping the modifications in separate files will help you to separate the patches by the Webhelp files.

[anne_siemens]

I have added a footer.html and it shows on the index.html page of the webhelp responsive help but for when I click on a tile or any other html page, the footer is missing. Does it need to be copied into a specific folder for it to show for each subsequent HTML file?

[radu_pisoi]

Hi,

I cannot reporduce your problem with the next simple footer file, custom_footer.html :

Code: Select all

<div>Custom footer</div>

I've specified the path to this file as the value of the 'webhelp.fragment.footer' parameter. After I've run the transformation, I can see the custom footer in all generated HTML files.

Did you follow the same scenario? If the above explanation does not help you to resolve your problem, could you send us the 'footer.html' file to support@oxygenxml.com ?

[anne_siemens]

I notice that the text from the footer.html file that I specified in webhelp.fragment.footer works but the referenced image only appears in the index.html but not in the other html files. It looks like it can't locate the image file for the individual html files but the image is visible in the output folder at the same level as the index.html files in the out folder. Does the image have to be saved in a specific folder prior to transformation or copied into a specific folder post transformation?

[anne_siemens]

It works if I copy the image into each individual out/topic folder, which is not really ideal. It would be nice if it would reference the image from one central image folder in the set of output folders.

[bogdan_cercelaru]

Hello,

As you already noted, the problem is that the image referred in your "footer.html" file has a relative path and the browser cannot always locate it.
Depending on your needs, to solve this, you have the following options:
1. If the WebHelp is accessed only from a Web server, you could specify an absolute path to the image in your footer.html file. Assuming that your image is located in the "/image/" directory from your Web server, the value of the "src" attribute of the image should be "/image/image_name.png"
2. If the WebHelp also needs to be accessed locally (without a Web server), you have to edit the template according to the following steps:

• Copy your image in the "[DITA_OT_DIR]/plugins/com.oxygenxml.webhelp/templates/dita/bootstrap/resources/images/" directory
• Open your "footer.html" file
• Use the ${oxygen-webhelp-template-dir} macro to point to the template root directory and replace the "src" attribute of the image with something like:

  Code: Select all

  src="${oxygen-webhelp-template-dir}/resources/images/image_name.png"

Regards,
Bogdan

[anne_siemens]

I tried what you suggested and now the footer image is missing from the Webhelp. It no longer shows on the index.html or any other page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>footer</title>
</head>
<body>
<p>Brought to you by:</p>
<br/>
<p>
<img src="${oxygen-webhelp-template-dir}/resources/images/footer_logo.png" alt="image_here"></img>
</p>
</body>
</html>

[anne_siemens]

Ok, it doesn't work with the macro <img src="${oxygen-webhelp-template-dir}/resources/images/footer_logo.png" alt="image_here"></img>
but it does work if I use the full, absolute path:
<img src="C:\Program Files\Oxygen XML Editor 18\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\templates\dita\bootstrap\resources\images\footer_logo.png" alt="image_here"></img>

Any ideas why the macro to point to the template directory doesn't work for me?

[anne_siemens]

Also, it works in IE and Chrome but not in Firefox. The footer image is not displayed in Firefox.

[anne_siemens]

The footer enclosed in a black box now shows white space below the border. Unlinke the footer shown here:
https://www.oxygenxml.com/doc/versions/ ... ption.html, which resizes perfectly and does not have a white border below the black footer. Any ideas why this happens & how it can be resolved?

[bogdan_cercelaru]

Hello,

I've tested using your example for "footer.html" file and it works as expected. The macro works and the image is correctly displayed in all major browsers (IE, Chrome and Firefox).
Make sure that your "footer_logo.png" image is located in the correct DITA-OT directory.
Check which DITA-OT are you using to publish WebHelp (Options > Preferences... > DITA). If you are using DITA-OT 2.x, then your image should be in the corresponding directory (in your case: C:\Program Files\Oxygen XML Editor 18\frameworks\dita\DITA-OT2.x\plugins\com.oxygenxml.webhelp\templates\dita\bootstrap\resources\images\).

Regards,
Bogdan

[anne_siemens]

Do you mean to say that this works:
<img src="${oxygen-webhelp-template-dir}/resources/images/footer_logo.png" alt="image_here"></img>?

[bogdan_cercelaru]

Hi Anne,

I want you to check if the "${oxygen-webhelp-template-dir}" expands to the relative path of the "footer_logo.png" and the image is correctly displayed in browser after you place the "footer_logo.png" file in the correct DITA-OT directory, as instructed above.

Regards,
Bogdan

[anne_siemens]

Yes, the macro works.
Image shows in IE, Firefox & Chrome.

Thank you

[kmank]

In a related issue to this... I am working with the WebHelp Classic transform and trying to replace the footer with the webhelp.footer.file parameter. It all seems to accept it ok, but when transformed, it shows the footer only on the right half of the topic.


Any idea what is causing this?

[alin]

Hello,

By default, the content from webhelp.footer.file is placed into an HTML <div class="footer"> element which has a float:right CSS styling applied to it.
You can override the default styling by specifying a custom CSS file using the following two parameters:

• args.css - Specifies the path to the custom CSS file
• args.copycss - Specifies if the custom CSS file should be copied to the output directory. You MUST set it to yes

For example, if you want to remove the floating layout your custom CSS file should contain the following rule:

Code: Select all

div.footer {

  float:none;

}

This will display the footer component on the entire width of the topic frame with the content aligned to left. You may add other styling rules, depending on your needs.

Regards,
Alin