Highlighted

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

Explorer ,
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

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

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.

Topics

New UI

Views

222

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

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

Explorer ,
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

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

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.

Topics

New UI

Views

223

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
Adobe Community Professional ,
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
Reply
Loading...
Adobe Community Professional ,
Feb 22, 2020

Copy link to clipboard

Copied

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

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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
Reply
Loading...
Explorer ,
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
Reply
Loading...
Adobe Community Professional ,
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.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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
Reply
Loading...
Explorer ,
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
Reply
Loading...