26 thoughts on “How to customize the Alfresco Share login page without writing code for the lightweight theme”

  3. Martin Dunn -

    Worked it out. Edit the presentation.css in your theme – section .alfresco-guest .sticky-wrapper as follows (amend the image path as required)

    .alfresco-guest .sticky-wrapper
    {
    background: url(‘images/alfresco-logo-bg.jpg’) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    Reply
  4. Karen -

    Looks great!!! Thank for the explanation.
    Our login button on the front page is bright green….
    How do i change this?

    Reply
    • Francesco Corti
      Francesco Corti -

      Hi Dylan,

      I discourage to do this because it’s a clear violation of the legal copyright.
      If you want to do it, you have to change the content of the theme and not the images or the css.

      Reply
  7. khoul -

    I want to make the authentication on an other server. I configured the external authentication : the authentication chain in alfresco-global.properties and
    the modification in share-config-custom.xml But I still have the 403 error. I will be thankfull if you help me to resolve this problem.

    Reply
    • Francesco Corti
      Francesco Corti -

      Hi Khoul,
      I suggest you to separate the authentication chain from the customization of the login page. They are two different topics.
      In this article the topic is about the customization of the login page. 😉

      Reply
  9. Abolade Olajohn -

    I realized that editing the codes require restart of the Alfresco. It may not work with just refresh of the page. It did not work when I refreshed but the background and the colour changes come alive after refresh. 4.2.f on windows 8.

    Reply
  10. Trevor Townsend -

    Excellent plain and simple advice. However, it appears that Alfresco 5.0.a CE does not employ/deploy a background image on the login page. I’m trying to figure out how to make it do that, but so far I’m coming up short. Any advice?

    Reply
    • Francesco Corti
      Francesco Corti -

      Hi Trevor, thank you for the feedback. Thank you for coming back with a tested solution for that problem. The community will be grateful.
      I would suggest to try to use a different theme instead of the default one. This because probably another theme could have a background image.

      Reply
  11. Driss Chelouati -

    Hello Francesco,

    First i wanted to thank you about your awesome work about Alfresco, it is very helpful!

    Did someone come up with a solution for newer versions of Alfresco community (5.0c /5.0d)? I need to customize the share login page too. Any advice?

    Reply
      • Driss Chelouati -

        Hello Francesco, thank you for you link, i understand it allows to create a custom login page for Alfresco 5. But since my technical knowledge is still limited (but iam learning very fast thanks to people like you who contribute to the community :D), i cant see where to implement code that will control the insert of the backgound image and the company logo. Is it in the Html section of the code?

        Tutorials Login

        Tutorials Login

        Username:
        Password:

        How should i proceed?

        Thank you very much for your advice!

        Reply
        • Francesco Corti
          Francesco Corti -

          Hi Driss,
          Thank you for the feedback.
          You have to ways to reach your goal:
          1) Change the HTML source code.
          2) Work on the CSS.
          The first path is easier but less “clean”.
          Probably you could try to start from there…

          Reply
          • Driss Chelouati -

            Hello Francesco,

            well, thanks to you, i think iam getting it. If i understood what you just said, i can succeed modifying the html directly in the overriding login page, but that would be a kind of mess, since its not very “clean” to do that as a developper, right? i should work on the css to implement those changes (cleaner approach), so is it the login.css (tomcat/webapps/share/components/guest) file that i have to edit?

            It also seems that there is no image declared at all in the “tutorials login” page, am i right? is it made to give us freedom implementing whatever image(s) we want?

            Thank you again Alfresco master! Grazie mille!

  12. Francesco Corti
    Francesco Corti -

    Hi Driss,

    Yes, what you say is correct for me.
    Unfortunately there is no a “pure approach” in customizing the login page and logos but, as an open source framework (please remember that Alfresco is more closed to a “framework” instead of a “product”), the source code is completely available.
    One of the biggest improvement of the Alfresco 5 is the Aikau framework and with it you can easily develop your own page… this is definitely cleaner. 😉
    Cheers.

    Reply
  13. Manuel Neira Embus -

    Hi Driss,

    I think that is a little bit late…
    But maybe this could be useful for new users of alfresco 5++ versions.

    I follow the next steps to customize my login page:

    1.) Desing or use some images as Mr. Francesco recommends (size in pixels).
    2.) edit your presentation.css /webapps/share/themes/(custom theme or default theme) as follows (same steps that Mr. Martin Dunn share with us a long time ago):
    .alfresco-guest .sticky-wrapper
    {
    background: url(‘images/alfresco-logo-bg.png’) no-repeat center center fixed;
    }
    3.) restart alfresco and make sure that you are using the custom theme or default theme that you modify in step 2.

    That’s all!

    I want to add some other customization if you don’t like the footer “Sample + Smart” that appears in 5++ versions of alfresco community you could change in this way:

    1.) locate the next directory:
    /webapps/components/images/
    and put the png image that you want to use, I recommend a size of 180px x 180px.
    2.) Go to:
    /webapps/components/tradeMarkLogo/
    and edit tradeMarkLogo.css as follows.

    .theme-trademark
    {
    height: 180px;
    width: 180px;
    background: transparent url(../images/NameOfYourImage.png) no-repeat;
    position: absolute;
    bottom: 15px;
    right: 15px;
    }
    3.) Restart alfresco service.

    Here you can see my current alfresco login.
    https://goo.gl/zT5Cmk

    Thank you Mr. Francesco for your help.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.