Remember, PowerApps Portals protected pages cannot be edited directly. We will have to use JQuery/JavaScript to find the IDs of the protected pages and then we will assign our own classes to them. 

Go to your PowerApps Portals login page, right-click on an empty space, and then click inspect. Take a look at the IDs on the page. Login/Registration/invitation page all follow the same structure, so if you have done a design for one, you can replicate it to another protected page. 

PowerApps Portals log-in, Editing PowerApps Portals Log-in/registration pages

Navigate to “Content Snippets” and create a new content snippet by clicking on “New” at the top. 

PowerApps Portals log-in, Editing PowerApps Portals Log-in/registration pages

1. The “Name” of the content snippet needs to match with the ones below:

  • Account/SignIn/PageCopy
  • Account/Register/PageCopy
  • Account/ChangePassword/PageCopy

2. Under “Website“, choose the portal that you are currently using.

3. In the “Value” section we are going to ram lots of JQuery/JavaScipt statements in. It’s easier than it looks.

PowerApps Portals log-in, Editing PowerApps Portals Log-in/registration pages

Go back to your Portal’s login page and open up the developer console. In the console type: $(“#content-container”).addClass(“signinpage”);

Go to the inspector and see if the class has been added to the HTML Element

PowerApps Portals log-in, Editing PowerApps Portals Log-in/registration pages

If you got this to work, you will now have full control over this specific container. 

I assume you already know how to write simple CSS

In Styles.css

PowerApps Portals log-in, Editing PowerApps Portals Log-in/registration pages

If you got this to work, you will now have full control over this specific container. 

In Styles.css add a new class and call it .signinpage 

PowerApps Portals log-in, Editing PowerApps Portals Log-in/registration pages

You can add your custom attributes to the CSS classes which will take immediate effect after the portal cache is reset.

Don’t get frustrated if you don’t see the change immediately. 

It would be best if you always used the built-in browser console to test your statements first and clear your Portal’s cache frequently.

Note: to clear your browser’s cache use the following URL:
(Portal URL)/_services/about 

Cheat Sheet

My login page JQuery statements:

<script>

$(document).ready(function() {

$(“#content-container”).addClass(“signinpage”);
$(“#external-login-heading”).addClass(“HideMe”);
$(“button[name=’provider’]”).addClass(“HideMe”);
$(‘div.col-md-6’).first().addClass(“signincol”);
$(‘div.col-md-6’).last().addClass(“HideMe”);
$(“#content”).addClass(“loginbox”);
$(“#content-container div ul li a”).addClass(“loginNav”);
$(‘div.signincol form div fieldset div’).last().addClass(“signinbuttons”);
$(‘div.signinbuttons button’).addClass(“xsignin”);
$(‘div.signinbuttons a’).addClass(“xforgot”);
});

</script>

CSS styles of the login page:

.HideMe{
display: none;
}
.signinpage{
display:-ms-flexbox;
display:-webkit-flex;
display:flex;

-ms-flex-align:center;
-webkit-align-items:center;
-webkit-box-align:center;

align-items:center;
justify-content:center;
}
@media (min-width: 1200px){
.signinpage {
width:1300px;
height:53.8vh;
 
}
}
#content-container.signinpage .page-content.row .row .col-md-6 button.btn[name=’provider’] {
display:none;
}
#content-container.signinpage .page-content.row .row .col-md-6 .form-group .col-sm-8 {
width:100%;
}
.signincol{
Width:100%;
}
.signinbutton{
display:contents;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color:#006567;
background-color:#fff;
border:0pxsolid#fff;
border-bottom-color:#398746;
cursor:default;
margin:0;
}
.loginNav{
margin:0;
padding:0px10p;
padding-bottom:10px;
padding-top:10px;
padding-left:0;
float:left;
}
.loginbox{
border:solid2px#317b84;
padding:35px;
}
#local-login-heading{
text-align:center;
}
.signinbuttons{
display:contents;
}
.xsignin{
width: 200px;
margin:0auto;
display:inline;
}
.xforgot{
width: 200px;
margin:0auto;
display:inline;
}