Edit online

How to Add a Logo Image in the Title Area

You can customize WebHelp Responsive output to include a logo in the title area. It will be displayed before the publication title. You can also specify a URL that can be used to send users to a specific website when they click the logo image.

This customization can be done using an Oxygen Publishing Template or using a transformation scenario from within Oxygen XML Editor/Author.

Using a Publishing Template

To add a logo in the title area of your WebHelp output using an Oxygen Publishing Template, follow this procedure:
  1. If you have not already created a Publishing Template, see How to Create a Publishing Template.
  2. Open the template descriptor file associated with your publishing template and add the <logo> element in the <resources> section and set the @file attribute value to the path of your logo.
  3. If you also want to add a link to your website when you click the logo image, set its URL in the @target-url attribute.
    <publishing-template>
    ...
    <webhelp>
        ...                
        <resources>
            <logo
                file="images/logo.png" 
                target-url="http://www.example.com"
                alt="Alternate text for the logo image"
                new-tab="true"/>
        </resources>
    </webhelp>
  4. Open the DITA Map WebHelp Responsive transformation scenario.
  5. Click the Choose Custom Publishing Template link and select your template.
  6. Click OK to save the changes to the transformation scenario.
  7. Run the transformation scenario.

Using a Transformation Scenario in Oxygen XML Editor/Author

To add a logo in the title area of your WebHelp output using a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:
  1. Edit the DITA Map WebHelp Responsive transformation scenario and choose a template.
  2. Open the Parameters tab and set the webhelp.logo.image parameter to the path of your logo.
  3. If you also want to add a link to your website when you click the logo image, set its URL in the webhelp.logo.image.target.url parameter.
  4. Click OK to save the changes to the transformation scenario.
  5. Run the transformation scenario.