IDP Design Top Bar Header Paige Freeman May 15, 2023 20:15 Updated The Top bar/header section of the IDP Styling settings allows you to customize the appearance of the header of the login and registration forms. Company name The Company name field allows you to enter the company name you wish to display at the top of your login and registration form. Enter your company name exactly as you wish it to display. You can preview your changes in real time in the Constituent View preview to the right of the page. Logo data URL You can select a logo to display within the form header using the Logo data URL file chooser. Select the Choose File button to open the file chooser. Navigate to and select your desired image, then select Open. The image you selected will display within the Constituent View preview to the right of the page, as shown below. The logo will scale to 100% of the width in the banner. Logo maximum height The Logo maximum height slider allows you to adjust the size of the logo that appears in the top header bar on your login and registration forms. You can drag the slider to adjust the size of the logo, or you can use the number picker to enter your desired size. Additionally, you can use the arrows within the number picker to expand or narrow the size by one pixel at a time. 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 Top bar height is 20, and the maximum value is 250. Padding around logo The Padding around logo slider allows you to adjust the size of the padding around the logo that appears in the top header bar on your login and registration forms. You can drag the slider to adjust the size of the logo padding, or you can use the number picker to enter your desired size. Additionally, you can use the arrows within the number picker to expand or narrow the padding by one pixel at a time. Entering or selecting a Padding around logo size of zero will remove the padding. 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 Padding around logo is 0, and the maximum value is 50. Top bar height The Top bar height slider allows you to adjust the size of the top header bar on your login and registration forms. You can drag the slider to adjust the size of the top header bar, or you can use the number picker to enter your desired size. Additionally, you can use the arrows within the number picker to expand or narrow the size by one pixel at a time. 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 Top bar height is 10, and the maximum value is 200. Top bar background color The Top bar background color allows you to use a color picker to select a color to use as the background of the top header bar on your login and registration forms. Click in to the text field to the right of the Top bar 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. Company text size The Company text size allows you to modify the size of the company name that displays in the top header bar on your login and registration forms. You can drag the slider to adjust the size of the company text in the top header bar, or you can use the number picker to enter your desired size. Links in the top bar color The Links in the top bar color allows you to use a color picker to select a color for links that appear in the top bar of your login and registration forms. Click in to the text field to the right of the field 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.