Customizing the Login Page using the Theme Builder

Styling the login page requires some additional steps because we aren’t allowed to execute Javascript on the login page.

1. Install Magic CSS if you haven’t already. https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol?hl=en

2. Copy the Preview CSS code in Settings > Preview Embed > Preview CSS.

   

   3. Open https://app.msgsndr.com/ in a new tab. This is a 'blank canvas' login page where you can preview any styling changes you make in the Theme Builder.

      NOTE: If you don’t have any login themes for your own HighLevel account login page, you can use your own custom white label domain URL instead. (It might be helpful to open your custom white label domain URL in an incognito browser window and ensure you are logged out of your account so you can see your login page and the changes you'll be making.)

   4. Open Magic CSS by clicking the icon in your Chrome extension list, or pressing CTRL+M on your keyboard.

   5. Paste your Preview CSS you copied from the Theme Builder into the Magic CSS box.

      

   6. You’re now connected to the "Theme Builder Login Page Preview Mode". Each time you make a change inside the Theme Builder, it will automatically update this code. To refresh your Preview with new changes you made in the Theme Builder, click the button in Magic CSS to remove the code and then click it again to add it back. It will update the preview.