Additional Portal Branding (Custom CSS Styles)

What are custom styles? How to use them correctly? Plus a list of commonly used CSS.

Click here for Portal Branding Basics

Additional CSS can be included in the Portal (front end) via the custom section at the bottom of the styles page. Check the app pages custom styles and insert custom CSS.

There are 3 sections for custom styles all relating to different areas of the portal (front end) be sure to add any custom CSS into the correct one

Hide ‘Order History’ button on R&A Module

about .channel.-referrals .channel__h1 [btn-link] {
    display: none;
}

Updating progress bar colour on tier icons

tier .tier-progress {
    stroke: #f5b606;
}

tier .tier-bubble circle {
    fill: #f5b606;
}

Portal background colour

body {
  background-color: #d28dd3;
}

Background imagery on Member Page

Any Member page custom styles need to be added into the correct 

body {
    background-image: url(insert image URL here);
    background-size: cover;
}

Increasing thickness on task item border

.tasks .preview > div {
  border: 10px solid;
  border-color: white;
}

Customise points text colour on task items

task-icon text {
  fill: #f5b606;
}

Different Portal Banner on Mobile

@media (max-width: 650px) {
    .brand-header > .banner-img {
        background-image: url('INSERT URL HERE');
        }
    }

New Task Icon Text Colour

pills > span.-primary {
    color: var(--badgePrimaryColor,black);
    }

Editing Overview Page Module Order

:root {
    --referralsChannelOrder: 1;
    --loyaltyChannelOrder: 2;
    --tasksChannelOrder: 3;
    }