How do you change the font color of the Title (i.e. the text directly to the right of the Alfresco logo) when making a new theme?

[lrsocash]

I am trying to create a theme using the Alfresco Community Edition. I know that the LESS variable @shareTitleBG changes the background color of that section, but I am changing that background color to a darker color which makes the text color too dark to see. Is there a LESS variable that I can change to affect the title font color?

Any feedback would be greatly appreciated. Thanks!

header title‌ title color‌ colors‌ fonts‌ font-color‌

[angelborroy]

Probably this can help: https://flex-solution.com/theme/

[lrsocash]

Thanks for the suggestion. However, I have already used that tool in the past and it only affects the topmost menu bar, and it does not affect the specific piece of text that I am trying to change.

[lrsocash · Accepted solution]

UPDATE:

I was able to solve this eventually by looking at the code using the developer tools on the web browser. There are two pieces of code you need to put into the theme's XML document (path: alfresco-community\tomcat\webapps\share\WEB-INF\classes\alfresco\site-data\themes\"YOUR_THEME").

1) When changing the title's font color for created sites, put this piece of code anywhere in between the <less-variables> ... </less-variables> tags within the XML document:

     @link-title-font-color: your color; (ex: "@link-title-font-color: #FFFFFF;" for white font)

2) When changing the title's font color for the home dashboard and other pages that are not created sites, put this code in between the <less-variables> ... </less-variables> tags within the XML document:

     .alfresco-share h1.alfresco-header-Title .alfresco-header-Title__text.has-max-width

     {

        color: your color !important; (ex: "color: #000000 !important;" for black font)

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        display: inline-block;

     }

NOTE: the "....alfresco-header-Title__text.has-max-width" part has two underline characters (i.e. '_'), not just one. Also, the only part of the code that you need to change is the 'your color' part. Finally, don't forget the "!important" tag after your color because that allows your piece of code to override the original color.

Hope this helps anyone who may have had the same problems as me.