As an ActiveCampaign Agency Partner, you have access to full CSS stylesheets. You can use these stylesheets to white label your resold accounts. For example, you can swap out the ActiveCampaign logo for your own or you can change the look and feel of the entire application.
Locate branding settings
You can apply branding changes listed in this article to all resold accounts or individual resold accounts.
Access branding settings for all resold accounts
Changes made here are applied globally to all resold accounts.
From the Agency Dashboard, click "Default Accounts Settings" in the right menu of the Agency Dashboard.
Access branding settings for individual accounts
Changes made here are applied to individual resold accounts.
From the Agency Dashboard, click the down caret for the account you wish you work with. Then click the "Branding" option.
Change the logo and favicon
To add your logo and favicon to resold accounts, you will need to upload the logo or favicon to an image hosting platform. One platform you can use is Imgur. Then copy the URL of the image and paste it into the logo and favicon fields provided.
Change the stylesheet
Changes to the stylesheet lets you customize the CSS of your resold accounts.
To customize the CSS of your resold accounts:
1. Click the "Customize Admin Section CSS Styles" checkbox. This is located under the "Templates & Styles" section of the account settings page of the Agency Dashboard.
2. A box will expand in the "Templates & Styles" section. Type or paste the CSS code into the box provided.
3. Click the "Update" button at the bottom of the page when finished.
Common platform elements
Below is sample CSS for common elements in the ActiveCampaign platform. You can use this to help you get started with making stylesheet changes.
.notify.success {
color: #305980;
background: #b8d9f9;
}.ac_login_box .ac_button {
background-color: #305980 !important;
border: #305980 1px solid !important;
width: 160px;
}.ac_login_box .ac_login-lower {
font-size: 14px;
color: #305980;
font-weight: 600;
margin-top: 12px;
}body.login, body.logout {
background: #8d8d8d;
}nav.sidenav.collapse .ac_input-search-collapse
{ background-color: #f3f3f3;
color: #000;
border: 1px solid #5fafff;
}nav.sidenav .ac_input-search .ac_input {
padding: 7px 0px 7px 40px !important;
background-color: #f3f3f3;
color: #000;
border: solid 1px #5fafff;
-webkit-appearance: none;
}nav.sidenav .logo {
display: block;
width: 100%;
height: 64px;
max-height: 64px;
background-color: #2c2c2c;
text-align: center;
text-decoration: none;
}nav.sidenav .main-container {
background-color: #305980!important;
}nav.sidenav .sub-container .side-menu-header {
text-transform: uppercase!important;
font-weight: 600;
background-color: #2c2c2c!important;
font-size: 15px!important;
}nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
position: absolute;
content: '';
top: 0;
right: -1px;
width: 0;
}nav.sidenav .actmenu {
background-color: #305980;
}.ac_multibutton > .icon:hover { background: #71c7ff; }.ac_multibutton > .icon {
background: #4d8ecc;
border-left: #efefef 1px solid;
}.ac_button.alt1 {
background-color: #4D8ECC;
color: #fff !important;
border-color: #4D8ECC;
}.ac_button.alt2 {
background-color: #4D8ECC;
border-color: #4D8ECC;
color: #fff !important;
}.mini-button-top > .popover-trigger {
background: #4D8ECC;
}.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { background: #71c7ff; }.ac_multiaction.mini-button-top .popover-trigger {
background: #4D8ECC;
}.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}.ac_button.alt1:hover {
background-color: #71c7ff; border-color: #71c7ff;
}.ac_button.alt2.alt2:hover { background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue, a.ac_button.blue {
color: #fff;
background-color: #4D8ECC;
border: 1px solid #4D8ECC;
}.ac_button.blue:hover, a.ac_button.blue:hover {
background-color: #71c7ff;
border-color: #71c7ff;
}ac_button.green, .ac_button.greenbtn {
background: #4D8ECC;
color: #fff;
border: 1px solid #4D8ECC;
}.ac_button.green:hover, .ac_button.greenbtn:hover { color: #fff;background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue, .ac_button.bluebtn {
color: #fff;
background-color: #4D8ECC;
border: 1px solid #4D8ECC;
}.ac_button.blue:hover, .ac_button.bluebtn:hover { color: #fff;background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue-border, .ac_button.blueborderbtn {
background-color: transparent;
color: #4D8ECC;
border: #4D8ECC1px solid;
}.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { color: #075F59; border-color: #075F59; }.u-userLauncherColor:not([disabled]) {
background-color: #4D8ECC!important;
color: white !important;
fill: white !important;
}.ac_multibutton > ul {
background: #305980!important;
}nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
font-weight: 600;
background: #305980!important;
}.ac_side-menu {
width: 100%;
border-bottom: 0 none;
border-top-color: #2c2c2c;
box-sizing: border-box;
margin-top: 1px;
}nav.sidenav .sub-container {
background-color: #2c2c2c;
}nav.sidenav .logo:after, nav.sidenav .logo:before {
box-shadow: inset 1px 1px #2c2c2c;
}Customize buttons with CSS
Below are CSS custom properties that you can use to update the styling of different buttons within the ActiveCampaign application.
The CSS properties are named to be clear about what they control. The following pattern is what we use to differentiate types, states, and modifications for a given element:
--[prefix-]ComponentName[-asVariant][-descendant|--modifier][-onState]-(cssProperty|variableName)
Fill (default):
--camp-Button-backgroundColor
--camp-Button-onDisabled-backgroundColor
--camp-Button-onFocus-backgroundColor
--camp-Button-borderColor
--camp-Button-onDisabled-borderColor
--camp-Button-onFocus-borderColor
--camp-Button-color
--camp-Button-onDisabled-color
--camp-Button-onFocus-color--camp-Button--destructive-backgroundColor
--camp-Button--destructive-onDisabled-backgroundColor
--camp-Button--destructive-onFocus-backgroundColor
--camp-Button--destructive-borderColor
--camp-Button--destructive-onDisabled-borderColor
--camp-Button--destructive-onFocus-borderColor
--camp-Button--destructive-color
--camp-Button--destructive-onDisabled-color
--camp-Button--destructive-onFocus-color
Outline
--camp-Button-asOutline-backgroundColor
--camp-Button-asOutline-onDisabled-backgroundColor
--camp-Button-asOutline-onFocus-backgroundColor
--camp-Button-asOutline-borderColor
--camp-Button-asOutline-onDisabled-borderColor
--camp-Button-asOutline-onFocus-borderColor
--camp-Button-asOutline-color
--camp-Button-asOutline-onDisabled-color
--camp-Button-asOutline-onFocus-color
Text color
--camp-Button-asText-backgroundColor
--camp-Button-asText-onDisabled-backgroundColor
--camp-Button-asText-onFocus-backgroundColor
--camp-Button-asText-borderColor
--camp-Button-asText-onDisabled-borderColor
--camp-Button-asText-onFocus-borderColor
--camp-Button-asText-color
--camp-Button-asText-onDisabled-color
--camp-Button-asText-onFocus-color--camp-Button-asText--destructive-backgroundColor
--camp-Button-asText--destructive-onDisabled-backgroundColor
--camp-Button-asText--destructive-onFocus-backgroundColor
--camp-Button-asText--destructive-borderColor
--camp-Button-asText--destructive-onDisabled-borderColor
--camp-Button-asText--destructive-onFocus-borderColor
--camp-Button-asText--destructive-color
--camp-Button-asText--destructive-onDisabled-color
--camp-Button-asText--destructive-onFocus-color