How do I customize styling for APIM widgets such as the sign-up form?

Question

The deprecated developer portal has side navigations and pop-up modals. How do I enable features like that? Or edit links and styling inside of a widget? Some of the typography inside widgets are not controlled by the global styles in the developer portal.

Answer 1

@jhuynh Thank you for reaching out to Microsoft Q&A.

1. The support for popups was added recently in self hosted portal #1893 and it is currently being rolled out in managed portal version. If you can elaborate more on side navigations with example and screenshot, it would help us understand better.
2. You can navigate to Styles page in the developer portal (Global Styles- Styling Guide) and choose/upload font and select Typography for form controls such as Label, Text box, Buttons, links etc. However, this applies at the global level, and we are working to enable more local styles in widgets so that users will be able to override global styles (see comment). Unfortunately, ETA is not available at the moment. Here is the sample textbox color and button color change in the signup widget (applied from Global Styles).
   If you see some styles at the global level not applied in widgets, please share an example with details for us to review or feel free to open an issue in GH repo.

Also, I would like to let you know three options that we have to extend portal functionality and please review doc for detailed info.

I hope this helps with your question and feel free to reach out for any questions. Please 'Accept as answer' and ‘Upvote’ if it helped so that it can help others in the community.

Answer 2

Hi @MuthuKumaran Murugaachari, thanks for your answer! Here is an example of what I want to customize:

Currently on the Sign up widget, the consent is formatted as "I agree to these terms. Show" and I am unable to change this so that the "Show" either links to a new tab/external window, or delete "Show" so that I can hyperlink "terms" to an external window. The reason I need to do this is because right now if I click on "Show," the Terms text will slide out beneath and it is a massive wall of text above the "Sign up" button. I want the Terms to be linked as a separate page. I currently cannot even use HTML to hyperlink text from the Identities > Settings > Terms of use module.

I discovered in the deprecated developer portal that the consent checkbox was able to be formatted differently: 1) the "Terms" got to be highlighted, and 2) the link triggers a pop-up modal. This gave me the impression that these widgets were highly editable.

Please let me know your thoughts! Thanks.