Adding logo to the search bar

Posts: 72
Joined: Tue Nov 14, 2017 8:34 pm

Adding logo to the search bar

Post by syed » Thu Feb 27, 2020 8:13 pm


To add the product logo to the search bar, i used this parameter. However, it works only on the index.html page. What should i do to make the logo appear in the search bar for all the topics?
image.png (3.02 KiB) Viewed 411 times
The intent is to not use the webhelp.logo.image parameter because it adds the logo to the menu bar.


Site Admin
Posts: 189
Joined: Thu Dec 24, 2009 11:21 am

Re: Adding logo to the search bar

Post by alin » Tue Mar 10, 2020 12:23 pm

Hy Syed,

You can use an XSLT extension file to alter the HTML structure generated for the Search component. For example, the XSLT extension file may look as follows:

Code: Select all

<xsl:stylesheet xmlns:xsl=""
    <xsl:template match="whc:webhelp_search_input" mode="copy_template">
        <xsl:param name="i18n_context" tunnel="yes" as="element()*"/>
        <div class="search-wrapper">
            <div class="search-logo"></div>
            <!-- Generate the original component content -->
Then, you can reference the above file in the <xslt> section of your custom Publishing Template descriptor file:

Code: Select all

            <extension file="xsl/searchInput.xsl" id="com.oxygenxml.webhelp.xsl.dita2webhelp"/>
            <extension file="xsl/searchInput.xsl" id="com.oxygenxml.webhelp.xsl.createMainPage"/>
            <extension file="xsl/searchInput.xsl" id="com.oxygenxml.webhelp.xsl.createSearchPage"/>

Then, you can use a custom CSS to style the newly generated content.
You can also add the image in the Publishing Template package in order to have it copied in the output folder:

Code: Select all

            <css file="main.css"/>
            <!-- The CSS used to style the new content -->
            <css file="searchInput.css"/>
                <include name="images/*.png"/>
The structure of the PT package is:

Code: Select all
  - images/logo.png
  - xsl/searchInput.xsl
  - main.css
  - logo-before-search.opt
  - searchInput.css
Alin Balasa
Software Developer
<oXygen/> XML Editor

Post Reply