How To Modify Alfresco Share Login Page?

Question

I've been messing around with this for some time, but I can't seem to find the exact file I need to change in order to get the Share login page to look how I want.

Basically I wanted to do was:

• Change the logo that appears (done..I modified the C:\Alfresco\tomcat\webapps\share\themes\default\login.css)
• Get rid of the copyright text (done..I modified the C:\Alfresco\tomcat\webapps\share\themes\default\login.css)
• Center the logo, the input boxes and the "login" button
• Remove the "Alfresco >> Login" title at the top left of the page.

I've been looking around on Google, and I was surprised to not see more people having tried to do this. Does anyone have any experience with this or know what I might need to do to get the Share login page to look exactly how I want it?

Btw, here is my login.css page now if it matters...

.login-panel
{
   text-align: left;
}

.login-panel input
{
   border: 1px solid #C5D6E2;
   padding: 2px;
   font-weight: normal;
   font:99% arial,helvetica,clean,sans-serif;
}

.alfresco-share .sticky-wrapper
{
   background-color: #B4B4B4;
}

.yui-panel-container.shadow .underlay
{
   display: none;
}

.yui-skin-sam .yui-panel
{
   border-style: none;
}

.login-panel
{
   width: 502px;
   height: 289px;
   background: transparent url("./images/loginbg.png") no-repeat;
   padding-left: 28px;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #515354;
   visibility: hidden;
}

.login-button
{
   background-color: #f0f0f0;
}

.login-copyright
{
   font-family: Arial,Helvetica,sans-serif;
   font-size: 0px;
   font-weight: normal;
   color: #ffffff;
}

.login-logo
{
   position: absolute;
   top: 16px;
   height: 64px;
   width: 450px;
   background: transparent url("./images/newLogo.gif") no-repeat;
}

Solution 1

I think you need to change the slingshot-login.ftl which is in alfresco/templates/org/alfresco/global/slingshot-login.ftl

Just copy that file to the web-extension and change the things you like :)

Solution 2

Perhaps you are interested in a extensions-based approach. Extension modules is a new feature available since 4.0 version.

You can do a lot of customization by taking advantage of this feature, but in order to do what you need to do, you can simply provide an extra CSS file which overrides login.css (regardless the theme applied) on every request. If you are interested, this post will be useful to you.

Hope it helps.