Question

Answer

1. Click on the Avatar in the upper right hand corner and select the Manage Digital Hive menu option
   
2. From within the Digital Hive Control Center, expand Customizations and click on Login Screen
3. The first step is to select a theme to be modified. Click on the pencil icon to change the Chosen Theme value NOTE: Digital Hive supports one active login screen design so it doesn't matter what theme is modified, but the recommendation is that is there is a corporate theme used for the Hives, select that one to use for the login screen
4. With a theme selected, decide whether there will be a single version of the page, or if both Light and Dark modes will be supported. In the Styles section, click on the down arrow beside the  icon and select the desired colour modes. For this example, Light & Dark will be used
5. To facilitate the customization process, select the desired colour scheme to be used by clicking on the  icon and then choosing the correct colour scheme from the drop down list. By default, no colour tinting is selected for Light mode, and a default tinting value is specified for the Dark mode. Feel free to play around with these values to obtain different results. 
6. If a corporate logo is desired, enable the Show logo checkbox
7. If Show logo was enabled, click on the logo preview circle  in the Logo section
   
8. Using the Select some content dialog, navigate to the desired logo image, or upload an image to a specific folder, and select the image 
9. If authoring for Light & Dark modes, change the colour mode selector  to  and repeat step 8 to select the desired logo to be used in Dark mode
   
10. Looking at the login screen preview window, click on the colour mode selector to change the value from Light mode to Dark mode. This enables to toggle between the different modes to see how the design looks based on the current settings
    
11. Toggle back to Light mode 
    
12. To insert custom text above the logo, enable the Show Title checkbox and enter the desired text in the Title Text field (this example does not use a title)
    
13. By default, the title will have a certain look and feel based on the selected theme. To customize the appearance of the tile, scroll down to the page to the Title section
    
14. Expand the Title section by clicking on the down arrow
    
15. To remove the background of the title, uncheck the Draw background checkbox. If a background is desired, change the colour by clicking on the Background Color preview icon and either select a colour from the scheme or type in a hex or RGB colour value and click outside of the box to close it
    
16. If a different background colour is desired for the Dark mode, click on the mode selector icon  to enable the toggle  and select the Dark mode colour
    
17. Using the different tabs under the Title section, the Border, Spacing, Size, and Text can all be modified
    
18. Digital Hive provides the ability to modify the browser icon (favicon). If a custom icon is desired, click on the image preview circle  in the Browser icon section
    
19. Using the Select some content dialog, navigate to the desired browser icon image, or upload an image to a specific folder, and select the image 
20. Next, we'll customize the background appearance of the login screen. Expand the Login Background section
    
21. Here we can select background colours for both light and dark modes, or select an image to be used, which is what will be done for this example
    
22. In the Background image section click on the image preview circle 
    
23. Using the Select some content dialog, navigate to the desired background image, or upload an image to a specific folder, and select the image
    
24. If a different background image is desired for the Dark mode, click on the mode selector icon  to enable the toggle  and select the Dark mode
    
25. Using the Select some content dialog, navigate to the desired background image, or upload an image to a specific folder, and select the image. For this example, we'll just one image and take advantage of the automatic colour tinting mentioned in step 5. Here is what we have to date, using the settings that were applied for this login screen 
    
26. Next, let's customize the appearance of the input fields used for username and password. Expand the Input Fields section
    
27. To select a background colour for the input fields, enable the Draw background checkbox
    
28. Select your colours for Light and Dark mode. A single colour was used for this example
    
29. If an image is desired as the background for the input fields, this is also possible, but not used in this example
    
30. Still in the Input Fields section, select the Background tab
    
31. Using the Border style dropdown, select the border style to be used. Solid was select in this example
    
32. Select your colours for Light and Dark mode. Two different colours were select in this example
    
33. In the Border thickness section, change one of the values to 1. You will notice that all of the values chained because by default, the values are linked
    
34. Click on any one of the  link icons to break the linkage
    
35. Change the first value, the top border, to 5. This will create a heavier border along the top of the input field
    
36. In this example, no background behind the input fields is selected. If a background was desired, expand the Login Form Container section, enable the Draw background checkbox and then customize the appearance
    
37. The last step for this login page will be to change the appearance of the Log In button. Expand the Login Button section
    
38. Enable the Draw background checkbox
    
39. Select your colours for Light and Dark mode. Two different colours were select in this example
    
40. Using the page selector control   beneath the login screen preview  you can toggle between the various login screens and customize their appearance also
    
41. When all of the changes have been made, click on the  button to commit the changes