Color of actions in header area

[jvaldman]

How to change color of actions in the header area? Actions do not obey --color-header-text in "generic" and nor it is possible to put something like --color-text-primary into "top-navigation".

[stoeps13]

I see the same, the css class it tertiary xxx, but there is more missing:

I have this config set:

{
    "name": "Top Navigation Logo",
    "type": "com.hcl.connections.custom.style",
    "payload": {
        "style-customization": {
            "generic": {
                "--color-header": "#3A5412",
                "--color-navigation": "#3A5412",
                "--color-navigation-selected": "#1D2A09",
                "--color-footer": "#3A5412",
                "--color-button": "#3A5412",
                "--color-button-hover": "#1D2A09",
                "--color-link": "#3A5412",
                "--color-link-hover": "#1D2A09",
                "--color-third-navigation-text": "#3A5412",
                "--color-third-navigation-selected": "#1D2A09"
            },
            "top-navigation": {
                "logo": {
                    "order": "1",
                    "src": "/files/customizer/stoeps-customizer-css/logo-white.png"
                }
            }
        },
        "cache-headers": {
            "cache-control": "max-age=0"
        }
    },
    "path": "global"
}

The search bar icon gets the green background, the filter icon on the right not. The left side filter "Recently visited" does not get the icon color.

This tertiary navigation is in all apps, but I can't figure out how to change the link colors. Thanks @jvaldman! @caiaga any idea?

[stoeps13]

Hi @jvaldman
I found the class to change the header area:

"--color-tab-text": "#3A5412",
"--color-tab-text-selected": "#3A5412"

As mentioned in the session about Connections 8 migration (https://engage.ug/Engage2.nsf/pages/2023e_Slides/$File/Connections%208%20Upgrade%20&%20Customizing.pdf), the used css classes are stored in: /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/ConnectionsCell/Common.ear/connections.info.war/ui/cnx8-react /ui.css here you can find all used colors and variables and check where they are applied.

[jvaldman]

Thanks Christoph,
however these (--color-tab- text ...) change the colors of "top navigation", not the Actions (top-right).