Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

Explorer ,
Feb 20, 2020 Feb 20, 2020

Copy link to clipboard

Copied

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.

Change color of selected topic in TOC.png

TOPICS
New UI

Views

323

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Feb 25, 2020 Feb 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...

Likes

Translate

Translate
Adobe Community Professional ,
Feb 21, 2020 Feb 21, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 22, 2020 Feb 22, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

Yes Adobe have realised that.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 25, 2020 Feb 25, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 25, 2020 Feb 25, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 25, 2020 Feb 25, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 26, 2020 Feb 26, 2020

Copy link to clipboard

Copied

LATEST

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp