Customize login button for identity provider

You have the option of placing the provider's icon or another icon on the login button of your portal.

Step-by-step guide

Proceed as follows to place a provider icon on the login button of your portal:

  1. Start the "Design" module.

  2. Open your layout.

  3. Activate the "Control elements" view.

  4. Select the "Button Standard" entry under "Controls > Buttons > Button".

  5. Copy the "Button Standard" entry and insert it again under "Controls > Buttons > Button".

    The Properties dialog box is displayed.

  6. Assign an appropriate class name and title. (The title is displayed on the login button)

  7. Click on "OK".

  8. Select the style classes below the newly created button ().

  9. Add the following properties for each style class ():

                        background-image: url(../../thirdparty/icon54/svg/line/LogosBrands/Google.svg); /* Bildpfad entsprechend anpassen *n/
background-blend-mode: overlay;
background-position-x: 1em;
background-position-y: center;
background-repeat: no-repeat;
background-size: 2em auto;

    For the background-image style class, adjust the path to the icon you have selected accordingly.

  10. Perform these steps for all layouts that you paste in.

  11. Enter the newly created style class in the "Configure provider" dialog box in the "Style class" field.

    (How to access the dialog box is described in section Entering ID provider data in the user administration )

  12. Click on "Finish".

More information