Update & customize the branding for your sign in page and add an image.

****This process requires a small understanding of coding. If you're not comfortable using CSS, please****[****follow the steps for the Basic branding here instead****](https://simplebizsuite.helpcenter.guide/articles/updating-the-branding-for-your-sign-in-page-basic-7666e0-e358e)****.****

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

## STEP 1

Copy & paste the below code into the Programs → Portal Branding → Branding → Advanced → Custom CSS area.

```
@import url('https://msg.everypages.com/ghl-client-portal/login/themes/client-portal-base-theme.css');@import url('https://msg.everypages.com/ghl-client-portal/login/themes/ClientPortalThemeA.css');
```

## STEP 2

1. Copy the CSS below and paste it into the Custom CSS box under the code from Step 1.
2. Change your colors & image locations, etc, in the top values. Refer to the images below to identify the root variables on the login themes.

```
@import url('https://msg.everypages.com/ghl-client-portal/login/themes/client-portal-base-theme.css');:root {    --cp-login-font-sans: "Manrope", sans-serif;    --cp-login-portal-image: url('https://msg.everypages.com/ghl-client-portal/images/pattern-bg.jpg');    --cp-login-portal-banner-bg-color: #ffffff;    --cp-login-portal-banner-border-radius: 10px;    --cp-login-portal-banner-width: 50%;    --cp-login-portal-banner-content-alignment: center;    --cp-login-portal-banner-heading-font-size: 36px;    --cp-login-portal-banner-heading-font-weight: bold;    --cp-login-portal-banner-heading-color: #4F46E5;    --cp-login-portal-banner-description-color: #6B7280;    --cp-login-portal-banner-description-font-size: 16px;    --cp-login-portal-banner-logo: url('https://msg.everypages.com/ghl-client-portal/images/colored-logo.png');    --cp-login-portal-banner-logo-height: 71px;    --cp-login-portal-banner-logo-width: 173px;    --cp-login-bg-color: #ffffff;    --cp-login-box-bg-color: #ffffff;    --cp-login-box-border-radius: 10px;    --cp-login-heading-font-size: 36px;    --cp-login-heading-color: #0a0a0a;    --cp-login-heading-font-weight: bold;    --cp-login-contents-color: #6B7280;    --cp-login-links-color: #4F46E5;    --cp-login-divider-color: #cccccc;    --cp-login-input-border-radius: 50px;    --cp-login-input-bg-color: #ffffff;    --cp-login-input-border-color: #cccccc;    --cp-login-input-hover-border-color: #4F46E5;    --cp-login-input-error-border-color: #f32d2d;    --cp-login-input-text-color: #6B7280;    --cp-login-input-error-text-color: #f32d2d;    --cp-login-button-border-radius: 50px;    --cp-login-button-bg-color: #EEF2FF;    --cp-login-button-border-color: #d6dffd;    --cp-login-button-text-color: #4F46E5;    --cp-login-button-active-border-radius: 50px;    --cp-login-button-active-bg-color: #4F46E5;    --cp-login-button-active-border-color: #4F46E5;    --cp-login-button-active-text-color: #ffffff;}
```

## Root Variables for Login Page Elements

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/7666e0_client-portal-login-mapping.1723427404717.jpg?alt=media)

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/7666e0_client-portal-login-mapping-2.1723427635110.jpg?alt=media)

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/7666e0_client-portal-login-mapping-3.1723427646800.jpg?alt=media)

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/7666e0_client-portal-login-mapping-4.1723427658648.jpg?alt=media)

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/7666e0_client-portal-login-mapping-5.1723427669357.jpg?alt=media)

Updating the Branding for Your Sign In Page (Advanced)

Create and manage private portals for your clients to securely share resources & communicate.

Sell one-to-many offers (course, membership..etc) and support your students and members in one place.