Adding a background image to wh_search_input

Posts: 69

Adding a background image to wh_search_input

Sat Oct 06, 2018 5:57 am

I'd like to add a unique background image to the .wh_search_input class when the wh_top_menu main menu items contain specific text.

For example, when the top menu item contains the text "Installation", I'd like to have the .wh_search_input include a graphic that depicts the installation process.

I'm thinking that jQuery would be a good solution to this, but I'm not sure how to use this. Any ideas?
Posts: 243

Re: Adding a background image to wh_search_input

Mon Oct 08, 2018 11:18 am


The WebHelp output top menu is static, this means that it does not change when a certain topic is opened (selected). Given this, for a publication output you'll have a certain text in top menu for any page of this documentation.
To change the search background image you can develop a CSS customization and use it when you publish the output. You can find more details about output CSS customization in our user manual:

If your use-case is different or the above approach does not meet your requirements, please provide us more details about your scenario.

Ionela Istodor
oXygen XML Editor and Author Support
Posts: 69

Re: Adding a background image to wh_search_input

Tue Oct 09, 2018 1:06 am

I"m familiar with how change the search div background image. However I would like to insert a unique class attribute to the wh_search_input (commonComponentsExpander.xsl line: 248) class that would represent the currently selected "chapter" (as defined in the bookmap).

As explained above as an example, when the top menu item contains the text "Installation", I'd like to add a class 'installation' (or perhaps 'wh_installation') to the search div so that I can create the necessary CSS code that adds this unique graphic for .wh_search_input.installation. I'd also need to consider cases where there is a space in the menu item as well, such as Getting Started would render getting_started as the class name.

I've looked into jQuery to do this as a document update method, but perhaps there is a way to do this using XSLT that I'm not aware of, like passing an argument to the <xsl:template match="whc:webhelp_search_input" mode="copy_template"> to add this class. Not sure how to do this either.
Posts: 69

Re: Adding a background image to wh_search_input

Fri Oct 12, 2018 12:32 am

I've come up with a solution (thanks to the folks at StackOverflow). This code adds a class to the webhelp_search_input placeholder from which I can then add the unique background graphic (via CSS) depending on the name of the class. In our source content, the chapter headings don't change for this WebHelp output, so I know the class names that that the code produces.

The problem with this method is that it takes a moment to display the bg image after the page refreshes and it's a bit annoying. It's OK for now, but I'd like to have a more robust method using XSLT as suggested in my previous post.


Code: Select all

$(document).ready(function () { //path: div/ol/li/span/span/a
    var current_class=$.trim($('.wh_breadcrumb > ol > li:eq(1) > span > span > a').text()).toLowerCase();
    current_class = current_class.replace(/\s+/g, '_');
    $('#searchID').addClass(current_class)  // I added @id="searchID" to commonComponentsExpander.xsl:246


Code: Select all

.wh_search_input {
  display: block;
  padding: .5em;
  margin: 12px 0 12px 18px;
.wh_search_input.installation {
  background: url('../../template/img/installation_bg.png') no-repeat;

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest