Customizing webhelp Mobile output

[rminaker]

Hi, I'm using Oxygen 15.1 and I'm curious as to what the 'best practice' method is for customizing the jquery webhelp mobile output?

At this point, all I want to do is replace the blue/black theme with my own custom colours. I've realized through trial and error that if I edit this particular file, I can change the fonts and almost all the colours.

C:\Program Files (x86)\Oxygen XML Editor 15\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\mobile\jquery.mobile-1.3.0\jquery.mobile-1.3.0.min.css

However, I'm sure this isn't the proper way to customize this.

Any help/guidace would be much appreciated.

Thanks,

R.

[sorin_ristache]

Hello,

First you have to create a custom jQuery Mobile theme of type "c" using jQuery ThemeRoller (because Oxygen uses the "c" theme of jQuery Mobile) with your custom colors and/or icons, save it on the jQuery Mobile site, copy the custom CSS files created by ThemeRoller, called in our example custom-theme.css and custom-theme.min.css, in the following directory for example:

Code: Select all

[Oxygen-15-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\mobile

and after that add these custom CSS files (depending on how many features you want to customize: only colors, colors + icons) in the generated Oxygen Webhelp-Mobile pages by customizing the XSLT template called "jsAndCSS" in the following XSLT file:

Code: Select all

[Oxygen-15-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\dita\mobile\common.xsl

You have to include your custom CSS files created with ThemeRoller, called here custom-theme.css and custom-theme.min.css, in the Oxygen Webhelp-Mobile pages after jquery.mobile-1.3.0.min.css is included, so that the "jsAndCSS" XSLT template will contain:

Code: Select all

        . . .

<link type="text/css" href="{$PATH2PROJ}oxygen-webhelp/resources/skins/mobile/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet"><xsl:comment/></link>

        <link type="text/css" href="{$PATH2PROJ}oxygen-webhelp/resources/skins/mobile/custom-theme.css" rel="stylesheet"><xsl:comment/></link>

        <link type="text/css" href="{$PATH2PROJ}oxygen-webhelp/resources/skins/mobile/custom-theme.min.css" rel="stylesheet"><xsl:comment/></link>

        . . .

Regards,
Sorin

[rminaker]

Hi Sorin,

Thanks very much for the reply. I'll give this a try. I did play around with ThemeRoller a bit, but wasn't able to get the files to work (I'm sure I wasn't using "c" theme).

One more question: What version do I pick from the drop down? I'm assuming version 1.3.2 since it looks like 1.3.0 is what is used now? Or does it matter?

Thanks!

R.

[sorin_ristache]

Hi,

I did not change the version in the combo box. So it worked with version 1.4.0 but it also works with version 1.3.2.

The "C" theme is the third one on the ThemeRoller page. After customizing the colors of the components on the third column just press the Download and Download Zip buttons.


Regards,
Sorin

[rminaker]

Hi Sorin,

Thanks very much for pointing me in the right direction. I was able to customize exactly what I wanted to. I ran into some issues with the fonts not behaving as expect when using version 1.4.0 of ThemeRoller so I ended up using version 1.3.2. I was also able to use swatch A, B and C to create a cool style (not just C), so that was an added bonus.

This might be beyond the realm of Oxygen support, but two final questions:

-- Is there an easy way to add forward and back buttons to this interface? I'm ending up with a navigation that's three levels deep and only a home button on the third level.

-- I'd like to add a footer to this where I can include a logo and a copyright. I used the webhelp.copyright parameter to add a text copyright, but it's aligned to the right in a weird way and I can't seem to find where to edit this in the code, or if I can stick a logo in this footer as well. Is this possible?

Thanks again,

Ryan

[rminaker]

Hi again,

Please disregard my question about the back buttons. I actually have "Up" nav displaying now.

However, two things that I've noticed since I applied the new theme:

- All the 'uicontrols' that used to be bold, aren't bold anymore...(?) Can you direct me to the CSS file where I can edit this?

- In the default template there was significant spacing between numbered steps, list, etc. Now the there is no spacing at all bewteen the steps. Can you direct me to the CSS file where I can edit this?

Thanks again,

Ryan

[rminaker]

Hi again and apologies,

I realized what I did. In the common.xsl file, I accidentaly deleted this line:

<link rel="stylesheet" type="text/css" href="{$PATH2PROJ}oxygen-webhelp/resources/css/commonltr.css"><xsl:comment/></link>

I added it back and it fixed all my formatting issues. (If there was a way for me to delete my previous post, I would).

However, I just noticed another issue in my new themed mobile webhelp. --> When I search, I get all the right results, but instead of the document name showing up as the link, all the topics are labelled as 'Untitled Document'. Any idea on how I can fix this would be much appreciated...

Thanks,

Ryan

[sorin_ristache]

Hi Ryan,

-- I'd like to add a footer to this where I can include a logo and a copyright. I used the webhelp.copyright parameter to add a text copyright, but it's aligned to the right in a weird way and I can't seem to find where to edit this in the code, or if I can stick a logo in this footer as well. Is this possible?

Please see the parameter called webhelp.footer.file in the Webhelp-Mobile transformation. You should set an XHTML file in this parameter that contains only one <div> where you add whatever you want for your footer: a logo image, copyright text, etc.

I just tested the webhelp.footer.file parameter and it has a problem in version 15.1: the footer is added correctly to the content of the Webhelp output page but it is not visible in the browser if the page ends with buttons for navigation to the child topics. We will fix this problem in the next version so that the custom footer is visible in all pages.


Regards,
Sorin

[sorin_ristache]

However, I just noticed another issue in my new themed mobile webhelp. --> When I search, I get all the right results, but instead of the document name showing up as the link, all the topics are labelled as 'Untitled Document'. Any idea on how I can fix this would be much appreciated...

What Oxygen version do you use?

Do these topics have titles, that is a topic/title element, or a task/title one, etc? If yes then this title together with the shortdesc description (or the beginning of the body text content if no shortdesc was provided in the topic) should be displayed in the search result list. Can you send us a small sample DITA map and the included topics for testing it?


Regards,
Sorin

[rminaker]

Hi Sorin,

When I generate output from my project using the default mobile webhelp template everything works fine. All the files have task and topic titles and are valid according to Oxygen (version 15.1).
So it leads me to believe that this has something to do with the three files that I've added/edited:

- custom.xsl
- and the two .css files from theme builder

I'll send those files through and a screen capture of what I'm getting in the search. It would be interesting to see if you guys get the same issue.

[sorin_ristache]

Hi Ryan,

Thank you for sending the files. I tested your custom theme by inserting the two CSSs in the common.xsl stylesheet. This changed the colors in my Webhelp output but it changed nothing in how the Search tab works. I get the correct topic titles in the list with the search results, just as I did before changing/replacing the jQuery theme. I used the samples/dita/flowers/flowers.ditamap map from the Oxygen sample project.

Do you get the same problem with the wrong topic titles in the search result list if you apply the custom jQuery theme to the same map that I tried (samples/dita/flowers/flowers.ditamap map from the Oxygen sample project) ? If you don't get the same problem, I will try to reproduce the problem with your DITA files on my end by running the Webhelp-Mobile transformation on your DITA topic files, if you send me a sample DITA map and the topics for this map.


Regards,
Sorin

[rminaker]

Hi Sorin,

Sorry for the delayed response. To make a long story short, I figured out what the problem was.

I had created a custom XHTML footer file that I referenced in the scenerio settings.

What was happening was that my footer file contained this line of code <title>Untitled Document</title>. When I generated the output using my custom theme (including the flowers.ditamap), every topic picked up the title from footer -- this didn't happen in the default webhelp mobile output though... only in my custom one.

Solution to the problem was to delete the <title> tag from the footer. As soon as I did this, all the topic titles displayed as they should.

Thanks for all your help with this.

R.

[sorin_ristache]

Thank you for letting us know.


Regards,
Sorin