Specifiying the toolbar width and alignment (RH9)

[Jop_Smith]

In RH9 is it possible to set the width of the main toolbar in WebHelp and centre align it? I've got some buttons on the left and some others "pushed" to the right using blankblock in the whstart.js file. By default it uses the full width of the browser window, but I'd like to specifiy, say 960 pixels and centred, so that it matches the fixed width and centred position I've set for my topic content.

Thanks

Jonathan

[Willam_van_Weelden]

Hi,

Setting this is a bit of a pain and you will probably need to try some different values to make it fit the way you want.

Go to your output and open whtbar.js. Go to the function writeToolBar().

Go to line 1092 and replace width=\""+strWidth+"\" with width=\"auto\".

Go to line 1094 and replace width=\""+strWidth+"\" with width=\"auto\".

Go to line 1103 and replace sHTML+="<td width=\"100%\"></td>"; with sHTML+="<td width=\"950px\"></td>"; (or any other value you want the blank block to be.

Reload your output. Amend the value on line 1103 to make the blankblock as wide as you want.

Then copy whtbar.js to a safe location and don't forget to paste the modified file in your output every time you generate.

Message was edited by: W. van Weelden

[Jop_Smith]

Hi, this changes the width of the blankblock, but the effect I'm after is centering the whole toolbar, with auto margins at either side. In HTML you'd do it like this for a DIV:

#container { width: 960px; margin: 0 auto; }

Is this possible for the WebHelp toolbar?

Thanks

Jonathan

[Willam_van_Weelden]

That can be done, but you are limited by the possibilities of the browser you are using.

On line 1092 and 1094 remove the width attribute from the table. You can then add style=\"width: 960px; margin: 0 auto\" to both table definitions to get the correct width. (You can also assingn an id and modify the function writeStyle() to add the styling for the table.

Then you will need to add a rendering meta tag for IE, otherwise IE will not display the table correct. Open whskin_tbars.htm and add <meta http-equiv="X-UA-Compatible" content="IE=7" /> somewhere in the head section. This will only work for IE 7 and above.

Let the width of the blankblok to 100% so it will fill up the fixed length of the table.

Greet,

Willam

[Jop_Smith]

Hi Willam

I've added style=\"width: 960px; margin: 0 auto\" to the table definitions and added <meta http-equiv="X-UA-Compatible" content="IE=7" /> into whskin_tbars.htm. This works fine, apart from its affecting the vertical position of my buttons and Search input box. These are now higher than they use to be.

Also, I'm not sure what you meant by "You can also assing an id and modify the function writeStyle() to add the styling for the table.". Is this just an alternative way of achieving the same thing? If so, can you explain in a little more detail please and I'll try this method?

Cheers

Jonathan

[Willam_van_Weelden]

Hi,

I haven't seen any vertical changes in my output, but you should be able to counter that by modifying the styling trough the style attribute. Be carefull as this might affect the minibar above the navigation pane.

The function writeStyle() writes a style block for the minibar and whskin_tbars. Instead of using inline styling by adding the style attribute, you can also add an id or extra class to the table and add the corresponding css to the function writeStyle(). This function just creates a string that holds the css definition for the buttons.

Alternatively: assing an id to the table and add your css directly in whskin_tbars. Then the minibar will not be affected by the styling. Medling with the toolbars is a bit of a pain as both the toolbar and the minibar use the same JavaScript and CSS .

Greet,

Willam

[Jop_Smith]

I've sorted the vertical positioning by adding some top padding to the style attribute. I've hidden the minibar anyway so I'm not too worried about that.

What it's also done is make the Search input field taller than it was and I can't work out how to rectify that. Any ideas?

Thanks

Jonathan

[Willam_van_Weelden]

Take a look at line 559 in the function addSearchForm(); Add some inline styling for height and margin-top to position the input element.

The go button is defined in the lines under the input element. The function basically adds a table with the search element into the table holding the buttons. You may have to play around a bit with the different elements to get it exactly how you want it.

Greet,

Willam

[Jop_Smith]

That's great!

Thanks for your help with this. It's much appreciated.

Jonathan