1. Kenneth Ballon

    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

    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

      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

    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

    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

      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

    … [Trackback]

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

  6. Kevin

    Is it possible to make the SignIn page the Home or landing page?

    • 17/02/2021

      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

    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

      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

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

  9. Sarath Subramaniam

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

  10. Eric

    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

    Hi, Where did you upload the background image?

    • 01/11/2022

      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

    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

      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


    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


    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

      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.

  14. Abhishek

    Hi, I just wanted to know is it possible to create a custom sign – in page and if so how to do that. Actually we have q requirement from our client where they want to create two different custom sign in pages for two different type of users.
    Any help would be appreciated.

    • 15/05/2024

      Hello Abhishek. Great question. I would always recommend to use Azure AD B2C as the default authentication service with Power Pages – and then you set up the different identity providers directly in Azure AD B2C. This way all your users click the same “sign in” button on the top right corner and get to a modal box that is familiar and let them log in with the identity provider they prefer.

      Another way to go is to set up different identity providers directly in Power Pages. You can customize the sign in page and make sure the users understand the different links to use to log in; for instance “Employee login” and “Partner login”. This way you can also send two different links to the employees and the partner dependent on what service you want them to use.

      Hope that helped 🙂

Leave a Reply

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