Skip to main content

Enhancements to Consumer Site Logo Dimensions*

Charlie Gunn
  • Updated

Release 6.0.5000 provides updates to the consumer site (cPOS) to expand the height of both the header and the logo image container in order to accommodate the use of taller company logos for use in cPOS branding. Uploaded logos will continue to be centered in the header and will scale to the size of the image container so they do not appear stretched.

The height of the header and image container has been expanded as follows:

Desktop

Header: 100 pixels

Logo: 90 pixels
mceclip0.png

 

Tablet

Portrait (768 - 1023 pixels)

  • Header: 75 pixels
  • Logo: 65 pixels

Horizontal (1024 pixels and above)

  • Header: 100 pixels
  • Logo: 90 pixels

mceclip1.png

 

Mobile

Portrait & Horizontal (300 - 767 pixels):

  • Header: 60 pixels
  • Logo: 50 pixels
mceclip2.png

For detailed instructions on how to upload a company logo and other cPOS branding options, refer to this article.

 

________________________________________________________________________________________________________

Acceptance Criteria

Prerequisites: 
  • Test logo URL is provided at the company level in Consumer Site Admin for both the Header Logo Image URL and Menu Logo Image URL fields
Use Case #1: Organic URL
  1. Navigate to the cPOS URL that contains the logo uploaded in the prerequisites
  2. VERIFY: the uploaded logo appears on the header of the cPOS login page
  3. VERIFY: the logo is centered in the header
  4. On desktop:
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
  5. Right click on the page and select Inspect Element 
  6. Change the dimensions device view to 'iPad mini' (768 x 1024)
  7. Make sure that this view is in portrait mode
    • VERIFY: the height of the header is 75 pixels
    • VERIFY: the height of the logo image container is 65 pixels
  8. Change the orientation to horizontal
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
  9. Change the dimensions device view again to 'iPhone SE' (375 x 667)
  10. Make sure that this view is in portrait mode:
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the height of the logo image container is 50 pixels
  11. Change the orientation to horizontal
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the height of the logo image container is 50 pixels
  12. Close out of Inspect Element to return to desktop view
  13. Use the fields on this page to register as a borrower and Continue
  14. Once logged in, open the hamburger menu and select My Loans
  15. VERIFY:
    • the height of the header is 100 pixels
    • the height of the logo image container is 90 pixels
    • the hamburger menu is floating left
    • the right side of logo has nothing (no icon/phone#)
  16. Right click on the page and select Inspect Element 
  17. Change the dimensions device view to 'iPad mini' (768 x 1024)
  18. Make sure that this view is in portrait mode
    • VERIFY: the height of the header is 75 pixels
    • VERIFY: the height of the logo image container is 65 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the right side of logo has nothing (no icon/phone#)
  19. Change the orientation to horizontal
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the right side of logo has nothing (no icon/phone#)
  20. Change the dimensions device view again to 'iPhone SE' (375 x 667)
  21. Make sure that this view is in portrait mode:
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the height of the logo image container is 50 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the right side of logo has nothing (no icon/phone#)
  22. Change the orientation to horizontal
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the height of the logo image container is 50 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the right side of logo has nothing (no icon/phone#)
  23. Open the hamburger menu and select My Account
  24. Repeat steps #15-23 
  25. Go back to "My Loans" and click Continue to continue working on a new loan application
  26. Proceed through the loan application and verify the following on each page: 
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the phone number displays on the header floating right
  27. Change device view to 'iPad mini' and repeat step #26 with the following modifications:
    • VERIFY: the height of the header is 75 pixels
    • VERIFY: the height of the logo image container is 65 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the chat icon (LO Contact is floating right)
  28. Change the orientation to horizontal
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the phone number displays in the header floating right
  29. Change device view to 'iPhone SE' and repeat step #26 with the following modifications:
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the logo does not display by the section navigation appears
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the chat icon (LO Contact is floating right)
  30. Change the orientation to horizontal
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the logo does not display by the section navigation appears
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the chat icon (LO Contact is floating right)
  31. Complete and submit the loan application in cPOS
  32. Navigate to the Dashboard
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
    • VERIFY: the hamburger menu is floating left
  33. Change device view to 'iPad mini':
    • VERIFY: the height of the header is 75 pixels
    • VERIFY: the height of the logo image container is 65 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the chat icon (LO Contact is floating right)
  34. Change the orientation to horizontal
    • VERIFY: the height of the header is 100 pixels
    • VERIFY: the height of the logo image container is 90 pixels
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the phone number displays in the header floating right
  35. Change device view to 'iPhone SE' and repeat step #26 with the following modifications:
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the logo does not display by the section navigation appears
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the chat icon (LO Contact is floating right)
  36. Change the orientation to horizontal
    • VERIFY: the height of the header is 60 pixels
    • VERIFY: the logo does not display by the section navigation appears
    • VERIFY: the hamburger menu is floating left
    • VERIFY: the chat icon (LO Contact is floating right)

Use Case #2: Send SecureLink to Borrower

  1. Log in to oPOS as a loan officer
  2. Send a SecureLink invite to the borrower to complete the loan application
  3. Set up a security question and answer for the borrower
  4. As the borrower, open the SecureLink email sent in step #2 and open the link
  5. VERIFY: the URL for the consumer site contains the loan officer's LSID
  6. VERIFY: the Loan Officer Contact Card appears on the right side of the page
  7. VERIFY: the logo uploaded in the prerequisites appears centered in the header
  8. VERIFY: the height of the header is 100 pixels
  9. VERIFY: the height of the logo image container is 90 pixels
  10. Inspect element and change device view to iPad mini (768 x 1024)
  11. VERIFY: the height of the header is 75 pixels
  12. VERIFY: the height of the logo image container is 65 pixels
  13. Change the orientation to horizontal
  14. VERIFY: the height of the header is 100 pixels
  15. VERIFY: the height of the logo image container is 90 pixels 
  16. Inspect element and change device view to 'iPhone SE' (375 x 667)
  17. VERIFY: the height of the header is 60 pixels
  18. VERIFY: the height of the logo image container is 50 pixels
  19. Change the orientation to horizontal
  20. VERIFY: the height of the header is 60 pixels
  21. VERIFY: the height of the logo image container is 50 pixels
  22. Close out of inspect element (chrome), desktop view should display
  23. Complete the Account Activation (answer security question)
  24. Create a Password
  25. You should land on Milestone page (continue)
  26. Repeat Use Case #1, steps #26-36

Use Case #3: cPOS URL with NMLS#

  1. Using the same loan officer, obtain their NMLS # from iMP System Admin 
  2. Enter the consumer site URL/register?nmls=[xxxxx]
  3. VERIFY: the Loan Officer Contact Card appears on the right side of the page
  4. VERIFY: the logo uploaded in the prerequisites appears centered in the header
  5. VERIFY: the height of the header is 100 pixels
  6. VERIFY: the height of the logo image container is 90 pixels
  7. Inspect element and change device view to iPad mini (768 x 1024)
  8. VERIFY: the height of the header is 75 pixels
  9. VERIFY: the height of the logo image container is 65 pixels
  10. Change the orientation to horizontal
  11. VERIFY: the height of the header is 100 pixels
  12. VERIFY: the height of the logo image container is 90 pixels 
  13. Inspect element and change device view to 'iPhone SE' (375 x 667)
  14. VERIFY: the height of the header is 60 pixels
  15. VERIFY: the height of the logo image container is 50 pixels
  16. Change the orientation to horizontal
  17. VERIFY: the height of the header is 60 pixels
  18. VERIFY: the height of the logo image container is 50 pixels
  19. Close out of inspect element (chrome), desktop view should display
  20. Complete the Account Activation (answer security question)
  21. Create a Password
  22. You should land on Milestone page (continue)
  23. Repeat Use Case #1, steps #26-36

Use Case #4: Loan Center Admin Menu - Consumer Site

  1. Log in to iMP System Admin and look for a business entity division
  2. Upload a test logo for the business entity division
  3. Save the Division information
  4. Make sure that there is a test branch created under this Division

  5. Make sure a test loan officer with LSID is created under the test branch

  6. Log in to oPOS with Admin privileges
  7. Open the Admin menu and select Consumer Site
  8.  From the Hierarchy menu, select the Division edited in steps #1-3
  9. 'Pull logo from' the 'Division' (select division)
  10. From the "Footer" accordion, select "Pull Data From" (Division)
  11. Click "Save"
  12. Enter the cPOS url that includes the LO's LSID for the test Division
  13. VERIFY: the test logo appears centered at the top of the page
  14. VERIFY: the height of the header is 100 pixels
  15. VERIFY: the height of the logo image container is 90 pixels
  16. Inspect element and change device view to iPad mini (768 x 1024)
  17. VERIFY: the height of the header is 75 pixels
  18. VERIFY: the height of the logo image container is 65 pixels
  19. Change the orientation to horizontal
  20. VERIFY: the height of the header is 100 pixels
  21. VERIFY: the height of the logo image container is 90 pixels 
  22. Inspect element and change device view to 'iPhone SE' (375 x 667)
  23. VERIFY: the height of the header is 60 pixels
  24. VERIFY: the height of the logo image container is 50 pixels
  25. Change the orientation to horizontal
  26. VERIFY: the height of the header is 60 pixels
  27. VERIFY: the height of the logo image container is 50 pixels
  28. Close out of inspect element (chrome), desktop view should display
  29. Complete the Account Activation (answer security question)
  30. Create a Password
  31. You should land on Milestone page (continue)
  32. Repeat Use Case #1, steps #26-36

     

Corresponding Features: 328934

  1.  

Related articles

Comments

0 comments

Please sign in to leave a comment.