TOC customization via CSS

[markwatkins]

This is a TOC current slide item question specifically.

I'm currently hacking at the TOC to match a design.

My first attempt to make the TOC background(s) transparent and move the whole thing into place was thru javascript in Slide 1.

But got stuck (for loops didn't work). So now I'm trying with CSS.

My secondary CSS (imported on line 1 of CPLibraryAll.css) looks like this:

.tocEntryContainerStyle {

    background-image: none !important;

    background-color: rgba(255,255,255,0) !important;

}

.tocExpandCollapse{

visibility: hidden;

}

#toc {

top: 125px !important;

height: 860px !important;

left: 0px !important;

background-image: none !important;

}

#tocTitle {

background-image: none !important;

}

#tocHeading {

display: none;

}

It makes it look like this:

I would like to set the background of the current slide .tocEntryContainerStyle, "Introduction" in this case, to a visible color, but I can't seem to track it down in my inspect window. Any ideas?.

Advice? Solutions?

Is this even gonna be manageable with 100s of republishes?

Thanks in advance!

[markwatkins]

After some research have found that the CPM.js file sets tocProperties like headingColor and activeColor with a hex (defined by the user in the toc formatting tools) and an alpha value(not provided to the user). One can directly edit those alpha values if one chooses, though. Perhaps a script might be written to apply new css and js after publishing... TLCMediaDesign​?

[markwatkins]

Well, just rediscovered the TOC Settings gradient color option, in which, yes, there's Alpha control, so CPM edits are not required after all. Although it seems very buggy and unreliable.