Add Title to Mini TOC

[jessemds]

Hi,

I would like to be able to have a title print above my mini TOC automatically. Is this possible to do via styles or some other method?

For example, I want to generate a mini TOC like this:

Contents of this section:
Item 1......page 5
Item 2......page 6

Would I have to type the "Contents of this section:" everytime or can I automate that?

I am interested in doing this for both printed and webhelp output.

Thanks!

Jesse

[LTinker68]

There's no way to automate it as part of the mini-TOC (at least, I don't think so), but you could put the text in a snippet or a variable and just insert that snippet or variable in every topic containing a mini-TOC. It's not automated in that it's not inserted automatically but the text will be the same everywhere and if you want to change it then you just change it in one spot and it'll change in all locations.

[jessemds]

thanks. that sounds like a good idea

[jessemds]

OK, so I made a snippet that I use for my mini toc title. Is there a way that I can put the same border around the snippet and the mini-toc?

thx

[LTinker68]

Forgot to mention that you could put that mini-TOC inside the snippet with that text. Then you just insert the entire snippet into a topic.

As for putting a border around it, I suggest you put the text and the proxy inside the same DIV tag in the snippet and specify a border for that DIV tag in the stylesheet. If you're outputting to Word, though, you might have to use a <p> tag instead, since Word doesn't like the DIV tag. I think PDF output understands what to do with DIVs, but I haven't tested that out yet.

[NorthEast]

I would like to be able to have a title print above my mini TOC automatically. Is this possible to do via styles or some other method?

Yep, I do this in my projects - it took me a while to figure out, but it works

You'll need to add these styles in your stylesheet:

Code: Select all

MadCap|miniTocProxy
{
	mc-auto-number-format: 'Contents of this section:';
	mc-auto-number-class: miniTocBoxTitle;
}

span.miniTocBoxTitle
{
	font-weight: bold;
}

div.MCMiniTocBox
{
	mc-auto-number-format: 'Contents of this section:';
	mc-auto-number-class: miniTocBoxTitle;
}

- If you want to change the title text, edit both references for the mc-auto-number-format property.

- If you want to change the formatting of the title, edit the span.miniTocBoxTitle style.

Note: One slight problem is that it's not easy to add spacing between the title and the links underneath, as you can't use margins or padding with the span style. However, if you set the line-height property of the span, that will add space above and below the title.

[jessemds]

Hi,

David..your answer is amazing but I just have a few questions:

- If you want to change the title text, edit both references for the mc-auto-number-format property.

- If you want to change the formatting of the title, edit the span.miniTocBoxTitle style.

Here is exactly what I want to do. I want to have two snippets...one called MiniTocChapter and one called MiniTocSection. The MiniTocChapter should have a caption that reads "Contents of this chapter" and the other should read "Contents of this section".

When I edit the McAutoNumberFormat property of the MadcapMinitocproxy, the caption does not change. When I edit the Mc-auto-number-format property of the McMini-Toc-Box DIV tag, that changes the caption. However, what property (if any) in the McAutoNumberFormat links the McMiniTocProxy to use the auto-number-format property of the McMini-Toc-Box DIV tag?

If that sounds too confusing, all I want to be able to do is to create additional MadCapMiniTOCProxy classes, one that I can use to display "Contents of this chapter" and one that will display "Contents of this section".

Thanks!

Jesse

[NorthEast]

If you want two different styles of mini-TOC proxy, then set them up as classes of MadCap|miniTocProxy, e.g. MadCap|miniTocProxy.name.
The corresponding DIV class should use an underscore followed by the class name, e.g. div.MCMiniTocBox_name.

So, you might have something like:

Code: Select all

MadCap|miniTocProxy.chapter
{
   mc-auto-number-format: 'Contents of this chapter:';
   mc-auto-number-class: miniTocBoxTitle;
}

MadCap|miniTocProxy.section
{
   mc-auto-number-format: 'Contents of this section:';
   mc-auto-number-class: miniTocBoxTitle;
}

span.miniTocBoxTitle
{
   font-weight: bold;
}

div.MCMiniTocBox_chapter
{
   mc-auto-number-format: 'Contents of this chapter:';
   mc-auto-number-class: miniTocBoxTitle;
}

div.MCMiniTocBox_section
{
   mc-auto-number-format: 'Contents of this section:';
   mc-auto-number-class: miniTocBoxTitle;
}

On your master page(s), you can select which class of miniTocProxy to use.

[ChuckJulian]

Thanks, all. I was also trying to figure out how to put a heading over the miniTOC and forgot to ask the forum.

I added a couple of tweaks to the auto format code to make the heading the same color as my <h1>. I hope it's useful to others.

Code: Select all

mc-auto-number-format: '{b}{color #000099}Topics in this section:{/color}{/b}';

Chuck Julian

[NorthEast]

Thanks, all. I was also trying to figure out how to put a heading over the miniTOC and forgot to ask the forum. :oops:

I added a couple of tweaks to the auto format code to make the heading the same color as my <h1>. I hope it's useful to others.

Code: Select all

mc-auto-number-format: '{b}{color #000099}Topics in this section:{/color}{/b}';

Chuck Julian

If you're using the styles in my example, then you just need to edit the span.miniTocBoxTitle class to change the heading style - e.g. in your case:

Code: Select all

span.miniTocBoxTitle
{
   font-weight: bold;
   color: #000099;
}

There's nothing wrong using the mc-auto-number-format formatting codes, but if you want to use that method instead of using a style, then you'd need to remove the references to the mc-auto-number-class: miniTocBoxTitle property and remove the span.miniTocBoxTitle class.

[jessemds]

I just wanted to say thanks for this code. This code and this program is EXACTLY what I need!

[peterbrown05]

this may help some people;
if flare v7 it turns out the div class has changed slightly;

I needed to do this to get it to work (and stay back compatible):

Code: Select all

MadCap|miniTocProxy,
MadCap|miniTocProxy_0
{
   mc-auto-number-format: 'Contents of this section:';
   mc-auto-number-class: miniTocBoxTitle;
}

does anyone know if this is a bug or intended behaviour?

cheers
pete

[NorthEast]

does anyone know if this is a bug or intended behaviour?

It's a difference in Flare v7, quite a lot of generated style classes now have '_0' added to their name.

I've posted a list here: http://forums.madcapsoftware.com/viewto ... =6&t=12550

It's not a bug as such, as these are all Flare's generated styles; so it's only a problem if you're tweaking them.


This change will probably effect quite a number of tweaks posted in the forums.

[NorthEast]

Incidentally, adding an auto number format to MadCap|miniTocProxy will only affect what you see in the Flare editor, and is not carried into the output; setting the auto number format on the div.MCMiniTocBox styles will include it in the actual output.

You need to add the _0 to div.MCMiniTocBox, not MadCap|miniTocProxy as mentioned above.

E.g.

Code: Select all

div.MCMiniTocBox,
div.MCMiniTocBox_0
{
   mc-auto-number-format: 'Contents of this section:';
   mc-auto-number-class: miniTocBoxTitle;
}

[atomdocs]

Thanks Dave. If I put this on my masterpage (set at target level), the div autonumber does not turn off when the miniTOC is suppressed (because of no child topics). Is that your understanding also, or have I made an error along the way?

[NorthEast]

If I put this on my masterpage (set at target level), the div autonumber does not turn off when the miniTOC is suppressed (because of no child topics). Is that your understanding also, or have I made an error along the way?

In my projects, the miniTOC only appears in the output when a topic has child topics; if the topic doesn't have child topics, it does not include a div.MCMiniTocBox.

[atomdocs]

Thanks Dave. It's not working for me. I assumed the miniTOC proxy goes inside the MCMiniTocBox div on the masterpage, is that right?

In output, I get the MCMiniTocBox div autonum text in every topic, whether or not there are child topics.

I'm also not clear why the miniTOC proxy needs autonum properties - I found I get the same result if I remove these properties from the proxy.

I am creating HTML5 output, I wonder if this is an issue?

[NorthEast]

Thanks Dave. It's not working for me. I assumed the miniTOC proxy goes inside the MCMiniTocBox div on the masterpage, is that right?

No, you just insert the miniTOC proxy on the master page, you do not insert a div.

The div.MCMiniTocBox is generated by Flare in the output - it turns the miniTOC proxy into the div, and we're just modifying the div's style in the CSS.

I'm also not clear why the miniTOC proxy needs autonum properties - I found I get the same result if I remove these properties from the proxy.

Mentioned in one of my posts below...

Incidentally, adding an auto number format to MadCap|miniTocProxy will only affect what you see in the Flare editor, and is not carried into the output; setting the auto number format on the div.MCMiniTocBox styles will include it in the actual output.

[atomdocs]

Thanks Dave. Got it. I read the rest the of this topic properly this time. I just needed _0.

[amygil]

I see this topic is old but I found a simpler method for adding a title to the mini TOC. I use the before selector:

Code: Select all

div.miniToc::before
{
	content: "More:";
	font-weight: bold;
}

Of course, support for the ::before selector was limited in 2008 and there may be some older browsers that don't support it but I'm okay with it not showing up in those browsers.

For some reason, I couldn't get the auto-numbering described earlier to work in my project.

[davidfass]

Amygil, if you do that, is there any way to style that introductory text in CSS? Thanks.

[davidfass]

Stupid question, never mind.