Oxygen XML Forum

Posted: **Wed Jul 20, 2016 4:44 pm**

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.

Posted: **Thu Jul 21, 2016 5:01 pm**

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

Posted: **Thu Jul 21, 2016 5:41 pm**

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?

Posted: **Fri Jul 22, 2016 9:22 am**

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

Posted: **Fri Jul 22, 2016 4:32 pm**

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

Posted: **Tue Jul 26, 2016 11:55 am**

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.

Posted: **Tue Jul 26, 2016 3:20 pm**

"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

Posted: **Tue Jul 26, 2016 3:42 pm**

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.

Posted: **Thu Jul 28, 2016 12:02 pm**

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?

Posted: **Thu Jul 28, 2016 3:04 pm**

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 ?

Posted: **Thu Jul 28, 2016 3:18 pm**

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?

Posted: **Fri Jul 29, 2016 10:49 am**

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.

Posted: **Fri Jul 29, 2016 11:10 am**

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

Posted: **Sun Aug 07, 2016 4:55 pm**

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>

Posted: **Sun Aug 07, 2016 5:15 pm**

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?

Posted: **Mon Aug 08, 2016 3:00 pm**

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

Posted: **Mon Aug 08, 2016 3:40 pm**

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?

Posted: **Mon Aug 08, 2016 4:49 pm**

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

Posted: **Tue Aug 09, 2016 4:21 pm**

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

Posted: **Wed Aug 10, 2016 3:38 pm**

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

Posted: **Wed Aug 10, 2016 4:43 pm**

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

Thank you

Posted: **Sat Aug 27, 2016 12:10 am**

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?

Posted: **Mon Aug 29, 2016 11:55 am**

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

Oxygen XML Forum

overwrite existing footer

overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer

Re: overwrite existing footer