Page 1 of 1

DITA WebHelp output - customizing header and others

Posted: Fri Apr 19, 2013 8:03 am
by Vikash
Hi,

Could you please guide me to customize the following:
1. The map title appears at 3 places in the output. How do I handle the content for these 3 areas differently. I do not want the map tilte at all three palces.
* Title bar of the help window
* Main header of the help
* In TOC, just above the first book
2. How do I change the location of print and frame options in the header?
3. I can see only "Parent topic" option in the final oputput. The "Previous topic" and "Next topic" Options never appear on navigating through the TOC?
4.Even if I set the parameter "args.breadcrumbs" to "yes". Breadcrumbs is not publishing. Please suggest.

Thanks,

Vikash

Re: DITA WebHelp output - customizing header and others

Posted: Fri Apr 19, 2013 3:52 pm
by sorin_ristache
Hello,

Vikash wrote:Could you please guide me to customize the following:
1. The map title appears at 3 places in the output. How do I handle the content for these 3 areas differently. I do not want the map tilte at all three palces.
* Title bar of the help window
* Main header of the help
* In TOC, just above the first book


The title of the DITA map is displayed in the Webhelp output using the XSLT variable title in the stylesheet [Oxygen-14.2-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\createMainFiles.xsl. Just look for this variable called title in this stylesheet and change the place where you want to display the title.

Vikash wrote:2. How do I change the location of print and frame options in the header?


You have to customize the stylesheet [Oxygen-14.2-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\dita2webhelpImpl.xsl for that. The print and frame buttons are div elements: one div element with the id="printlink" attribute and another div element with the id="permalink" attribute.

Vikash wrote:3. I can see only "Parent topic" option in the final oputput. The "Previous topic" and "Next topic" Options never appear on navigating through the TOC?


The Previous topic and Next topic links appear in a topic only if that topic is included in the DITA map using a topicref element that has a parent element that has an attribute collection-type="sequence".

Vikash wrote:4.Even if I set the parameter "args.breadcrumbs" to "yes". Breadcrumbs is not publishing. Please suggest.


The Previous, Next and Parent links are added in each topic that is included in the DITA map with a topicref element that has a parent element with the attribute collection-type="sequence". It does not depend on the value of the parameter args.breadcrumbs. This parameter never worked in DITA-OT transformations.


Regards,
Sorin

Re: DITA WebHelp output - customizing header and others

Posted: Fri Apr 19, 2013 9:50 pm
by Vikash
Hi Sorin,

Thank you so much for the quick response. This is really really helpful :idea:
Need a few more clarifications on Webhelp customization. Could you please suggest:
For query 1:
I am not able to alter the title in the TOC, just above the first book. It shows the map title. I am not sure how it is handled in the xsl stylesheet. Please suggest.
I could change the title as required at the other two places.

For query 2: I need to dig down some more.

For query 3 and 4: Works fine as suggested.

A few more queries:

Query 5:
Does the WebHelp output support DHTML effects? Where should I check to implement the expanding text feature?

Query 6:
I am able to include logo in the header as suggested by you in some other post.

Code: Select all

h1:before {
    display:inline;
    content:url('../img/myLogoImage.gif');
}

But, I am not able to control the logo size through CSS. Please suggest.


Regards,

Vikash

Re: DITA WebHelp output - customizing header and others

Posted: Sun Apr 21, 2013 8:08 pm
by Vikash
Hi Sorin,

In addition to the previous queries on customization, could you please suggest to handle the following customizations as well:
Query 7:
I am not able to control the font style and font size in the output. I tried changing the values in webhelp_topic.css @ $Oxygen XML Editor 14\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css
[code]body {
background-color:white;
margin:0px; padding:0 0 0 0.9em;
font-family: arial, helvetica, sans-serif;
line-height:18px;
font-size:12px;[
}/code]

Please suggest.

Query 8:
I tried adding the table formatting styles to the commonltr.css and webhelp_topic.css one by one. But, it did not work. Also tried overrriding the same via an external css :roll:
How do I hand simple table formatting (table header, indent..)?

Query 9:
On the master topic i.e topic linked to a book, how do I change the list style from ordered list (ol) to unordered list (ul)? Can I add some custom text (description) on the page?

Query 10: How do I update Related topic section that appears on every topic? I need to add bullet style to the list of related links.

Looking forward to your reply.

Thanks,

Vikash

Re: DITA WebHelp output - customizing header and others

Posted: Tue Apr 23, 2013 12:42 pm
by sorin_ristache
Vikash wrote:For query 1:
I am not able to alter the title in the TOC, just above the first book. It shows the map title. I am not sure how it is handled in the xsl stylesheet. Please suggest.
I could change the title as required at the other two places.


You need XSLT skills for that. For example you can remove that title just above the Content tree by adding the following template in [Oxygen-14.2-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\createMainFiles.xsl:

Code: Select all

<xsl:template match="text()" mode="create-toc"/>


Vikash wrote:Query 5:
Does the WebHelp output support DHTML effects? Where should I check to implement the expanding text feature?


You can insert the DHTML code in the WebHelp output just as in any other XHTML page. You have to modify the XSLT stylesheets which I mentioned above, in directory [Oxygen-14.2-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl. It is a problem of the DHTML support in the browser that runs the WebHelp. Please check the browser where you want to run the WebHelp output.

Vikash wrote:Query 6:
I am able to include logo in the header as suggested by you in some other post.

Code: Select all

h1:before {
    display:inline;
    content:url('../img/myLogoImage.gif');
}

But, I am not able to control the logo size through CSS. Please suggest.


If you want a larger image I suggest using an image file myLogoImage.gif that contains the larger image size. I think changing the image size in CSS would not work in all browsers. Anyway you should check also a CSS tutorial.


Regards,
Sorin

Re: DITA WebHelp output - customizing header and others

Posted: Tue Apr 23, 2013 1:24 pm
by sorin_ristache
Vikash wrote:Query 7:
I am not able to control the font style and font size in the output. I tried changing the values in webhelp_topic.css @ $Oxygen XML Editor 14\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css

Code: Select all

body {
  background-color:white;
  margin:0px; padding:0 0 0 0.9em;
  font-family: arial, helvetica, sans-serif;
  line-height:18px;
  font-size:12px;[
}


The font style and family can be changed in the code above which you quoted for the body element. If you want to set the font style and family only for some specific element you have to modify (or add) the code only for that element.

As you can see in webhelp_topic.css the font size is set in many places, for example the code for the elements body, h1, div, table, ul, etc. You should set the font size in the code for the element which you want to change, for example in the code for the div elements:

Code: Select all

div {
    font-size:14pt;
}



Vikash wrote:Query 8:
I tried adding the table formatting styles to the commonltr.css and webhelp_topic.css one by one. But, it did not work. Also tried overrriding the same via an external css :roll:
How do I hand simple table formatting (table header, indent..)?


What is the code that you added and what is the effect that you need in the XHTML page?


Vikash wrote:Query 9:
On the master topic i.e topic linked to a book, how do I change the list style from ordered list (ol) to unordered list (ul)? Can I add some custom text (description) on the page?


You will probably need to modify some XSLT stylesheets from Oxygen-14.2-install-dir\frameworks\dita\DITA-OT\xsl but I need more details for understanding what you try to do. Can you give an example of DITA XML source for that? Do you want to change the list with the links to the child topics? How is the list represented in the XML source?

Vikash wrote:Query 10: How do I update Related topic section that appears on every topic? I need to add bullet style to the list of related links.


Do you mean to change change the style of each list item, that is add a bullet marker in front of each list item? You just set a CSS style in the webhelp_topic.css stylesheet for the element a with the attribute class="navheader_parent_path", the a element has a div parent. It is just a CSS issue, maybe you should study a CSS tutorial from here or here.


Regards,
Sorin

Re: DITA WebHelp output - customizing header and others

Posted: Sun May 05, 2013 7:49 pm
by Vikash
Hi Sorin,

Thanks a lot.
I am able to implement most of customizations that I wanted.

Regards,

Vikash