Table of Contents

Hi Amanda, im sure you can change it. Probably with a CSS, you just need the proper class thats assigned to it. If you have a sample of it, i can check it out.

Regards,

Math

Not within the program but I'd imagine you could change the code associated to the element. I'll add editing capabilities for the table of contents to the list of future suggestions. Maybe @mnotermans5114 might have an idea?

For what it's worth, looking at the element in the HTML, each line gets it's own div ID (entry1, entry2, etc.) that has a style for background defined. The background style isn't applied to the line if it isn't the current page. I did find the matching hex version of the color (the HTML uses the RGB value) in the trivantis-toc JS file under toc.obj.selnode.display.

I'm not sure if this helps save you some digging, Math, but thought I'd put what I had found when working on the same question.

undefined

Thanks all. It's the standard Lectora Indented List Table of Contents object. I can change all the other properties within Lectora except for the selected page highlight. I can see I could add a CSS class to the appearance but I don't know what to put here.

Hi Math

I appreciate it, but I don't think you would need a sample of my project. It is the standard Lectora Table of Contents object. I really just want to be able to change the colour of the highlight that appears on the current page in the TOC list.

If it cannot be done easily, I'll live with it, and perhaps I will add it to the suggestions for enhancements.

Regards

Amanda

If you could add a sample of your course, i gladly look at it to see how to fix it.

Regards,

Math

You will need to edit the published files as this highlight is generated at run time. Very easy to do. In your published files find trivantis-toc.js.

In this script search for ece9d8 which is the hexadecimal color for the ugly beige blah default color.

The line should look like: tocObj.selNode.navObj.style.backgroundColor = '#ece9d8'.

Change ece9d8 to whatever hexadecimal color you desire. Done.

Jason was right there, he just didn't tell you to change it.

@Tim ask Jennifer, she removed double sets of shared content for me before ;-)

Can be done with a piece of jQuery:

http://community.trivantis.com/shared-content/customize-table-of-content-type-indented-list/

Only it seems the delay I added to the Run Javascript is too short, so sometimes the styles are not applied in time. It would be nice being able to edit or delete shared content.

Tim

Thanks, maybe next time. It works ok most of the time and is easy enough for anyone to fix.

undefinedjvalley4735

Thanks all, I really appreciate your time.

undefined

Regards

Amanda

If you send me the files @timk , I'll be happy to replace them for you.

Thanks.

I was only trying to customize the colors in the toc as it is. If you want to do more, this suggestion may be useful to make it easier:

http://community.trivantis.com/forums/topic/publish-titles-copy-extern-files-last/

undefined

At the moment customizing a TOC quite a bit. Although Tim's solution works nicely i choose another approach. When you go search the 'Support Files' folder in C:\Program Files (x86)\Trivantis\Lectora Inspire 17\Support Files you find there all the images used in Lectora. For the TOC for example the small boxes. I changed those to match my needs. The default orange highlight is described in this javascript file:

trivantis-toc.js

Make sure you make a copy of anything you change inthere before doing anything !!!!!!

Around and about line 720 it says:

tocObj.selNode.navObj.style.backgroundColor = '#ece9d8';

The easy way is offcourse changing this hexcolor to whatever you need...

But then its always like this...except when you edit/change/update your Support Files folder..

@Development team/ @jvalley473 Wouldnt it be nice if we could have multiple support folders, customize them and with a script or setting in a Lectora project decide which one to use...

A better solution for me is adding a className to the selected Node. This way i can access the selected Node directly in Lectora and change the attributes of that node. The backgroundcolor in this case.

tocObj.selNode.navObj.style.backgroundColor = '#ece9d8';

tocObj.selNode.navObj.className = "_selectedNode";

Now i can directly access the selected node in my TOC and change any attribute of it.

PS: im gonna try the same with the images now. ftmfn.gif etc. They are used for the Treeview when using a TOC. Changed these to match my design, but when i add a className to these, i probably can change them also like this.

undefined

Even with all of your help and suggestions, I decided to live with the default colour rather than change anything. It is just not worth the effort. I don’t ever want to change anything post-publish and I’d really rather use the controls built into Lectora so that customization is kept to a minimum, which is what I like about the TOC and automatic menus.

Of course, this is different for every developer, but my work involves instructional design and developing, so whatever is quickest to develop and maintain is my preferred approach.

Thanks

Amanda