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?

cancel
Showing results for 
Search instead for 
Did you mean: 
lrsocash
Active Member

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?

Jump to solution

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‌

Alfresco Share Title Text

1 Solution

Accepted Solutions
lrsocash
Active Member

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?

Jump to 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.

3 Replies
angelborroy
Expert

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?

Jump to solution

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

Software Engineer in Alfresco Search Team.
lrsocash
Active Member

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?

Jump to solution

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
Active Member

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?

Jump to 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.