34 Comments

  1. Kenneth Ballon
    26/05/2020
    Reply

    thanks for this guide. it is really great.

    though my challenge is that the new portal management is that it doesn’t have now the Account/Signin/PageCopy. I’m a little bit lost.

  2. Kenneth Ballon
    26/05/2020
    Reply

    I think I got it figured out. Additional question, did you add an HTML through Javascript to achieve that look or did you just do this purely in CSS? Thanks

    • 29/06/2020
      Reply

      Hello Kenneth. Good to know you figured it out. Please send an image or link to the finished page if possible.
      I did not add any HTML trough JavaScript. this is purely CSS. But your could add some HTML to the Page Copy element if you wanted. Cheers!

  3. Suneel
    11/06/2020
    Reply

    How to create custom sign-in page (The sign-in page creating to one new page and add a image in background).

  4. Alvin Moon
    25/01/2021
    Reply

    I am working on a Self-service portal. I have been trying to make it look like a modern website. You seem to be an expert in this subject. Do you do any consulting work?

    • 15/02/2021
      Reply

      Hello Alvin. Yes, I do consulting work. In fact that’s what I do the most these days. What do you struggle with the most? Planning a blog series on the topic, so any insight into what you find most challenging is much appreciated. Thank you 🙂 And – keep at it! It get’s easier..

  5. 05/02/2021
    Reply

    … [Trackback]

    […] Informations on that Topic: ulrikke.akerbak.com/2020/02/16/customize-the-sign-in-and-registration-page-in-power-app-portals/ […]

  6. Kevin
    15/02/2021
    Reply

    Hi,
    Is it possible to make the SignIn page the Home or landing page?
    Regards.

    • 17/02/2021
      Reply

      Hello Kevin. Yes, absolutely. If you follow these instructions all users will be automatically redirected to the sign in page from whatever page they try to access. Once they have successfully logged in they will be redirected to the original page they tried to access. Hope it helps.

  7. Derek
    19/03/2021
    Reply

    Hi, After adding the content snippet and adding the class, how do I customize the sign in page? I mean for example, in my Sign in page I have a span where “Remember me” text is added. I want to move this text to somewhere else. How do I achieve that?

    • 19/04/2021
      Reply

      Hello Derek.
      You can customize the page with CSS and Javascript/jQuery. Moving elements around is best with jQuery and editing the styling is best with CSS. I will add the CSS I have used on my site as an example on this blog article for you to take inspiration from. Hope it helps. Cheers!

  8. Rosalyn Denomme
    16/08/2021
    Reply

    keep us up to date like this.Thanks for sharing.

  9. Sarath Subramaniam
    10/05/2022
    Reply

    Wow! This is a life saver and a real way to impress!!
    Thank you soo much.

  10. Eric
    17/05/2022
    Reply

    Hello! Where exactly did you input the CSS to edit the sign in page? Did you do it in the value of the Account/SIgnIn/PageCopy value? Or some place else? Thank you for this guide by the way. It is exactly what we are looking for!

  11. shyam
    19/08/2022
    Reply

    Hi, Where did you upload the background image?

    • 01/11/2022
      Reply

      Hello Shyam. Thank you for leaving a comment and sorry that it took me so long to answer. I have a blog post that shows you how to upload new files to “Web Files”. You can apply the same approach for uploading images. The new Power Pages design workspace also has a great feature that allows you to upload pictures and place them directly on a page that you can use to upload images. https://ulrikke.akerbak.com/2022/09/23/browser-icon-favicon-power-pages/

  12. robert
    06/10/2022
    Reply

    HI,
    How do you add exta elements, like text, boxes… I can`t see these actions in your css, how do you add them?

    • 01/11/2022
      Reply

      Hello Robert.
      The boxes and other elements are added as HTML in the same Content Snippet taht hold the script. Then I add CSS styling to these elements. How to create HTML elements and style using CSS you can learn from other resources, like https://www.w3schools.com/.
      Would you like to see more on how to write HTML and CSS on my blog?

  13. 12/09/2023
    Reply

    Hi!

    It seems to me that if you want to do a minor change on, for example the register page, and want to add the css directly to it, you could skip the

    $(“#content-container”).addClass(“signinpage”);

    I would not in general recommend it for large sites where we for sure would use custom css file(s)) though.

    Instead just style the content snippet where you would put the . tag.

    This example works great as far I can tell (the real test here is that the style to .col-md-6 does not mess with other parts of the site, nor on the same page, but stick to the register area). This is put in the value field in the content snippet Account/Register/PageCopy:

    #ContentContainer_MainContent_MainContent_LocalLogin {
    width: 50%!important;
    background-color: floralwhite;
    margin-bottom: 30px;
    }
    .col-md-6 {
    width: 100%!important;
    }
    #ContentContainer_MainContent_MainContent_RegisterLocalFormHeading .xrm-attribute-value {
    display: none;
    }
    #ContentContainer_MainContent_MainContent_RegisterLocalFormHeading::after {
    content: ‘Opprett lokal brukerkonto’;
    }
    #ContentContainer_MainContent_MainContent_RegisterExternalLabel .xrm-attribute-value {
    display: none;
    }
    #ContentContainer_MainContent_MainContent_RegisterExternalLabel::after {
    content: ‘Logg inn med ekstern konto’;
    }

    Any thoughts Ulrikke? Anything dangerous with this approach other than the good habits of using custom css files for styling?

    • 11/11/2023
      Reply

      Hi Ole Einar. You are absolutely right, this would also work if you don’t have a custom CSS file on your site – or if you simply wanted to make sure that the changes you make only apply to this page. Thank you for sharing your ideas.

Leave a Reply

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