Modifying the Mini TOC Placeholder

Question

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.

Answer 1

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