[oXygen-user] Webhelp ToC Icons

[Steve Bass]

Thank you Sorin, but that only gets at part of the challenge. I want a different icon for each of:

Book, Chapter, sect1, sect2, sect3, and sect4, maybe others.

As is, there are only 3 choices injected with JavaScript based on whether a given node has children.

--Steve Bass
Washington Publishing Company

-----Original Message-----
From: Oxygen XML Editor Support (Sorin Ristache) [mailto:] 
Sent: Thursday, February 5, 2015 1:00 AM
To: Steve Bass
Cc: 
Subject: Re: [oXygen-user] Webhelp ToC Icons

Hello,

The open/closed book icons for the Content panel are set in one of the CSS shipping artifacts:

.hasSubMenuClosed{
     background: url('../img/book_closed16.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}
.hasSubMenuOpened{
     background: url('../img/book_opened16.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}
.topic{
     background-image: url('../img/topic16.png');
     background-repeat:  no-repeat;
     padding-left: 16px;
}

You can overwrite these icons with a custom CSS that you set in the html.stylesheet parameter of the DocBook WebHelp transformation and that overwrites these icons with your own custom icons, for example:

.hasSubMenuClosed{
     background: url('yourCustomClosedIcon.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}
.hasSubMenuOpened{
     background: url('yourCustomOpenedIcon.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}
.topic{
     background: url('yourCustomChildSectionIcon.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}

If you don't place the custom CSS file and the custom icons in the directory with the DocBook shipping artifacts (OXYGEN_INSTALL_DIR\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp) they will not be copied automatically by the DocBook WebHelp transformation to the output directory. So I suggest placing your custom 
CSS in the directory:

OXYGEN_INSTALL_DIR\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\css

and your custom icon images in the directory:

OXYGEN_INSTALL_DIR\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\img

so that they can be copied automatically to the output directory of the DocBook WebHelp transformation together with the other DocBook shipping artifacts. In this case the custom CSS would set the custom icons like:

.hasSubMenuClosed{
     background: url('../img/yourCustomClosedIcon.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}
.hasSubMenuOpened{
     background: url('../img/yourCustomOpenedIcon.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}
.topic{
     background: url('../img/yourCustomChildSectionIcon.png') no-repeat;
     padding-left: 16px;
     cursor: pointer;
}

and the html.stylesheet parameter would have the value:

oxygen-webhelp/resources/css/custom.css

Best regards,
Sorin
<oXygen/> XML Editor
http://www.oxygenxml.com

Steve Bass wrote:
> Does anyone have a suggestion on the "best" way to modify artifacts 
> (xsl, js, css, others) so that we can have a unique icon image for 
> DocBook elements: book, chapter, sect1, sect, 2, sect3 ... instead of 
> open/closed books? Hopefully in a manner where we don't have to 
> customize the shipping artifacts. We're using oXygen 16.1.
> 
>  
> 
> --Steve Bass
> Washington Publishing Company