Oxygen XML Forum

Posted: **Thu Feb 27, 2020 8:13 pm**

Hi,

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 921 times

The intent is to not use the webhelp.logo.image parameter because it adds the logo to the menu bar.

Syed

Posted: **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="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:whc="http://www.oxygenxml.com/webhelp/components"
    exclude-result-prefixes="xs"
    version="2.0">
    <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 -->
            <xsl:next-match/>
        </div>
    </xsl:template>
</xsl:stylesheet>

Then, you can reference the above file in the <xslt> section of your custom Publishing Template descriptor file:

Code: Select all

        <xslt>
            <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"/>
        </xslt>

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

        <resources>
            <css file="main.css"/>
            <!-- The CSS used to style the new content -->
            <css file="searchInput.css"/>
            <fileset>
                <include name="images/*.png"/>
            </fileset>
        </resources>

The structure of the PT package is:

Code: Select all

logo-before-search.zip
  - images/logo.png
  - xsl/searchInput.xsl
  - main.css
  - logo-before-search.opt
  - searchInput.css

Regards,
Alin

Oxygen XML Forum

Adding logo to the search bar

Adding logo to the search bar

Re: Adding logo to the search bar