Modifying the Mini TOC Placeholder

[breadmanorange1]

I am on a mission to change the way the Mini TOC looks on our WebHelp pages. Maybe somebody out there has done this, or can help us understand the CSS classes better so we can attack the problem ourselves.

First, we want the TOC to be inside a bordered box. Piece of cake. Peter Grainge's suggestion to throw it into a table cell works perfectly.

Then, we want a graphic to the left of the caption. It won't be a white box with an X in it, but below shows the rough location. I've kinda sorta done this by adding a column to the left of the one that holds the MiniTOC, but the alignment isn't pretty, and it causes a conflict with our next goal.

The next goal is to have a two-tone Mini TOC, as in the example below.

Finally, we want to push the word "Show" or "Hide" flush right against the right margin of the cell while keeping the caption (in this case, "QuickLinks") to the left. I have been successful with adding a bunch of spaces after the caption, followed by the words "Click to" but it's not clean, and would require me to change the number of spaces manually on each page, depending on how long the links are.

Has anybody hacked into their Mini TOC before to manipulate it similar to what we are looking for? We're having a rough time even editing the CSS styles to work the way we want, and are hoping there's a simpler way to attack the problem. Thanks.

[MergeThis]

Don Quixote, is that you?

Seriously...RH has this placeholder function locked in pretty tight (I tried adding an image inside the code and RH crashed!).

We use a div element to place the placeholder at the top right of the topic:

div#navright {
float: right;
padding-top: 0px;
padding-right: 8px;
padding-left: 10px;
padding-bottom: 10px;
width: auto;
margin-left: 15px;
margin-bottom: 15px;
margin-top: 5px;
}

Then the topic gets this:

<?rh-cbt_start condition="Online" ?><div id="navright">
<?rh-placeholder type="minitoc" ph-style="font-family:Verdana;font-size:8pt;font-weight: normal;font-style: normal;text-decoration: none;"
  list-type="none" caption="In This Topic" caption-style="font-family:Arial;font-size:8pt;font-weight: normal;font-style: normal;text-decoration: none;"
  margin=";;0px;0px" min-heading-level="h2" max-heading-level="h2" flags="3" ?>
</div><?rh-cbt_end ?>

You could try adding background-color and border-color styles to the div, and then adding highlighting to the placeholder caption in the UI (this might get you the two-tone you want, not sure). As to the image and right-aligned link, you and Sancho might have better luck at the next windmill.

Good luck,

Leon

[Captiv8r]

Hi there

Since you are already using a table...

Why not have two columns? Insert the image in one and the placeholder in the other?

I'm probably oversimplifying... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7, 8 or 9 within the day! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks

[breadmanorange1]

Rick,

I already created two columns. The problem is the way the shading works.

Someone in my office spent a lot of time playing with the CSS, creating whole new classes and such, just to run up against the same limitations as before.

So, we've changed the way we want it all to look to accommodate the limitations.

Thanks for your effort.

[breadmanorange1]

Leon,

Thanks for the code. That helped spur some ideas on how we should proceed.