topic Re: 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? in Alfresco Forum

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 — Fri, 13 Jul 2018 13:52:00 GMT

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 chan

Re: 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?

angelborroy — Mon, 16 Jul 2018 08:20:10 GMT

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

Re: 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 — Mon, 16 Jul 2018 12:09:19 GMT

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.

Re: 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 — Wed, 25 Jul 2018 13:17:16 GMT

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.