Modifications to TocEntry

[Sharon_G]

Hi folks,
I'd like to know how to add space between the TOC Entry icons and the adjacent text in my TOC?
With the current settings the text appears too close to the icon, but I can't see anywhere to change this.
Is there a way to add padding to the icon or the text in the skin file or elsewhere?
I don't want to modify the icons themselves and add extra transparent space because they are re-used in other places where the space is not needed.
Looking at other people's examples, I'm sure it can be done - I just can't figure out how!
Any and all help is appreciated.
Sharon

[Sharon_G]

I see that this entry has been viewed about 20 times which must have been disappointing since there was no solution - so I thought I'd share the answer that I received from the folks in tech support - and also something else that I learned.
Tech support had this to say:

In the output/skin folder there is a file called Toc.htm. Open that in a text editor such as notepad.
You will see a style called

Code: Select all

img
{
  border: none;
  vertical-align: bottom;
}

Add a margin right to it.

Code: Select all

img
{
  border: none;
  vertical-align: bottom;
  margin-right: 50px;
}

Now, if you dont want to hassle with this everytime you generate, you can alter the file in the Flare install directory.
C:\Program Files\MadCap Software\MadCap Flare V5\Flare.app\Resources\WebHelp\Default.flwht

Note: Because we never throughly tested this, we cannot support any side effects of these changes. Changing the file in the install folder will effect all projects. Changing the output files only - will only effect that specific project.

I tried this and it worked nicely except that I had also added shading to the background of my TOC entries. Adding the margin added a space in the shading between the icon and the lable text. The fix is quite simple, instead of adding a margin as suggested above, add padding instead: padding-right: xpx (where x is the number of pixels required).
HTH anyone else who is looking. At last count I have used a total of 4 hacks in my TOC alone. Am I the only one who would like the ability to make these changes through the Skin Editor? Or, at least a fully documented WebHelp SDK for those of us who would like to fully customize the WebHelp UI.
Please add your voice to the enhancement requests on the Flare website if you would like to see this.
Thanks,
Sharon

[mwmartz]

I was actually looking for something else when I came across this, which was something else I was wondering about. Thanks for posting the solution from Tech Support. However, I also think this should be something customizable through the skin editor. In our case, we want to have the same skin for all projects. However, we have multiple copies of Flare installed on various writers' machines. We wouldn't want to have to change this every time we generate a project. If I change the install file, everyone else would have to do the same on their machines to make sure we're all producing the same style TOC. This could become a maintenance nightmare as people come and go. This seems a bit unreasonable to me when it seems like it should be fairly easy to accomplish in the skin editor. I have added an enhancement request to this effect.

[Sharon_G]

Hi mwmartz,
I couldn't agree more. I find that I'm using 4 different hacks in my WebHelp TOC alone - for simple stuff that should be available through the Skin Editor. I have also submitted enhancement requests to be able to configure these through the Skin Editor - or at the very least for MadCap to provide a WebHelp SDK that details what is configured where for those of us who want to go beyond what is offered in the Skin Editor.
The Skin Editor is like quite a few Flare features, it performs well, but not exceptionally, and is in need of beefing up. However, MadCap does seem to be responsive to user enhancement requests, so if as many people as possible add their voices to ours (and they recognize that the problem is with the Skin Editor as as whole, not just with small, individual, pieces of the functionality) we may see results sooner rather than later.
Sharon

[mwmartz]

Just got this response from Madcap to my enhancement request with a reasonable workaround (for now):

In that situation, the best bet might be to use custom Icons in the TOC and when making them, add some padding to the right of them. That way everyone using the skin will have the same setup.

I have sent a request to Development to add options for padding/margin in the skin. They will evaluate it and if fixed in the next version, you will be notified.

Regards,
Rob Hollinger
MadCap Software, Inc.
Technical Support Center

[beagley]

That workaround is exactly what I did, by the way.

For those finding this thread and unsure what it means, I did this:

1. In my skin, in the Styles section, under the TocEntry tab, I clicked "Add Class"

2. Then I used custom fonts or icons for my new Toc Class.

3. Then, in my TOC file, I right-clicked and selected Properties for items that I wanted to stand out or have more padding or whatever.

4. For those items, I selected the new style class I created.

I used this technique to assign a custom icon for my video topics. I also used this technique to make major items BOLD in my Table of Contents.

[mwmartz]

Hi, beagley -

When I go to the properties dialog for my TOC file, I'm not seeing anywhere to add padding. Am I going to the wrong file? In Flare, I went to the TOCs folder in the Project Organizer and opened my TOC. I then right-clicked one of the book icons and selected Properties. I don't see any place on any of the tabs to add padding. Could you please elaborate?

Thanks,
mwm

[wclass]

... In Flare, I went to the TOCs folder in the Project Organizer and opened my TOC....

In this TOCs folder, all you can do is apply the style that has been created with the padding etc. (Basic tab > Appearance frame > Style class).

Any padding has to be added to the icon you set up in the Skins section.

[beagley]

Hi,
Yeah, what Margaret said.

It's really TWO basic steps:

1. You open your SKIN, and use the styles section to create a new class or modify your existing class. You can change the icon in TOCs and use an icon that you've edited to make more padding. Or you can change the font for the TOC items to be bold or whatever. Not sure if there is a padding/"box" items in Styles, but there might be.

2. THEN, you open your TOC, open properties for each item that needs more space, and assign your revised style/class.
----

A quicker way: Grab the icons that appears next to your TOC items in your compiled Web help. Open those icons in any graphic editor and add a few pixels of margin to the top and bottom. Open your skin, and use the styles section for TOC items to choose your new, edited icons.

Then all your TOC items will have more room around them, and you won't even have to touch the TOC at all.

---

These sort of solutions are probably pretty confusing if you do not have some experience playing around with the Style editor interfaces (either the master style sheet or the "Styles" section of skins, etc.

I don't know a good way of making all that clearer. I took a few video courses on how stylesheets and CSS work, and then took a couple of Flare training sessions, and then just spent a lot of time practicing, messing around with Flare.