Como parceiro de agência da ActiveCampaign, você tem acesso a planilhas de estilo CSS completas. Você pode usar essas planilhas de estilo para rotular suas contas revendidas. Por exemplo, você pode trocar o logotipo da ActiveCampaign pelo seu próprio ou alterar a aparência de todo o aplicativo.
Localizar configurações de branding
Você pode aplicar alterações de branding listadas neste artigo a todas as contas revendidas ou contas revendidas individuais.
Acessar configurações de branding para todas as contas revendidas
As alterações feitas aqui são aplicadas globalmente a todas as contas revendidas.
No Painel de controle da agência, clique em "Configurações de contas padrão" no menu à direita do Painel de controle da agência.
Acessar configurações de branding para contas individuais
As alterações feitas aqui são aplicadas a contas revendidas individuais.
No Painel de controle da agência, clique no acento circunflexo para baixo da conta com a qual você deseja trabalhar. Em seguida, clique na opção "Branding".
Alterar o logotipo e o favicon
Para adicionar seu logotipo e favicon a contas revendidas, você precisará carregar o logotipo ou favicon em uma plataforma de hospedagem de imagens. Uma plataforma que você pode usar é o Imgur. Em seguida, copie o URL da imagem e cole-o no logotipo e nos campos favicon fornecidos.
Alterar a planilha de estilo
As alterações na planilha de estilo permitem personalizar o CSS de suas contas revendidas.
Para personalizar o CSS de suas contas revendidas:
1. Clique na caixa de seleção "Personalizar estilos CSS da seção de administrador". Isso está localizado na seção "Modelos e estilos" da página de configurações da conta do Painel de controle da agência.
2. Uma caixa será expandida na seção "Modelos e estilos". Digite ou cole o código CSS na caixa fornecida.
3. Quando terminar, clique no botão "Atualizar" na parte inferior do formulário.
Elementos comuns da plataforma
Abaixo está a amostra CSS para elementos comuns na plataforma ActiveCampaign. Você pode usar isso para ajudá-lo a começar a fazer alterações de planilha de estilo.
.notificar.success {
cor: nº 305980;
plano de fundo: #b8d9f9;
}.ac_login_box .ac_button {
cor de fundo: nº 305980 !importante;
borda: nº 305980 1px sólido !importante;
largura: 160px;
}.ac_login_box .ac_login mais baixo {
tamanho da fonte: 14px;
cor: nº 305980;
peso da fonte: 600;
margem superior: 12px;
}body.login, body.logout {
plano de fundo: #8d8d8d;
}nav.sidenav.collapse .ac_input-search-collapse
{ cor de fundo: #f3f3f3;
cor: nº 000;
borda: 1px #5fafff sólida;
}.ac_input de pesquisa de .ac_input nav.sidenav {
padding: 7px 0px 7px 40px !important;
cor de fundo: #f3f3f3;
cor: nº 000;
borda: sólida 1px #5fafff;
-webkit-appearance: nenhum;
}nav.sidenav .logo {
exibir: bloquear;
largura: 100%;
altura: 64px;
altura máxima: 64px;
cor de fundo: #2c2c2c;
alinhamento de texto: centro;
decoração de texto: nenhuma;
}nav.sidenav .main-container {
cor de fundo: nº 305980!importante;
}nav.sidenav .sub-container .side-menu-cabeçalho {
transformação de texto: maiúscula!importante;
peso da fonte: 600;
cor de fundo: #2c2c2c!importante;
tamanho da fonte: 15px!importante;
}nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
posição: absoluta;
conteúdo: '';
superior: 0;
direito: -1px;
largura: 0;
}nav.sidenav .actmenu {
cor de fundo: nº 305980;
}.ac_multibutton > .icon:hover { plano de fundo: #71c7ff; }.ac_multibutton > .icon {
plano de fundo: #4d8ecc;
border-left: #efefef 1px sólida;
}.ac_button.alt1 {
cor de fundo: #4D8ECC;
cor: #fff !importante;
cor da borda: #4D8ECC;
}.ac_button.alt2 {
cor de fundo: #4D8ECC;
cor da borda: #4D8ECC;
cor: #fff !importante;
}.mini-button-top > .popover-trigger {
plano de fundo: #4D8ECC;
}.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { plano de fundo: #71c7ff; }.ac_multiaction.mini-button-top .popover-trigger {
plano de fundo: #4D8ECC;
}.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}.ac_button.alt1:hover {
cor de fundo: #71c7ff; cor da borda: #71c7ff;
}.ac_button.alt2.alt2:hover { cor de fundo: #71c7ff; cor da borda: #71c7ff; }.ac_button.blue, a.ac_button.blue {
cor: #fff;
cor de fundo: #4D8ECC;
borda: 1px #4D8ECC sólida;
}.ac_button.blue:hover, a.ac_button.blue:hover {
cor de fundo: #71c7ff;
cor da borda: #71c7ff;
}ac_button.green, .ac_button.greenbtn {
plano de fundo: #4D8ECC;
cor: #fff;
borda: 1px #4D8ECC sólida;
}.ac_button.green:hover, .ac_button.greenbtn:hover { cor: #fff;cor de fundo: #71c7ff; cor da borda: #71c7ff; }.ac_button.blue, .ac_button.bluebtn {
cor: #fff;
cor de fundo: #4D8ECC;
borda: 1px #4D8ECC sólida;
}.ac_button.blue:hover, .ac_button.bluebtn:hover { cor: #fff;cor de fundo: #71c7ff; cor da borda: #71c7ff; }.ac_button.blue-border, .ac_button.blueborderbtn {
cor de fundo: transparente;
cor: #4D8ECC;
borda: #4D8ECC1px sólida;
}.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { cor: #075F59; cor da borda: #075F59; }.u-userLauncherColor:not([desativado]) {
cor de fundo: #4D8ECC!importante;
cor: branco !importante;
preencher: branco !importante;
}.ac_multibutton > ul {
background: #305980!important;
}nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
peso da fonte: 600;
background: #305980!important;
}menu de .ac_side {
largura: 100%;
fundo da borda: 0 nenhum;
cor superior da borda: #2c2c2c;
tamanho da caixa: border-box;
margem superior: 1px;
}nav.sidenav .sub-contêiner {
cor de fundo: #2c2c2c;
}nav.sidenav .logo:after, nav.sidenav .logo:antes de {
sombra de caixa: inset 1px 1px #2c2c2c;
}Personalizar botões com CSS
Abaixo estão as propriedades personalizadas CSS que você pode usar para atualizar o estilo de diferentes botões dentro do aplicativo ActiveCampaign.
As propriedades CSS são nomeadas para serem claras sobre o que controlam. O seguinte padrão é o que usamos para diferenciar tipos, estados e modificações para um determinado elemento:
--[prefix-]ComponentName[-asVariant][-descendente|--modifier][-onState]-(cssProperty|variableName)
Preencher (padrão):
--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-- plano de fundo destrutivoColor
--camp-Button-destructive-onDisabled-backgroundColor
--camp-Button-- destrutiva-onFocus-backgroundColor
--camp-Button--destrutiva-borderColor
--camp-Button-destructive-onDisabled-borderColor
--camp-Button-- destrutiva-onFocus-borderColor
--camp-Button- cor destrutiva
--camp-Button-- de cor destrutiva desativada
--camp-Button- cor destrutiva-onFocus
Esboço
--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
Cor de texto
--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-- plano de fundo destrutivoColor
--camp-Button-asText--destructive-onDisabled-backgroundColor
--camp-Button-asText--destructive-onFocus-backgroundColor
--camp-Button-asText-- destrutiva-borderColor
--camp-Button-asText-destructive-onDisabled-borderColor
--camp-Button-asText-- destrutiva-onFocus-borderColor
--camp-Button-asText-- cor destrutiva
--camp-Button-asText--destructive-onDisabled-color
--camp-Button-asText--destructive-onFocus-color