Guida CSS di ActiveCampaign Agency

In qualità di partner ActiveCampaign Agency, hai accesso a fogli di stile CSS completi. È possibile utilizzare questi fogli di stile per etichettare in bianco gli account rivenduti. Ad esempio, è possibile scambiare il logo ActiveCampaign con il proprio oppure modificare l'aspetto dell'intera applicazione.

Individuare le impostazioni di pernozzamento

È possibile applicare le modifiche alla pernozzamento elencate in questo articolo a tutti i conti rivenduti o ai singoli account rivenduti.

Accedere alle impostazioni di pernozzamento per tutti gli account rivenduti

Le modifiche apportate qui vengono applicate globalmente a tutti i conti rivenduti.

Nel dashboard agenzia fare clic su "Impostazioni account predefinite" nel menu destro del dashboard dell'agenzia.

Accedere alle impostazioni di perno branding per i singoli account

Le modifiche apportate qui vengono applicate ai singoli conti rivenduti.

Dalla dashboard dell'agenzia, fai clic sul punto di attività per l'account con cui desideri lavorare. Quindi fare clic sull'opzione "Pernoggiamento".

Cambia il logo e la favicon

Per aggiungere il tuo logo e favicon agli account rivenduti, dovrai caricare il logo o la favicon su una piattaforma di hosting di immagini. Una piattaforma che puoi usare è Imgur. Quindi copiare l'URL dell'immaginee incollarlo nel campo favicon fornito.

Modificare il foglio di stile

Le modifiche apportate al foglio di stile consentono di personalizzare il CSS degli account rivenduti.

Per personalizzare il CSS degli account rivenduti:

1. Fare clic sulla casella di controllo "Personalizza stili CSS sezione amministratore". Si trova nella sezione "Modelli e stili" della pagina delle impostazioni dell'account del dashboard dell'agenzia.

2. Una casella verrà espansa nella sezione "Modelli e stili". Digitare o incollare il codice CSS nella casella fornita.

3. Al termine, fare clic sul pulsante "Aggiorna" nella parte inferiore della pagina.

Elementi comuni della piattaforma

Di seguito è riportato un CSS di esempio per elementi comuni nella piattaforma ActiveCampaign. È possibile utilizzarlo per iniziare a apportare modifiche al foglio di stile.

.notify.success {
    colore: #305980;
    contesto: #b8d9f9;
}
.ac_login_box .ac_button {
    colore di sfondo: #305980 !importante;
    bordo: #305980 1px solido !importante;
    Larghezza 160 px;
}
.ac_login_box .ac_login inferiore {
    Dimensione carattere 14px;
    colore: #305980;
    Spessore carattere 600.
    margine-top: 12px;
}
body.login, body.logout {
    contesto: #8d8d8d;
}
nav.sidenav.collapse .ac_input-search-collapse
{    colore di sfondo: #f3f3f3;
    colore: #000;
    confine 1px di #5fafff;
}
nav.sidenav .ac_input-search .ac_input {
    Imbottitura 7px 0px 7px 40px !important;
    colore di sfondo: #f3f3f3;
    colore: #000;
    bordo: solido 1px #5fafff;
    -webkit-appearance: nessuno;
}
nav.sidenav .logo {
    display: blocco;
    Larghezza 100.
    Altezza: 64px;
    altezza massima: 64px;
    colore di sfondo: #2c2c2c;
    allineamento testo: centro;
    decorazione del testo: nessuno;
}
nav.sidenav .main-container {
    sfondo-colore: #305980!importante;
}
nav.sidenav .sub-container .side-menu-header {
    trasformazione del testo: maiuscola!importante;
    Spessore carattere 600.
    sfondo-colore: #2c2c2c!importante;
Dimensione carattere 15px!importante;
}
nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
    posizione: assoluta;
    Contenuti
    In alto: 0.
    a destra: -1px;
    Larghezza 0.
}
nav.sidenav .actmenu {
    Colore di sfondo
}
.ac_multibutton > .icon:hover { sfondo: #71c7ff; }
.ac_multibutton > .icon {
    contesto: #4d8ecc;
    bordo-sinistra: #efefef 1px solido;
}
.ac_button.alt1 {
    colore di sfondo: #4D8ECC;
    colore: #fff !importante;
    colore bordo: #4D8ECC;
}
.ac_button.alt2 {
    colore di sfondo: #4D8ECC;
    colore bordo: #4D8ECC;
    colore: #fff !importante;
}
.mini-button-top > .popover-trigger {
    contesto: #4D8ECC;
}
.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { sfondo: #71c7ff; }
.ac_multiaction.mini-button-top .popover-trigger {
    contesto: #4D8ECC;
}
.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}
.ac_button.alt1:passaggio del mouse {
colore di sfondo: #71c7ff; colore bordo: #71c7ff; 
}
.ac_button.alt2.alt2:hover { colore di sfondo: #71c7ff; colore bordo: #71c7ff; }
.ac_button.blu, a.ac_button.blue {
    colore: #fff;
    colore di sfondo: #4D8ECC;
    confine 1px #4D8ECC;
}
.ac_button.blue:hover, a.ac_button.blue:hover {
    colore di sfondo: #71c7ff;
    colore bordo: #71c7ff;
}
ac_button.green, .ac_button.greenbtn {
    contesto: #4D8ECC;
    colore: #fff;
    confine 1px #4D8ECC;
}
.ac_button.green:hover, .ac_button.greenbtn:hover { colore: #fff;colore sfondo: #71c7ff; colore bordo: #71c7ff; }
.ac_button.blue, .ac_button.bluebtn {
    colore: #fff;
    colore di sfondo: #4D8ECC;
    confine 1px #4D8ECC;
}
.ac_button.blue:hover, .ac_button.bluebtn:hover { colore: #fff;colore sfondo: #71c7ff; colore bordo: #71c7ff; }
.ac_button.blue-border, .ac_button.blueborderbtn {
    colore di sfondo: trasparente;
    colore: #4D8ECC;
    bordo: #4D8ECC1px solido;
}
.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { color: #075F59; border-color: #075F59; }
.u-userLauncherColor:not([disabled]) {
    colore di sfondo: #4D8ECC!importante;
    colore: bianco !importante;
    riempimento: bianco !importante;
}
.ac_multibutton > ul {
    contesto: #305980!importante;
}
nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
    Spessore carattere 600.
contesto: #305980!importante;
}
.ac_side-menu {
    Larghezza 100.
    bordo in basso: 0 nessuno;
    colore superiore bordo: #2c2c2c;
    dimensionamento delle box: border-box;
    margine-top: 1px;
}
nav.sidenav .sub-container {
    colore di sfondo: #2c2c2c;
}
nav.sidenav .logo:after, nav.sidenav .logo:prima {
    box-shadow: inset 1px 1px #2c2c2c;
}

Personalizzare i pulsanti con CSS

Di seguito sono riportate le proprietà personalizzate CSS che è possibile utilizzare per aggiornare lo stile dei diversi pulsanti all'interno dell'applicazione ActiveCampaign.

Le proprietà CSS sono denominate per essere chiare su ciò che controllano. Il modello seguente è quello che usiamo per differenziare tipi, stati e modifiche per un determinato elemento:

--[prefisso-]NomeComponente[-asVariant][-discendente|--modificatore][-onState]-(cssProperty|variableName)


Riempimento (impostazione predefinita):

di pulsante riempitoEsempio
--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--colore distruttivo
--camp-Button--colore distruttivo suDisabled
--camp-Button--destructive-onFocus-color


Contorno

di pulsante delineatoesempio
--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


Colore testo

di pulsante colore testoEsempio
--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--colore distruttivo
--camp-Button-asText--destructive-onDisabled-color
--camp-Button-asText--destructive-onFocus-color
Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 1 su 2

Have more questions? Submit a request

Start free trial