Adding logo to the search bar

syed
Posts: 66
Joined: Tue Nov 14, 2017 8:34 pm

Adding logo to the search bar

Post by syed » 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
image.png (3.02 KiB) Viewed 230 times
The intent is to not use the webhelp.logo.image parameter because it adds the logo to the menu bar.

Syed

alin
Site Admin
Posts: 171
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="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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Post Reply