Change favicon and footer image on changing theme

cancel
Showing results for 
Search instead for 
Did you mean: 
bip1989
Established Member

Change favicon and footer image on changing theme

Jump to solution

We are doing branding of our application and after reading documentation and suggestions found on this forum, we implemented a theme. 

Theme documentation

Everything works but favicon and footer image remains same as default (alfresco favicon).

Is there a way to fix this issue? We tried messing up with css and stuff but it didn't work. 


 

1 Solution

Accepted Solutions
abhinavmishra14
Advanced

Re: Change favicon and footer image on changing theme

Jump to solution

For using dynamic changes in themes, we need to rely on themeId and prepare the resource path accordingly. You can get the themeId and put it in the model object and use it in the header template or access the themeId in header template from rootscoped object "${theme}".

https://docs.alfresco.com/5.2/references/APISurf-rootscoped.html

https://docs.alfresco.com/5.2/references/APISurf-templates.html

You can extend the resources webscript in your share module using recommended share extension point where  targetPackageRoot would be 'org.alfresco.components.head', and update the "resources.get.html.ftl" template's "favicons" markup directive to provide theme specific favicon paths.

<@markup id="custom-favicons" target="favicons" action="replace" scope="global">
  <link rel="shortcut icon" href="${url.context}/res/themes/${theme}/images/${msg(theme + ".favicon")}" type="image/vnd.microsoft.icon" />
  <link rel="icon" href="${url.context}/res/themes/${theme}/images/${msg(theme + ".favicon")}" type="image/vnd.microsoft.icon" />
</@>

For footer images, you have to update "presentation.css" for every theme you are creating and add community/enterprise version specific css which will take effect when you change the theme and footer images will change as per css definition.

Example:

.footer-ent .copyright.copyright {
	margin: 0 auto;
	width: 449px;
	display: block;
}

.footer-ent .copyright.copyright img {
	content:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

.footer-ent .copyright.copyright img:after {
	background:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

.footer-com .copyright.copyright {
   display: inline-block;
   line-height: 22px;
   padding: 2px;
}

.footer-com .copyright.copyright img {
	content:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

.footer-com .copyright.copyright img:after {
	background:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

You can find custom theme related info here as well: https://hub.alfresco.com/t5/alfresco-content-services-forum/alfresco-background-color-change/td-p/30...

 

 

 

 

~Abhinav
(ACSCE, AWS SAA, Azure Admin)

View solution in original post

4 Replies
abhinavmishra14
Advanced

Re: Change favicon and footer image on changing theme

Jump to solution

For using dynamic changes in themes, we need to rely on themeId and prepare the resource path accordingly. You can get the themeId and put it in the model object and use it in the header template or access the themeId in header template from rootscoped object "${theme}".

https://docs.alfresco.com/5.2/references/APISurf-rootscoped.html

https://docs.alfresco.com/5.2/references/APISurf-templates.html

You can extend the resources webscript in your share module using recommended share extension point where  targetPackageRoot would be 'org.alfresco.components.head', and update the "resources.get.html.ftl" template's "favicons" markup directive to provide theme specific favicon paths.

<@markup id="custom-favicons" target="favicons" action="replace" scope="global">
  <link rel="shortcut icon" href="${url.context}/res/themes/${theme}/images/${msg(theme + ".favicon")}" type="image/vnd.microsoft.icon" />
  <link rel="icon" href="${url.context}/res/themes/${theme}/images/${msg(theme + ".favicon")}" type="image/vnd.microsoft.icon" />
</@>

For footer images, you have to update "presentation.css" for every theme you are creating and add community/enterprise version specific css which will take effect when you change the theme and footer images will change as per css definition.

Example:

.footer-ent .copyright.copyright {
	margin: 0 auto;
	width: 449px;
	display: block;
}

.footer-ent .copyright.copyright img {
	content:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

.footer-ent .copyright.copyright img:after {
	background:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

.footer-com .copyright.copyright {
   display: inline-block;
   line-height: 22px;
   padding: 2px;
}

.footer-com .copyright.copyright img {
	content:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

.footer-com .copyright.copyright img:after {
	background:
		url("/share/res/js/alfresco/footer/css/images/demo-blue-logo.png")
}

You can find custom theme related info here as well: https://hub.alfresco.com/t5/alfresco-content-services-forum/alfresco-background-color-change/td-p/30...

 

 

 

 

~Abhinav
(ACSCE, AWS SAA, Azure Admin)
bip1989
Established Member

Re: Change favicon and footer image on changing theme

Jump to solution

This worked. Thnx for help

EddieMay
Alfresco Employee

Re: Change favicon and footer image on changing theme

Jump to solution

Hi @bip1989 

Thanks for updating your post.

Kind regards,

Digital Community Manager, Alfresco Software.
Problem solved? Click Accept as Solution!
édnei
Member II

Re: Change favicon and footer image on changing theme

Jump to solution

Hello.
Is it possible to change the email template (activities-email.ftl) logo dynamically according to the theme?