Adding logo to the search bar

[syed]

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

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

Syed

[alin]

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