HTML5 Topic Toolbar Proxy alignment

[kcann]

Hi!

I've just started to use the HTML5 WebHelp, which is working great. Setting up the toolbar in the skin has worked fine.

In my topics, however, I have a problem with aligning my topic toolbar proxy in the centre, as Flare seems to be assigning a 'button group' style that refers to a stylesheet ('TextEffects.css) that I cannot find/edit in Flare.

Does anyone know how to fix this problem?

Thanks!

K

[LTinker68]

TextEffect.css is one of the stylesheets Flare creates at build time. It's referenced in the topics ahead of your topic stylesheet, so if you want to override a style in that stylesheet, then you need to manually define the style in your topic stylesheet. Generate your output then look at the source code of the generated page to see what tags, class names and/or IDs are used for that toolbar so you know what to add to your stylesheet.

I should mention that I don't use that toolbar and have never tried to style it, but this should in theory work. If it doesn't, then it might be that it's also controlled by a JavaScript file created at build time, in which case you'd have to modify that JS file in the output to get it working correctly. I do something like that to correct a couple of other issues, so I have a copy of the modified JS file stored outside the project, and after I build the project, I copy my modified file into the output folder and overwrite the one just generated. Other users have created batch files to do that for them.

[kcann]

Thank you Lisa. I have a case logged with tech support, because I cannot figure out which style to edit - .button-group-container-left changes seem to have no effect, nor do I know why Flare defaults to this and not to .button-group-container-right. I'll post the answer once I hear back from tech support.

Regards,

K

[NorthEast]

The output uses positioning and floats, so setting text-align:centre won't work.

To adjust the position, edit MadCap|topicToolbarProxy, and use the following properties:
- position: relative
- left: 45% (adjust this to see what looks right for the toolbar size)

Changes to MadCap|topicToolbarProxy will be used in the toolbar container in the output (.topicToolbarProxy) - which also contains the button group container mentioned.

[kcann]

Thank you Dave, that works beautifully!

Now, can you tell me how to get the buttons to render properly in IE9?



K

[NorthEast]

Now, can you tell me how to get the buttons to render properly in IE9?

It works fine for me in IE9, using the same buttons.

Do the buttons look ok normally, or is it just when you set those properties I mentioned?

[kcann]

Thank you Dave!

Actually, they don't work in IE8 either, with or without the toolbar properties set.

Thanks again, your suggestions are very helpful.

K

[GaryUK]

I have a similar issue but with the height of the toolbar. I have managed to use JavaScript to get nice-looking breadcrumbs out of the topic and into the toolbar section. They look great, however when I resize the window enough so that the toolbar contents don't fit, they drop onto the next line but you can't see them properly because the height of the toolbar won't increase to accommodate them.

I have tried putting "max-height: none !important;" and "height: auto !important;" into the MadCap|topicToolbarProxy style but it had no effect.

When I press F12 on the HTML5 output, it seems that the toolbar is displayed in a div with a class of "buttons". Styling this in my style sheet doesn't work either. I also have a style sheet for styling the breadcrumbs, which I link in Toolbar.js. I tried putting the styles there too - no luck. Also tried changing the overflow property to see if it added scrollbars.

I've run out of ideas. I'd rather not write resizing code to delete the older breadcrumbs. It took me long enough to get them in the first place.

Has anyone else had this problem?

[NorthEast]

The style MadCap|topicToolbarProxy is for the toolbar proxy you can insert inside a topic, it doesn't style the toolbar in the skin.