skip to main content
Designing Stationery » Customizing WebWorks Help » Customizing the Navigation Pane in WebWorks Help » Modifying the Appearance of the Search Message in WebWorks Help
Modifying the Appearance of the Search Message in WebWorks Help
In WebWorks Help, when users click on the Search tab, the message “Type in the word(s) to search for:” is displayed. Once the user types in a word to search for and clicks Go, the “(Searching)” message is briefly displayed in the search results box. The appearance of these messages is controlled by the h2 and h3 HTML tags, and these tags are located in the search.js file. To modify the appearance of the search message, you need to specify the style properties for h2 and h3 tags in a separate .css file.
Note: If you customize the appearance of the search message by modifying the search.js file, you will be responsible for maintaining your customizations as needed each time you update your Stationery to work with a new version of ePublisher.
For more information about override files and locations, see Stationery, Projects, and Overrides.
To change the appearance of the “Type in the word(s) to search for” message, create a style definition for the h2 tag. To modify the appearance of the “(Searching)” message, create a style definition for the h3 tag. After you specify the font properties in a .css file for the h2 and h3 tags, reference the .css file in the search.js file.
Note: The messages.xml file in the Formats\WebWorks Help 5.0\Files\wwhelp folder controls the message text used throughout WebWorks Help for multiple languages. You can override this file to provide customized messages for your specific needs.
To modify the appearance of the search messages
1. If you want to override the message appearance for all WebWorks Help targets, complete the following steps:
a. In your Stationery design project, on the View menu, click Format Override Directory.
b. Create the following folder in your projectname folder, where projectname is the name of your ePublisher project:
Formats\WebWorks Help 5.0\Files\wwhelp\wwhimpl\js\scripts
2. If you want to override the message appearance for one WebWorks Help target, complete the following steps:
a. In your Stationery design project, on the View menu, click Target Override Directory.
b. Create the following folder in your projectname folder, where projectname is the name of your ePublisher project:
Targets\WebWorks Help 5.0\Files\wwhelp\wwhimpl\js\scripts
3. Copy the search.js file from the following folder to the scripts override folder you created within your project folder:
Program Files\WebWorks\ePublisher Designer\Formats\WebWorks Help 5.0\ Files\wwhelp\wwhimpl\js\scripts
4. Open the search.js file you copied to your project override folder.
5. Find the following block of code:
// Display initializing message
//
HTML.fAppend("<h2>" + WWHFrame.WWHJavaScript.mMessage.mInitializingMessage + "</h2>\n");
6. Replace that block of code with the following code:
// Display searching message
//
HTML.fAppend("<h2 style=\"color:#FF00FF; text-decoration: underline; font-size: 12pt;\">" + WWHFrame.WWHJavaScript.mMessages.mSearchSearchingMessage + "</h2>\n");
7. Find both instances of the following block of code:
// Display searching message
//
HTML.fAppend("<h2>" + WWHFrame.WWHJavaScript.mMessages.mSearchSearchingMessage + "</h2>\n");
8. Replace each instance of that block of code with the following code:
// Display searching message
//
HTML.fAppend("<h2 style=\"color:#FF00FF; text-decoration: underline; font-size: 12pt;\">" + WWHFrame.WWHJavaScript.mMessages.mSearchSearchingMessage + "</h2>\n");
9. Find the following block of code:
// Display search message and/or prepare results for display
//
if (this.mSavedSearchWords.length == 0)
}
HTML.fAppend("<h3>" + WWHFrame.WWHJavaScript.mMessages.mSearchDefaultMessage + "</h3>\n");
10. Replace that block of code with the following code:
// Display search message and/or prepare results for display
//
if (this.mSavedSearchWords.length == 0)
{
HTML.fAppend("<h3 style=\" color:#FF00FF; text-decoration: none; font-size: 14pt;\">" + WWHFrame.WWHJavaScript.mMessages.mSearchDefaultMessage + "</h3>\n");
11. Save and close the search.js file.
12. Regenerate your project to review the changes.
Was this helpful?
Last modified date: 11/30/2021