Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #350055 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    3 pts
    @ahetherington9113

    Hi all

    I’m using Lectora 17.0.2

    Is it possible to change the colour of the highlight box that sits over the current page in the table of contents? I can change everything else, except for this and it is a funny light brown/orange colour.

    Thanks!

    Amanda

    #350156 Score: 1
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    104 pts
    @jvalley4735

    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?

    This post has received 1 vote up.
    #350158 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    75 pts
    @mnotermans5114

    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

    #350175 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    26 pts
    @JasonADal

    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.

     

    #350216 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    3 pts
    @ahetherington9113

    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.

    #351955 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    75 pts
    @mnotermans5114

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

    Regards,

    Math

    #351989 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    3 pts
    @ahetherington9113

    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

    #352118 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    159 pts
    @Klaatu

    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.

    #352134 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    216 pts
    @timk

    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

    This post has received 1 vote up.
    #352136 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    75 pts
    @mnotermans5114

    @tim ask Jennifer, she removed double sets of shared content for me before 😉

    #352138 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    216 pts
    @timk

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

    #352293 Score: 0
    Profile photo of amanda hetherington
    amanda hetherington
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    3 pts
    @ahetherington9113

    <span class=”handle-sign”>@</span>JasonADal <span class=”handle-sign”>@</span>timk <span class=”handle-sign”>@</span>mnotermans <span class=”handle-sign”>@</span>Klaatu <span class=”handle-sign”>@</span>jvalley4735

    Thanks all, I really appreciate your time.

     

    Regards

    Amanda

    #352355 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    104 pts
    @jvalley4735

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

    #352521 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    216 pts
    @timk

    Thanks.

    #352680 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    75 pts
    @mnotermans5114

    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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.