07-13-2018 06:52 AM
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
07-25-2018 06:17 AM
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.
07-16-2018 01:20 AM
Probably this can help: https://flex-solution.com/theme/
07-16-2018 05:09 AM
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.
07-25-2018 06:17 AM
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.
Explore our Alfresco products with the links below. Use labels to filter content by product module.