replace alfresco share 4.2 login screen logo

Question

In Alfresco share 4.2 enterprise, I want to just replace the default logo from alfresco share login page. Below blog shows how to create a custom login screen.

http://blogs.alfresco.com/wp/developer/2011/11/03/advanced-share-customization-part-2/

However I do not want to create a complete new login page, just want to replace the logo with the same default theme. Could some one suggest how to replace the logo using extensions option.

Answer 1

There are a few methods in which you may replace the default logo, but since you've asked about the extensions option, here's how you would do this...

0) Assume we are creating an AMP, but you can also do steps 1 & 2 in the extensionRoot directory (/tomcat/shared/ - assuming you are using Tomcat)

1) Create a new module extension XML login-extensions.xml under /alfresco/web-extension/site-data/extensions and add the following XML

<extension>
   <modules>
      <module>
         <id>Login Customization Extension Example</id>
         <auto-deploy>true</auto-deploy>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco</targetPackageRoot>
               <sourcePackageRoot>example.login.customizations</sourcePackageRoot>
            </customization>
         </customizations>
      </module>
   </modules>
</extension>

2) Next create a response template resources.get.html.ftl at /alfresco/web-extension/site-webscripts/example/login/customizations/components/head and add the following Freemarker

<@markup id="example-login-resources" action="after" target="resources">

   <link rel="stylesheet" type="text/css" href="${url.context}/res/example/login/customizations/components/head/resources.css" ></link>

</@markup>

In the FTL above, I'm linking to a CSS resource file, you could alternatively just add inline-style css between the @markup tags, but for best practices, assume the CSS is a just a resource file and so...

3) Create a resources.css file located at /META-INF/example/login/customizations/components/head (or alternatively, this is not recommended, but in the exploded Share.war directory, create the file at path /example/login/customizations/components/head) and apply the proper css to change the logo...

The CSS that you want to override:

.theme-company-logo {
    background: url("images/logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 48px;
    width: 428px;
}

Make sure you set the height to match the height of your custom logo.