Hello. I was trying to tweak my table of contents output. I have larger text to show the currently selected topic.
I noticed that the text for my larger selected heading and the icon were not aligned that great. When I tweaked in IE using F12, it seemed removing the vertical align of "top" attribute to the row solved my problem.
Before:
After:
However, that row attribute is not in the page template in my skin... all I get in the template (Publishing Options > Webhelp > Table of Content) is the <%tableofcontents%> placeholder in the code...
So my questions: where is the code represented by the <%tableofcontents%> placeholder? And, do you recommend my tweak? Or do you think there is an easier way to align my icon and heading? Thanks.
Editing Table of Contents code
Moderators: Alexander Halser, Tim Green
- vancouver-tech-writer
- Posts: 38
- Joined: Thu May 21, 2009 7:25 pm
- Location: Vancouver, BC, Canada
Editing Table of Contents code
You do not have the required permissions to view the files attached to this post.
Steve
Technical Writer
Vancouver, BC, Canada
Technical Writer
Vancouver, BC, Canada
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Editing Table of Contents code
Hi Steve,
The code for the table of contents itself is non-editable because it is generated by Help & Manual on the fly when you publish. To adjust for this you would need to use CSS code to make alignment and indenting changes to the currently highlighted TOC entry, along with the !important attribute to override any inline CSS. This might be a little tricky but should be possible with the right CSS selectors. However, I wouldn't really recommend it because changing the size, alignment and indentation of entries in the TOC like that (which would all be necessary) will cause distracting "jumps" in the layout when the entry's size and indentation change on selection. It generally looks better to change the appearance only without major size changes like that.
The code for the table of contents itself is non-editable because it is generated by Help & Manual on the fly when you publish. To adjust for this you would need to use CSS code to make alignment and indenting changes to the currently highlighted TOC entry, along with the !important attribute to override any inline CSS. This might be a little tricky but should be possible with the right CSS selectors. However, I wouldn't really recommend it because changing the size, alignment and indentation of entries in the TOC like that (which would all be necessary) will cause distracting "jumps" in the layout when the entry's size and indentation change on selection. It generally looks better to change the appearance only without major size changes like that.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
- vancouver-tech-writer
- Posts: 38
- Joined: Thu May 21, 2009 7:25 pm
- Location: Vancouver, BC, Canada
Re: Editing Table of Contents code
Do you have any other advice for aligning my image and text, Tim?
I think your default images align pretty well, but I am meant to use the ones I pictured.
Thanks!
I think your default images align pretty well, but I am meant to use the ones I pictured.
Thanks!
Steve
Technical Writer
Vancouver, BC, Canada
Technical Writer
Vancouver, BC, Canada
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Editing Table of Contents code
If all you want to do is align your images you can do it by making adjustments in this block of CSS code that you can find in the Table of Contents template (in your skin file if you are using a skin, in your project if you are not):
I've added comments on each line indicating what the settings do. You can use negative values as well. Note that it's important to leave the /* TOC LIST CSS */ comment lines in place before and after this block. This tells Help & Manual to use this code instead of the inline CSS.
Code: Select all
/* TOC LIST CSS */
#toc { padding:0; margin:0 } /* General margin of the TOC (root entry) */
#toc li { margin-top:2px; margin-left:0; padding:1px } /* Vertical spacing between TOC items */
#toc ul { padding-left:0; margin-left:0px } /* Indentation per level */
/* TOC LIST CSS */
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.