You’re offline. This is a read only version of the page.
460
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.
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;
}
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
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
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
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
Stay up to date on forum activity by subscribing. You can also customize your in-app and email Notification settings across all subscriptions.
#1
André Arnaud de Cal...
291,253
Super User 2024 Season 2
#2
Martin Dráb
230,188
Most Valuable Professional
#3
nmaenpaa
101,156
Share
Report
All responses (
Answers (