Adding a background image to wh_search_input

[rdelong]

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?

[ionela]

Hello,

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:
https://www.oxygenxml.com/doc/versions/ ... h-css.html

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

Regards,
Ionela

[rdelong]

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.

[rdelong]

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.

JS:

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, '_');

    console.log(current_class);

    $('#searchID').addClass(current_class)  // I added @id="searchID" to commonComponentsExpander.xsl:246

});

CSS:

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;

}