Are we able to customize the look and feel of this dropdown to more match our personal branding/design guide? This is within the MFA flow of the okta-signin-widget
I don’t know of a built-in way to do this, but you could look to using afterRender and manipulate the HTML to pull in a different icon when the MFA page is displayed. The context.controller will be one of the views in the widget, such as mfa-verify (I recommend just logging them out to find out which context.controller is applicable to the views you need to customize so you make sure you have the right one for the widget version you are using)
Another option is if this is for the embedded widget and not Okta hosted, you can install the widget as an npm module which allows you to modify the assets.
@erik I wasn’t aware that you could modify the assets with the widget. I am already using the widget. Does this require us to copy ALL of the assets into our public direcotry and update the assets.baseUrl configuration? Or is there another way to go about this since we’re not doing that currently?
For customizing css, we’re loading a global css file of our own which overwrites some of the styles. Maybe I’ve gone about all of this the wrong way for making customizations?
You can follow the instructions from here to install the widget in your node_modules directory of your project where you will have access to all of the asset files. Here just copy your version of image files that you want to replace, then do your own build of your project.
For example to have your own version the SMS icon for the dropdown during MFA replace node_modules/@okta/okta-signin-widget/dist/img/icons/mfa/sms_38x38.png with your own icon that is 38x38 and give it the same name.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.