Skip to main content
V
Viky T
Inspiring
February 20, 2020
Answered

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

  • February 20, 2020
  • 10 replies
  • 809 views

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.

This topic has been closed for replies.
Correct answer Amebr

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.

10 replies

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
February 26, 2020

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.

 

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
February 25, 2020

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

 

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
A
Community Expert
AmebrCommunity ExpertCorrect answer
Community Expert
February 25, 2020

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.

V
Viky TAuthor
Inspiring
February 25, 2020

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.

A
Community Expert
AmebrCommunity Expert
Community Expert
February 24, 2020

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.

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
February 24, 2020

Yes Adobe have realised that.

 

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
V
Viky TAuthor
Inspiring
February 24, 2020

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
Community Expert
Peter GraingeCommunity Expert
Community Expert
February 24, 2020

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.

 

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
V
Viky TAuthor
Inspiring
February 24, 2020

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
Community Expert
Peter GraingeCommunity Expert
Community Expert
February 22, 2020

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

 

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
A
Community Expert
AmebrCommunity Expert
Community Expert
February 21, 2020

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices