Guia CSS da Agência ActiveCampaign

Como parceiro da Agência ActiveCampaign, você tem acesso a folhas de estilo CSS completas. Você pode usar essas folhas de estilo para usar marca branca em suas contas revendidas. Por exemplo, você pode trocar o logotipo do ActiveCampaign por sua própria ou você pode alterar a aparência de toda a aplicação.

Localizar configurações de marca

Você pode aplicar alterações de marca listadas neste artigo para todas as contas revendidas ou contas de revenda individuais.

Acessar configurações de marca para todas as contas revendidas

As alterações feitas aqui são aplicadas globalmente a todas as contas revendidas.

No Painel da Agência, clique em "Configurações de contas padrão" no menu certo do Painel da Agência.

Acessar configurações de marca para contas individuais

As alterações feitas aqui são aplicadas em contas de revenda individuais.

No Painel da Agência, clique no caret down para a conta com a qual deseja trabalhar. Em seguida, clique na opção "Branding".

Mude o logotipo e o favicon

Para adicionar seu logotipo e favicon a contas revendidas, você precisará carregar o logotipo ou favicon para uma plataforma de hospedagem de imagens. Uma plataforma que você pode usar é a Imgur. Em seguida, copie a URL da imagem e cole-a no logotipo e nos campos favicon fornecidos.

Mude a folha de estilo

Alterações na folha 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 a seção administrativa CSS Styles". Isso está localizado na seção "Modelos e Estilos" da página de configurações da conta do Painel 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. Clique no botão "Atualizar" na parte inferior da página quando terminar.

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 na folha de estilo.

.notify.success {
    cor: #305980;
    fundo: #b8d9f9;
}
.ac_login_box .ac_button
    cor de fundo: #305980 !importante;
    borda: #305980 1px sólido !importante;
    Largura: 160px;
}
.ac_login_box .ac_login-inferior {
    Tamanho da fonte 14px;
    cor: #305980;
    peso da fonte: 600.
    margem-topo: 12px;
}
body.login, body.logout {
    fundo: #8d8d8d;
}
nav.sidenav.colapso .ac_input-busca-colapso
{    cor de fundo: #f3f3f3;
    cor: #000;
    Fronteira: 1px #5fafff sólido;
}
.ac_input de pesquisa de .ac_input nav.sidenav {
    padding: 7px 0px 7px 40px !importante;
    cor de fundo: #f3f3f3;
    cor: #000;
    borda: sólido 1px #5fafff;
    -webkit-appearance: nenhum;
}
nav.sidenav .logo {
    exibição: bloco;
    Largura: 100%;
    Altura: 64px;
    altura máxima: 64px;
    cor de fundo: #2c2c2c;
    alinhamento de texto: centro;
    text-decoração: nenhum;
}
nav.sidenav .main-container {
    cor de fundo: #305980!importante;
}
nav.sidenav .sub-container .side-menu-header {
    text-transform: maiús nota!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
    Início: 0.
    direito: -1px;
    Largura: 0.
}
nav.sidenav .actmenu {
    cor de fundo: #305980;
}
.ac_multibutton > .icon:hover { fundo: #71c7ff; }
.ac_multibutton > .icon {
    fundo: #4d8ecc;
    border-left: #efefef 1px sólido;
}
.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 {
    fundo: #4D8ECC;
}
.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { fundo: #71c7ff; }
.ac_multiaction.mini-button-top .popover-trigger {
    fundo: #4D8ECC;
}
.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}
.ac_button.alt1:pairar {
cor de fundo: #71c7ff; cor da borda: #71c7ff; 
}
.ac_button.alt2.alt2:hover { cor de fundo: #71c7ff; cor de borda: #71c7ff; }
.ac_button.azul, a.ac_button.azul {
    cor: #fff;
    cor de fundo: #4D8ECC;
    Fronteira: 1px #4D8ECC sólido;
}
.ac_button.blue:hover, a.ac_button.blue:hover {
    cor de fundo: #71c7ff;
    cor da borda: #71c7ff;
}
ac_button.green, .ac_button.greenbtn {
    fundo: #4D8ECC;
    cor: #fff;
    Fronteira: 1px #4D8ECC sólido;
}
.ac_button.green:hover, .ac_button.greenbtn:hover { cor: #fff;background-color: #71c7ff; border-color: #71c7ff; }
.ac_button.blue, .ac_button.bluebtn {
    cor: #fff;
    cor de fundo: #4D8ECC;
    Fronteira: 1px #4D8ECC sólido;
}
.ac_button.blue:hover, .ac_button.bluebtn:hover { cor: #fff;background-color: #71c7ff; border-color: #71c7ff; }
.ac_button.blue-border, .ac_button.blueborderbtn {
    cor de fundo: transparente;
    cor: #4D8ECC;
    borda: #4D8ECC1px sólido;
}
.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { cor: #075F59; border-color: #075F59; }
.u-userLauncherColor:not([desativado]) {
    cor de fundo: #4D8ECC!importante;
    cor: branco !importante;
    preenchimento: branco !importante;
}
.ac_multibutton > ul {
    fundo: #305980!importante;
}
nav.sidenav .sub-contêiner .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
    peso da fonte: 600.
fundo: #305980!importante;
}
.ac_side-menu {
    Largura: 100%;
    fundo da borda: "Nenhuma"
    border-top-color: #2c2c2c;
    tamanho de caixa: border-box;
    margem-topo: 1px;
}
nav.sidenav .sub-container {
    cor de fundo: #2c2c2c;
}
nav.sidenav .logo:depois, nav.sidenav .logo:before {
    box-shadow: inset 1px 1px #2c2c2c;
}

Personalize botões com CSS

Abaixo estão as propriedades personalizadas do 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:

--[prefixo-]Nome de componente[-asVariant][-descendente|-modificador][-onState]-(cssProperty|variávelName)


Preenchimento (padrão):

de botão preenchidoExemplo
--camp-Button-backgroundColor
--camp-Button-onDisabled-backgroundColor
--camp-Button-onFocus-backgroundColor
--camp-Button-borderColor
--camp-Button-onDisabled-borderColor
--camp-Button-onFocus-borderColor
--camp-Button-cor
--camp-Button-onDisabled-color
--camp-Button-onFocus-color
--camp-Button--destrutiva-backgroundColor
--camp-Button --destrutivo-onDisabled-backgroundColor
--camp-Button --destrutivo-onFocus-backgroundColor
--camp-Button --destrutiva-borderColor
--camp-Button --destrutivo-onDisabled-borderColor
--camp-Button --destrutivo-onFocus-borderColor
--camp-Button---destrutiva-cor
--camp-Button --destrutivo-onDisabled-color
--camp-Button --destrutivo-onFocus-color


Esboço

de botão delineadoExemplo
--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

de botão de cor de textoexemplo
--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--destrutiva-backgroundColor
--camp-Button-asText---destrutivo-onDisabled-backgroundColor
--camp-Button-asText--destrutivo-onFocus-backgroundColor
--camp-Button-asText--destrutiva-borderColor
--camp-Button-asText---destrutivo-onDisabled-borderColor
--camp-Button-asText--destrutivo-onFocus-borderColor
--camp-Button-asText-- de cor destrutiva
--camp-Button-asText---destrutivo-onDisabled-color
--camp-Button-asText---destrutivo-onFocus-color
Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 0

Have more questions? Submit a request

Start free trial