3 Replies Latest reply on Jun 14, 2010 6:09 AM by Willam van Weelden

    Rounded toolbar Search box in WebHelp?

    perttime Level 1

      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. ***

        • 1. Re: Rounded toolbar Search box in WebHelp?
          Willam van Weelden Adobe Community Professional & MVP

          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.

          • 2. Re: Rounded toolbar Search box in WebHelp?
            timtu62

            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

            • 3. Re: Rounded toolbar Search box in WebHelp?
              Willam van Weelden Adobe Community Professional & MVP

              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.

              1 person found this helpful