How to place Accordion Items to Horizontal Layout?

[giridhar reddy]

Hi All,
Currently Accordian Items are vertical Tabs/IFrames/Divs. Can we customize this be layed Horizontally.

Current Output:
------------------
TOC
------------------
Index
------------------
Search
-------------------

Expected Output:
-------------------------------------------------
TOC | Index | Search |

[Richard Ferrell]

you can change were the pane appears in the skin, at the Top or Bottom or Left or right side of the screen, but it will still be vertical bars, its not possible to have them has horizontal bars.

[LTinker68]

<voice="Mr. Rogers">Can you say "feature request"? I knew you could.</voice>

http://www.madcapsoftware.com/bugs/submit.aspx

[scott]

Hi all,
We can make Flare do it. It just takes a few tricks.

Goal


Steps
* Create your horizontal icons. I've created TOC, index, and search icons that you can use: http://www.clickstart.net/horizontalIcons.zip
* Open your skin.
* On the WebHelp Setup tab, set the Pane Size to the total width of your icons. For example, the three icons I created are 80px wide each, so I set it to 240.
* Set Visible Accordion Items to 0.
* Save the skin (the preview often doesn't see a change to the Pane Size or Visible Accordion Items settings until you save).
* Select the Styles tab and open the AccordionItem group.
* Select the TOC accordion item.
* Set the Icon to your image.
* Set the index, search, and other accordion items' icons.
* Save your skin.

At this point, it should work great except if your users make the accordion taller. If the accordion's label is part of the image (mine are), the label will appear beside the icon. If you don't include the label as part of the image, you're set. Otherwise, you will need to do a few more things:

* Select the AccordionItem style group.
* In the Font property group, set the FontSize to 0px. That'll make the label -really- small.
* Set the Color to the background color of your accordion. That'll make it blend into the background.
* Select the AccordionTitle style in the ToolbarItem style group.
* In the Font property group, make sure the FontSize isn't 0px (it'll be really small if it is). 12 or 14px is a good starting point.

Note: You can't set the accordion item's Label property (as a group or individually) to blank or a space--Flare will just show "null" in the preview or the default label in WebHelp. You can set it to a period to make it short, but then you'll see a period as the label above the accordion.

Have fun with this trick!

[giridhar reddy]

Thanks a lot for your replies. Unfortunately I cannot go with above solution, because I am generating output from various languages ... I don't know If I can request for such images in various languages. However, good thought....Let me see if I can.

[scott]

I have an idea that might help:

If you have Capture, you can create variables for the labels (TOC, index, search, etc) in Flare and reuse them in Capture in your images. You can then create a target for each language, like "WebHelp Spanish," and override each variable's definition to the Spanish-language version. I haven't done that before, but I think it would work.

[Richard Ferrell]

Nice Scott,

Looks like that is a good KB article!

[noblehouse]

I am in love with this trick. Exactly what we wanted to do. Thanks Scott!

[LTinker68]

My WebHelp outputs sometimes have 5 accordion buttons, so Scott's method would make the nav pane too wide. MadCap needs a way to display the navigation as buttons or tabs as part of the toolbar. Make sure you submit a feature request for this, too.

[scott]

Hi Lisa,
I agree--buttons and tabs would be great options.

If you have 5 accordion items, you will definitely need to keep the images as small as possible. If you only use icons they'll be -really- small. Or, you could not use icons and only use labels.