IDP Design Form Container Paige Freeman May 15, 2023 20:07 Updated The Form Container section of the IDP Styling settings allows you to customize your login and registration forms. Maximum Width The Maximum Width slider allows you to adjust the width of your login form. You can drag the slider to adjust the width of the login form container, or you can use the number picker to enter your desired width. Additionally, you can use the arrows within the number picker to expand or narrow the width by one pixel at a time. The Form Container Maximum Width applies only to the Regular Container (Login). To change the width of the Large Container (Registration), please see the Wide form container section. As you make your selections, you can preview your changes in real time in the Constituent View preview to the right of the page. The minimum value for the Maximum Width is 300, and the maximum value is 1920. Background Color The Form Container Background Color allows you to use a color picker to select a color to use as the background of your login and registration forms. Click in to the text field to the right of the Background Color label to open the color picker. You can use the HSV panel and Sliders options to select your color, or you can enter the desired HEX code directly into the color picker text box. Once you have selected your desired color, click or tab out to close the panel and see your changes within the Constituent View preview to the right of the page. Additionally, the color picker text box will display the color and HEX code of your chosen color. Border Color The Form Container Border Color allows you to use a color picker to select a color for the border of your login and registration forms. Click in to the text field to the right of the Border Color label to open the color picker. You can use the HSV panel and Sliders options to select your color, or you can enter the desired HEX code directly into the color picker text box. Once you have selected your desired color, click or tab out to close the panel and see your changes within the Constituent View preview to the right of the page. Additionally, the color picker text box will display the color and HEX code of your chosen color. Border Size The Form Container Border Size slider allows you to adjust the width of your login and registration form borders. You can drag the slider to adjust the width of the border, or you can use the number picker to enter your desired width. Additionally, you can use the arrows within the number picker to expand or narrow the width by one pixel at a time. Entering or selecting a Border Size of zero will remove the border. As you make your selections, you can preview your changes in real time in the Constituent View preview to the right of the page. The minimum value for the Border Size is 0, and the maximum value is 20. Shadow Color The Form Container Shadow Color allows you to use a color picker to select a color for the shadow surrounding your login and registration forms. Click in to the text field to the right of the Shadow Color label to open the color picker. You can use the HSV panel and Sliders options to select your color, or you can enter the desired HEX code directly into the color picker text box. Once you have selected your desired color, click or tab out to close the panel and see your changes within the Constituent View preview to the right of the page. Additionally, the color picker text box will display the color and HEX code of your chosen color. If you do not want a shadow to display, set your shadow color to be opaque using the color picker window, as shown below. Questions? Contact us at documentation@personifycorp.com© Personify, Inc. All Rights Reserved.