Rounded toolbar Search box in WebHelp?

Report · Jun 10, 2010

The powers that be want a help facelift... One request is a search box with round ends. Preferably with the Search button inside the box, much like what Apple does in Safari etc.

Any hints on what file(s) to edit and how?

A ready made piece of code with instructions on where to put it would be great, but I'll appreciate any input (including "It'll be a pain, don't even try").

*** I'm working on RoboHelp 7, on XP. The help needs to work on Windows and Mac. ***

Report · Jun 10, 2010

Hi,

Yes it can be done, and yes it'll be a pain. Whether it's worth your trouble is up to you. You'll need to know at least some CSS and JavaScript. You can only do this in the output files, so you'll have to past the modified output files into your output every time you make a new version of the help.

The following article is quite helpful: http://www.picment.com/articles/css/funwithforms/

You have an extra layer of complexity because the search form is created with javascript. (In the top bar as well as in the sidebar.) The form in the sidebar is build in whfform.htm. Target the input box with 'input' or 'input.inputfield'. The button is an image with a hyperlink. The standard id of the image is 'go'.

The form in the top bar is build in whskin_tbars.htm and (mostly) whtbar.js.

Hope this gets you started. The easiest is just to make all your clients use Safari

Greet,

Willam

This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

Report · Jun 14, 2010

Thanks for getting us started. The biggest noticable problem of the solution provided in the link is that it does not seem to be supported in Safari, at least not in the time of writing which may have changed by now.

Any other tips for the round-cornered search box? We are really not into Javascripting so the instructions would have to be fairly detailed.

BR,

Timo

Report · Jun 14, 2010

Hi,

If you make a solution, you're bound to find some difficulty with multiple browsers... It's buggy in FF and Safari 4... The whole point is that it's not easy, especially when it has to look the same on all browsers. See http://www.sohtanaka.com/web-design/styling-input-search-form-css/ for a simpler example. (It also works on safari.)

The form field consists of two elements: The button and the field. The button is an image, so you can easily replace that. The field itself is build in javascript, but that isn't a problem. You can target the input field by input.inputfield (the input element with the class "inputfield") in whfform.htm. You can use the style block in the top of the file, without having to look at the javascript on the page.

Greet,

Willam

This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.