Power Platform Community Forum Thread Details

Power pages Sign In Page Customization

Hello Everyone,

Currently i am working on the power pages site customization(signup page)here i am struck in the change in the UI part like customizing the background image and the layout for that i am using the content snippet (Account/sign in /Page copy file) to make the UI changes but its not reflecting in the UI

please find the below code for the reference:-

<style>

#content{

height:440px;

background-color:white;

padding:2%;

width:80%;

margin-left:auto;

margin-right:auto;

margin-top:3%;

}

body{

background-image: url();

background-size: cover;

background-repeat: no-repeat;

}

#submit-signal-local{

width:200px;

}

a[title= "Fotgot Your passsword?"]{

margin-left:3%;

border-style: none;

color:#664BBC;

}

</style>

Regards,

Pramod.

Categories:

General topics

Hi @pramodkg05 ,

As per our understanding, you're encountering an issue where customizing the background image and applying custom CSS is not reflecting on the UI. It seems that your CSS is being overridden. Please follow the steps below:

1. Go to the code snippet, create a new file named Account/SignIn/PageCopy if it doesn't exist, and select the HTML type.

<style>

#content{

height="81vh"

}

#content-container{

display:flex

!important;

max-width:100%

!important;

background:white

!important;

padding :

0px !important;

background:url(https://static.wixstatic.com/media/2fe08f_b8a8f043e0644136a3bf19d8ec9b23bef000.jpg/v1/fill/w_1349,h_621,al_b,q_85,usm_0.33_1.00_0.00,enc_auto/2fe08f_b8a8f043e0644136a3bf19d8ec9b23bef000.jpg)

!important;

background-repeat:

no-repeat !important;

}

#mainContent{

background:

rgb(239

239 239 /

40%);

backdrop-filter:

blur(5px)

!important;

/ border-radius:

15px; /

}

#content-container

input{

background:white

!important;

}

#content-container

input::placeholder{

/ background:#a3a3a3 ; /

}

.mb-3 > label{

display:none

!important;

}

.mb-3 > div{

margin:0px

!important;

}

.form-group{

/ margin-left :

10px !important; /

}

.mb-3 input:not(input[type="checkbox"]),.mb-3

button, .mb-3

a {

width:230px

!important;

}

#imgContainer{

width:65%;

height:81vh;

background-repeat:no-repeat ;

background-size:

100% 100%;

}

.login-heading-section {

display:none

!important;

}

#mainContent >

.row{

display:

flex !important;

flex-direction:

column !important;

justify-content:

center !important;

align-items:

center !important;

height: 70.9vh

!important;

}

#idMapyrogo{

width:230px;

}

</style>

Output:-

Thanks!

Inogic Professional Services: Power Platform/Dynamics 365 CRM
An expert technical extension for your techno-functional business needs
Drop an email at crm@inogic.com
Service: https://www.inogic.com/services/
Tips and Tricks: https://www.inogic.com/blog/

Quick Links