Power App Portal修改登录页(登录页太丑怎么办)

本文主要是介绍Power App Portal修改登录页(登录页太丑怎么办)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

portal的标准登录页太丑怎么办

原：

 优化后：

 在Portal管理页--》内容片段中新建：

//登录页

Account/SignIn/PageCopy

//注册页

Account/Register/PageCopy

//邀请页

Account/RedeemInvitation/PageCopy

//忘记密码

Account/ForgotPassword/PageCopy

如图所示：

登录代码片段：

<script>
  $("#content-container").removeClass("container").addClass("fluid-container signinpage");
  $("#content-container #content").addClass("container");
  $("#content-container #content .page-content").addClass("page-content row justify-content-between align-items-center");
  $("#content-container #content .page-copy").addClass("page-copy col-md-6 col-lg-7 g-mb-100");
  $("#content-container").append("<div id='left-container'></div>");
//这个是左上角图标logo
$("#content-container").append("<img src='~/lefttop.png' id='login_img_c'></img >");
  $("#content-container #left_container").addClass("container");
  $("#Username").ready(function(){
        $("#Username").attr("placeholder","Username");
  });
   $("#PasswordValue").ready(function(){
        $("#PasswordValue").attr("placeholder","PasswordValue");
  });
$("#content > #mainContent > .row > .col-md-6 > form >.form-horizontal > .form-group > .col-sm-8 > a").ready(function(){
        $("#content > #mainContent > .row > .col-md-6 > form >.form-horizontal > .form-group > .col-sm-8 > a").attr("class","")
  });
$("#login_img_c").ready(function() {
$("#login_img_c").css({width:"10%",height:"10%",position:"absolute",right :"90%",bottom:"90%"});
})

</script>

除输入框外与忘记密码超链接外，其他界面相同，

然后我们通过新增的class写css样式然后将它们上传到web资源；注：不要修改到其他页面了。

 参考css，欢迎讨论

 css：

#content-container.signinpage {background-image: url(~/loginbackbround.png);background-size: 100% 100%;height: 100vh;padding-top: 5%;}
#content-container.signinpage #content {display: inline-block;width: 35%;background-color: #fff;border-radius: 0px 5% 5% 0px;}
#content-container.signinpage #left-container {width: 35%;height: 80%;background-image: url(~/loginbackgroundimg.jpg);background-size: 100% 100%;border-radius: 5% 0px 0px 5%;margin-left: 16%;float: left;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6 {width: 100%;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>.form-group>.col-sm-8 {width: 90%;}
#local-login-heading {width: 90%;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>.form-group>.col-sm-8>input {border-radius: 50px;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form {margin-left: 10%;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>.form-group>label {display: none;}
#Username::placeholder {color: #ccc;}
#PasswordValue::placeholder {color: #ccc;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>.form-group>.col-sm-offset-4 {margin-left: 0px;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>.form-group>.col-sm-8>a {float: left;position: absolute;bottom: 50px;left: 305px;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>.form-group>.col-sm-8>#submit-signin-local {width: 100%;border-radius: 50px;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>#external-login-heading {text-align: center;padding: 0px;font-size: 15px;width: 90%;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>button {width: 90%;border-radius: 50px;background-color: #fff;color: #2f5fef;}
#content-container.signinpage #content>#mainContent>.row>.col-md-6>form>.form-horizontal>button :hover {background-color: #2f5fef;color: #fff;}
#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6>.form-horizontal {margin-left: 0%;}
#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6 {width: 100%;}
#ContentContainer_MainContent_MainContent_ExternalLogin>.col-md-6 {width: 100%;}
#ContentContainer_MainContent_MainContent_ShowEmail>.form-group>label {display: none;}
#ContentContainer_MainContent_MainContent_ShowEmail>.form-group>.col-sm-8 {width: 90%;}
#EmailTextBox {border-radius: 50px;}
#EmailTextBox::placeholder {color: #ccc;}
#ContentContainer_MainContent_MainContent_ShowUserName>.form-group>label {display: none;}
#ContentContainer_MainContent_MainContent_ShowUserName>.form-group>.col-sm-8 {width: 90%;}
#UserNameTextBox {border-radius: 50px;}
#UserNameTextBox::placeholder {color: #ccc;}
#content-container.signinpage #content>#mainContent>form>#ContentContainer_MainContent_MainContent_SecureRegister>.row>#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6>.form-horizontal>.form-group>label {display: none;}
#PasswordTextBox {border-radius: 50px;}
#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6>.form-horizontal>.form-group>.col-sm-8 {width: 90%;}
#PasswordTextBox::placeholder {color: #ccc;}
#ConfirmPasswordTextBox {border-radius: 50px;width: 100%;}
#ConfirmPasswordTextBox::placeholder {color: #ccc;}
#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6>.form-horizontal>.login-heading-section {text-align: center;width: 90%;}
#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6>.form-horizontal>.form-group>.col-sm-offset-4 {margin-left: 0px;}
#ContentContainer_MainContent_MainContent_LocalLogin>.col-md-6>.form-horizontal>.form-group>.col-sm-offset-4>#SubmitButton {width: 100%;border-radius: 50px;}
#ContentContainer_MainContent_MainContent_ExternalLogin>.col-md-6>.form-horizontal>.login-heading-section {text-align: center;padding: 0px;font-size: 15px;margin-left: 0px;width: 90%;}
#ContentContainer_MainContent_MainContent_ExternalLoginButtons>button {width: 90%;border-radius: 50px;background-color: #fff;color: #2f5fef;margin-left: 0%;}
#ContentContainer_MainContent_MainContent_ExternalLoginButtons>button:hover {background-color: #2f5fef;color: #fff;}
#content-container.signinpage #content>#mainContent>form {margin-left: 10%;}
#content-container.signinpage #content>#mainContent>form>.form-horizontal>.login-heading-section {text-align: center;width: 90%;padding-left: 0px;margin-top: 10px; padding-bottom: 30%;border: 0px;}
#content-container.signinpage #content > #mainContent > form > .form-horizontal >.form-group > label{display: none;}
#content-container.signinpage #content > #mainContent > form > .form-horizontal >.form-group > .col-sm-10{width:90%;margin-left: 0px;}
#InvitationCode{border-radius: 50px;}
#InvitationCode::placeholder {color: #ccc;}
#content-container.signinpage #content > #mainContent > form > .form-horizontal >.form-group > .col-sm-offset-2 > #submit-redeem-invitation{width:100%;border-radius: 50px;}
#content-container.signinpage #content>#mainContent>form>.form-horizontal>.forgot-password-heading {text-align: center;width: 90%;padding-left: 0px;margin-top: 10px;padding-bottom: 30%;border: 0px;}
#content-container.signinpage #content>#mainContent>form>.form-horizontal> .form-group label{display: none;}
#content-container.signinpage #content>#mainContent>form>.form-horizontal> .form-group >.col-sm-10{width:90%;margin-left: 0px;}
#Email{width: 100%;border-radius: 50px;}
#Email::placeholder {color: #ccc;}
#content-container.signinpage #content>#mainContent>form>.form-horizontal> .form-group > .col-sm-offset-2 > #submit-forgot-password{width:100%;border-radius: 50px;}
#ValidationSummary1,#loginValidationSummary,#redeemInvitation-validation-summary{width: 90%;}

 参考：https://ulrikke.akerbak.com/2020/02/16/customize-the-sign-in-and-registration-page-in-power-app-portals/

这篇关于Power App Portal修改登录页(登录页太丑怎么办)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！