Customer Service forum

How to modified sign in page - Dynamics Portal

(0) Share

Report

Posted on by xcode17

462

Hi,

I want to modified 3 button in the Sign In by using external account. Customer didnt like the default button below.

the want to change the button using the image

I already upload the file using web files. any idea for this?

and also, after customer login using facebook, client want to have validator to check, whether email already registered under contact or not. how to achieve this?

please help.

Categories:

Portals

I have the same question (0)

All responses (5)

Answers (2)

LeoAlt 16,331 Moderator on at

Like (0)

Report

RE: How to modified sign in page - Dynamics Portal

Hi xcode17,

I‘m glad that your problem has been solved and thank you for sharing another solution!

Have a good day.

Best Regards,

Leo

Was this reply helpful? Yes No
Suggested answer

xcode17 462 on at

Like (1)

Report

RE: How to modified sign in page - Dynamics Portal

Hi Leo,

Finally, I'm able to do it, by creating another css and upload as webfile. many thanks for your guide.

here is my css

button[id="https://login.windows.net/e535d8b6-9758-46e7-a2ef/"].btn.btn-primary.btn-line{

background-image:url("azure.png");

background-repeat: no-repeat;

background-position: center center;

background-size: contain;

height: 80px;

background-color:transparent;

border: none;

color:transparent;

}

button[id="https://accounts.google.com"].btn.btn-primary.btn-line{

background-image:url("google.png");

background-repeat: no-repeat;

background-position: center center;

background-size: contain;

height: 80px;

background-color:transparent;

border: none;

color:transparent;

}

button[id="Facebook"].btn.btn-primary.btn-line{

background-image:url("facebook.png");

background-repeat: no-repeat;

background-position: center center;

background-size: contain;

height: 80px;

background-color:transparent;

border: none;

color:transparent;

}

Was this reply helpful? Yes No
xcode17 462 on at

Like (0)

Report

RE: How to modified sign in page - Dynamics Portal

Hi Leo,

I tried your custom code in content snippets. it works, only if you have one button. after I tried in my scenario above (3 buttons), the code is not works.

here is the result after try your code.

here is my code

<script>

$(document).ready(function() {

var imgURL = 'facebook.png';

var GoogleURL = 'google.png';

$('#Facebook').css('background-image', 'url("'+imgURL+'")');

$('#Facebook').css('background-repeat', 'no-repeat');

$('#Facebook').css('background-position', 'center center');

$('#Facebook').css('background-size', 'contain');

$('#Facebook').css('height', '80px');

$('#Facebook').css('background-color','#FFFFFF');

$('#Facebook').css('border','none');

$('#Facebook').css('color','transparent');

var btn = $('button[value=https://accounts.google.com]');

btn.css('background-image', 'url("'+GoogleURL+'")');

btn.css('background-repeat', 'no-repeat');

btn.css('background-position', 'center center');

btn.css('background-size', 'contain');

btn.css('height', '80px');

btn.css('background-color','#FFFFFF');

btn.css('border','none');

btn.css('color','transparent');

})

</script>

is there something wrong with my code?

regards,

Was this reply helpful? Yes No
Verified answer

LeoAlt 16,331 Moderator on at

Like (0)

Report

RE: How to modified sign in page - Dynamics Portal

Hi Xcode17,

It seems that the Sign In page is not directly accessible compared with other page that we could edit in their Web Templates.

Then I found this tutorial with success access to Sign In page, which requires us add a special Content Snippet:

Account/SignIn/PageCopy

https://community.dynamics.com/crm/b/thinkdynamicdodynamic/posts/customize-registration-page-in-crm-portals

And you'll see in developer tools that external account buttons are surrounded by form tag,

so in my thought,

it could be a good idea that we just change button's CSS attribute, thus we would avoid too much DOM manipulation,

you could add your text under image in any image editor then set it as button background image.

Below is my code:

<script>

$(document).ready(function() {

var btn = $('button[name=provider]');

var imgURL = '';

btn.css('background-image', 'url("'+imgURL+'")');

btn.css('background-repeat', 'no-repeat');

btn.css('background-position', 'center center');

btn.css('background-size', 'contain');

btn.css('height', '80px');

})

</script>

In addition, there might be delay that Content Snippet works in Portal.

For you second question, currently I'm also learning it.

Hope it helps.

Best Regards,

Leo

Was this reply helpful? Yes No
Verified answer

Community Member on at

Like (0)

Report

RE: How to modified sign in page - Dynamics Portal

One way to do it is to have a global JS file that you upload to webfiles, reference that file in either the footer or header of your website ( you can find them in web templates). In that JS you can find these buttons (by css selectors or Id selectors) and inject the image inside the button with proper css styling to show up like the buttons above. Note that you can use jquery as it is readily available and you don't need to include it as another js library. You can use this sample code to do the trick stackoverflow.com/.../add-an-image-to-the-jquery-button

Was this reply helpful? Yes No