Change TOC font color on roll over

ActivePresenter Support Questions
1

Problem: I want to change color of text from white to orange on roll over in ToC. Also, text will have underline when roll over in ToC. Couldn’t find option for it. I don’t have programming background. Can you please help?

ActivePresenter Version: 8

OS: Win10

Notes:

2

Hi Shri,

You can add the following CSS to player\rlplayer.css file in HTML5 output folder to do that:

.ap-toc-entry-content-text:hover {
  color: orange;
  text-decoration: underline;
}

If you want to apply this style to any HTML5 output, you should make change to rlplayer.css file in HTML5 template at <ActivePresenter Installation Folder>\templates\html5\css folder (default at C:\Program Files\ATOMI\ActivePresenter\templates\html5\css)

Regards

3

Thanks, It worked well. But now new issue is there with me :slight_smile:

My roll over and current slide background in ToC is white. originally ToC background is black.

When I roll over mouse in ToC, text color changes to orange but when clicked, triangle, section name, and current slide name remains white.

Also, it is much demanded that instead of only keeping triangle clickable for expand and collapse, entire row should be clickable. Can you help with that as well. Refer to screenshot attached.

  1. after clicking. text of current slide missing (to be changed from white to something)
    image
  2. roll over. triangle missing. (to be changed from white to something.
    image
4

Hi Shri,

To change the icon and text color of the current item, you can add the following styles:

.ap-toc-entry[data-status="current"] {
  color: orange;
}
.ap-prez-container[data-mode='1'] .ap-toc-entry[data-status="current"] .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='1'] .ap-toc-entry[data-status="current"] .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}

.ap-prez-container[data-mode='2'] .ap-toc-entry[data-status="current"] .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='2'] .ap-toc-entry[data-status="current"] .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}

.ap-prez-container[data-mode='3'] .ap-toc-entry[data-status="current"] .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='3'] .ap-toc-entry[data-status="current"] .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}

.ap-prez-container[data-mode='4'] .ap-toc-entry[data-status="current"] .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='4'] .ap-toc-entry[data-status="current"] .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}

It’s not possible to click the entire row of a section to expand/colapse it. We’ll try to support it in the future.

Regards

5

Hi Toan,

Thanks a lot, it works well.
But now, I face different problem and need your help.

On roll over, now text colour is changing to orange but I want the triangle (to expand / collapse) and text to change colour even if I hover curson in to the row also. How can I make it possible.

This is required because Normal background colour is black and text is white, for roll over I change background to white, so text colour needs to change immediately to orange.

6

Hi Shri,

To change the text and icon color when hovering over a row in ToC, you can use the following style:

.ap-toc-entry:hover {
	color: orange;
}
.ap-prez-container[data-mode='1'] .ap-toc-entry:hover .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='1'] .ap-toc-entry:hover .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}
.ap-prez-container[data-mode='2'] .ap-toc-entry:hover .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='2'] .ap-toc-entry:hover .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}
.ap-prez-container[data-mode='3'] .ap-toc-entry:hover .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='3'] .ap-toc-entry:hover .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}
.ap-prez-container[data-mode='4'] .ap-toc-entry:hover .ap-toc-entry-icon svg *,
.ap-prez-container[data-mode='4'] .ap-toc-entry:hover .ap-toc-entry-status-icon svg * {
  fill: orange !important;
}

Regards

7

Thanks a ton, Toan. It works well.