How do I change the color of selected topic in TOC?

[Viky T]

I am modifying the Oceanic skin to match our corporate branding. I cannot find a way in the UI to change the color of the selected topic in the Table of Contents. I have changed the hover color. I need the selected topic color to match the hover color. I have found the field in the layoutDiff.css file, but I cannot change it here since they configured the system to now overwrite manual changes made to the layoutDiff.css file whenever you make changes in the UI. I am creating the new template skin for other users who may need to make modifications to the skin for their individual projects.

[Amebr]

I can't find any way through the UI. I'd think there should be a selected-item entry, similar to Index.

If you've found the correct spot in the output css, try adding that entry to a custom css and adding the custom css to your skin under Layout > User Assets

[Peter Grainge]

Like Amber, I have been unable to find anything in the UI. I have asked Adobe.

[Viky T]

This is new to me. Do I just copy those lines from the layoutDiff.css into a new css that I create and modify the color there? I tried that, added it to User Assets and generated the help. I still get the same result with the default color for the selected topic. What am I missing?

[Peter Grainge]

I'll leave Amber to answer that but I did find out something that I have referred to Adobe.

In the file userstyles.css in the output, there is a style .RH-LAYOUT-INDEX-selected-item

What I found is odd but true. 🙂 If you change that, the colour of the TOC changes to the new colour but the index doesn't change from what it was. Next time you generate, it will revert to what is set in the skin editor.

This is being looked at and I will update this thread as soon as I have some more information.

[Viky T]

Peter, I think there should be a tree-item-selected option in the skin under Left Panel for Topic Page. There is a tab-selected option where you can set the color. I think they missed a field in the skin.

[Peter Grainge]

Yes Adobe have realised that.

[Amebr]

Viky, I'd have thought doing what you did would have changed the output, so I'm not sure. You could try adding the style Peter mentioned instead, if it's different from what you found. I'll have a look tonight and see if I can figure out something more helpful.

[Amebr · Accepted solution]

On an unchanged Oceanic skin, adding the following to a custom css file changed the background colour of the selected topic so that it matches the hover colour. It changes the colour whether you're hovering or not.

.rh-layout-INDEX-selected-item {
background-color: aliceblue;
}

If you want to change the background of the text only on hover, the following works; however, the user has to specifically hover over the text, not a blank bit of the row like in your original screenshot.

.rh-layout-INDEX-selected-item:hover {
background-color: aliceblue;
}

This is because of the cascade part of CSS. Very simply, the background colour is set on the text, whereas the hover colour is set on a parent container. The cascade means the more specific setting (on the text) takes precedence on the text when hovering over the "row".

Anyway, give the code a try and see if it makes sense.

[Viky T]

Using .rh-layout-INDEX-selected item in the custom.css file solved the issue for me. I think a defect should be raised on this one. I tried setting the Index | selected-item field in the UI and it still defaults to the default blue from the skin. Users should not have to do a custom.css to resolve this issue.

Thank you both for trying to resolve this issue for me.

[Peter Grainge]

As I indicated, Adobe are looking at this. No need to to report it. 

[Peter Grainge]

Adobe have confirmed there are a number of issues here and they are being worked on for Update 12. Meantime hopefully Amber's solution is working for you. 

After Update 12, you should then reverse that solution and try with the updated skin editor.