Separate colour for current topic and current page in ToC

[Shri (Shripad)]

Hi, Please find attached screenshot.

I want to use 2 different colour shades for the current topic and current page. In the attached screenshot, what happens is I see 2 orange strips. Just want to keep orange strip for current page which is Software and OS requirements. Don’t want to highlight welcome topic. Please help!

Thanks,
Shri

[ToanLS (Toan Le)]

Hi Shri,

It seems that you forgot to attach the screenshot.
If any slides are enclosed in a topic, you can use the following CSS selector to change the topic color:

.ap-toc-entry[data-status="current"][aria-level="1"][aria-expanded="true"]

The most convenient method to use this CSS selector is adding JavaScript to Project Properties > Event tabs:

// change blue by your background color
var css = '.ap-toc-entry[data-status="current"][aria-level="1"][aria-expanded="true"] { background-color: blue;}';

var styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerText = css;
document.head.appendChild(styleSheet);

The result looks like this screenshot:

Regards

[Shri (Shripad)]

@ToanLS

// change blue by your background color var css = ‘.ap-toc-entry[data-status=“current”][aria-level=“1”][aria-expanded=“true”] { background-color: blue;}’; var styleSheet = document.createElement(‘style’); styleSheet.type = ‘text/css’; styleSheet.innerText = css; document.head.appendChild(styleSheet);

Apologies as I forgot to attach screenshot.

Thanks for sharing the JavaScript. It works!