Multiple images for WebHelp ToC topics?

[rminaker]

Hi,

I've set up a DITA WebHelp output where I've added PDF, Word, and Excel topic references to the ToC.

I'm wondering if it's possible to alter the WebHelp style sheet (toc.css) to automatically use a different image for each file type (similar to how the map displays in oXygen as you're assembling it) so people will know what they are about to click on.

I'm assuming this is the code that I'd need to add to?

Code: Select all

topic{

  background-image: url('../../img/topic16.png');

  background-repeat: no-repeat;

  padding-left: 16px;	

}

Thanks,

Ryan

[sorin_ristache]

Yes, that is the code, but currently it attaches the same icon to all types of topic references in the ToC tree.

You have to add a marker to distinguish between the references to PDF files, Word files, Excel files, etc. You do that for example by adding in your DITA map a different outputclass value on each type of topic reference, for example:

Code: Select all

  <topicref href="PDF-file.pdf" outputclass="pdf"/>

  <topicref href="Word-file.docx" outputclass="word"/>

  <topicref href="Excel-file.xslx" outputclass="excel"/>

and assign the images that you want to each type of reference in the ToC tree, with the following CSS code:

Code: Select all

.pdf {

    background-image: url('../../img/pdfIcon.png');

    background-repeat: no-repeat;

    padding-left: 16px;

}



.word {

    background-image: url('../../img/wordIcon.png');

    background-repeat: no-repeat;

    padding-left: 16px;

}



.excel {

    background-image: url('../../img/excelIcon.png');

    background-repeat: no-repeat;

    padding-left: 16px;

}

If you keep these file paths (url('../../img/pdfIcon.png'), etc), which I highly recommend, you just have to add the image files pdfIcon.png, wordIcon.png, excelIcon.png, etc. in the following directory, and the WebHelp conversion will copy them to the correct output location:

Code: Select all

OXYGEN_INSTALL_DIR\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\img

Otherwise you will have to copy them manually to the output WebHelp directory, or make sure somehow that the image files are there in the output WebHelp directory.

[rminaker]

Hi Sorin,

Thanks a lot for this! What you've said makes perfect sense, but I can't get it to work. I'm not sure what I'm doing wrong. I have added the outputclass to my DITA map, added the images to the folder you recommended, and added the CSS code to the ToC tree.

Unless I've put the code in the wrong CSS file? This is where I put it:

DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop\toc.css

I'm sure there is something very small that I might have missed...

Thanks again!

R.

[Radu]

Hi,

Sorin took a few days off so I will try to help you with this.

So here's what I did (and works for me):

In the DITA Map I have a topicref like:

Code: Select all

<topicref href="topics/introduction.dita" outputclass="SPECIAL_ICON"/>

In the toc.css (the same one you modified) I added the selector:

Code: Select all

.SPECIAL_ICON > .topic {

     background-image: url('../img/specialIcon.png');

}

and in the folder:

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

I added my special image file specialIcon.png which should be about 16 pixels wide by 16 pixels height.

You can also look at the HTML content to see exactly what elements need to be matched. Also I used the Firefox browser's Tools menu->Web Developer->Inspector view to see which CSS styles apply to render which elements in the output HTML document.

Regards,
Radu

[rminaker]

Hi Radu,

Thanks for following up. After still not being able to get this to work, I figured out my problem.

I'm using an older version of the webhelp plugin (I think maybe from v14). When I tried following your steps using a copy of the plugin from v16.1, it worked fine!

I think my best bet is to update the plugin anyway.

Thanks!

R.