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. Under "Controls > Buttons > Button", select the "Standard button" item.

  5. Copy the "Standard button" item and paste it back in 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 under 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, adapt the path to your chosen icon accordingly.

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

  11. Save the new style class in the "Configure provider" dialog box in the "Style class" field.

    (There is a description of how to access the dialog box in the section Entering ID provider data in the user administration.)

  12. Click on "Finish".

More information