In qualità di partner dell'agenzia ActiveCampaign, hai accesso a fogli di stile CSS completi. Puoi utilizzare questi fogli di stile per applicare una white label ai tuoi account rivenduti. Ad esempio, puoi sostituire il logo ActiveCampaign con il tuo o puoi modificare l'aspetto dell'intera applicazione.
Individuare le impostazioni di branding
Puoi applicare le modifiche al branding elencate in questo articolo a tutti gli account rivenduti o ai singoli account rivenduti.
Accedere alle impostazioni di branding per tutti gli account rivenduti
Le modifiche apportate qui vengono applicate globalmente a tutti gli account rivenduti.
Dalla dashboard dell'agenzia, fai clic su "Impostazioni account predefinite" nel menu destro della dashboard dell'agenzia.
Accedere alle impostazioni di branding per i singoli account
Le modifiche apportate qui vengono applicate ai singoli account rivenduti.
Dalla dashboard dell'agenzia, fai clic sul cursore verso il basso per l'account con cui desideri lavorare. Quindi fare clic sull'opzione "Branding".
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 copia l'URL dell'immagine e incollalo nei campi logo e favicon forniti.
Modificare il foglio di stile
Le modifiche al foglio di stile ti consentono di personalizzare il CSS dei tuoi account rivenduti.
Per personalizzare il CSS dei tuoi account rivenduti:
Fare clic su " Personalizza stili CSS admin" opzione. Si trova nella sezione "Modelli e stili" della pagina delle impostazioni dell'account della dashboard dell'agenzia.
2. Una casella si espanderà nella sezione "Modelli e stili". Digita o incolla il codice CSS nell'apposita casella.
Al termine, fai clic sul pulsante "Aggiungi" nella parte inferiore del modulo.
Elementi comuni della piattaforma
Di seguito è riportato un CSS di esempio per gli elementi comuni nella piattaforma ActiveCampaign. Puoi usarlo per iniziare a modificare i fogli di stile.
.notify.success {
colore: #305980;
sfondo: #b8d9f9;
}.ac_login_box .ac_button {
colore di sfondo: #305980 !importante;
bordo: #305980 1px solido !importante;
larghezza: 160px;
}.ac_login_box .ac_login-inferiore {
font-size: 14px;
colore: #305980;
font-weight: 600;
margin-top: 12px;
}body.login, body.logout {
sfondo: #8d8d8d;
}nav.sidenav.collapse .ac_input-search-collapse
{ background-color: #f3f3f3;
colore: #000;
bordo: 1px #5fafff solido;
}nav.sidenav .ac_input-search .ac_input {
spaziatura interna: 7px 0px 7px 40px !importante;
colore di sfondo: #f3f3f3;
colore: #000;
bordo: solido 1px #5fafff;
-webkit-aspetto: nessuno;
}nav.sidenav .logo {
display: blocco;
larghezza: 100%;
altezza: 64px;
altezza massima: 64px;
colore di sfondo: #2c2c2c;
text-align: center;
testo-decorazione: nessuno;
}nav.sidenav .main-container {
colore di sfondo: #305980!important;
}nav.sidenav .sub-container .side-menu-header {
text-transform: maiuscolo!importante;
font-weight: 600;
colore di sfondo: #2c2c2c!importante;
font-size: 15px!important;
}nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
posizione: assoluta;
contenuto: '';
superiore: 0;
destra: -1px;
larghezza: 0;
}nav.sidenav .actmenu {
colore di sfondo: #305980;
}.ac_multibutton > .icon:hover { background: #71c7ff; }.ac_multibutton > .icon {
sfondo: #4d8ecc;
border-left: #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 {
sfondo: #4D8ECC;
}.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { background: #71c7ff; }.ac_multiaction.mini-button-top .popover-trigger {
sfondo: #4D8ECC;
}.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}.ac_button.alt1:hover {
colore di sfondo: #71c7ff; colore del bordo: #71c7ff;
}.ac_button.alt2.alt2:hover { background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue, a.ac_button.blue {
colore: #fff;
colore di sfondo: #4D8ECC;
bordo: 1px #4D8ECC solido;
}.ac_button.blue:hover, a.ac_button.blue:hover {
colore di sfondo: #71c7ff;
colore del bordo: #71c7ff;
}ac_button.green, .ac_button.greenbtn {
sfondo: #4D8ECC;
colore: #fff;
bordo: 1px #4D8ECC solido;
}.ac_button.green:hover, .ac_button.greenbtn:hover { color: #fff;background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue, .ac_button.bluebtn {
colore: #fff;
colore di sfondo: #4D8ECC;
bordo: 1px #4D8ECC solido;
}.ac_button.blue:hover, .ac_button.bluebtn:hover { color: #fff;background-color: #71c7ff; border-color: #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 {
Sfondo: #305980!importante;
}nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
font-weight: 600;
Sfondo: #305980!importante;
}.ac_side-menu {
larghezza: 100%;
bordo-fondo: 0 nessuno;
colore bordo superiore: #2c2c2c;
box-sizing: border-box;
margin-top: 1px;
}nav.sidenav .sub-container {
colore di sfondo: #2c2c2c;
}nav.sidenav .logo:after, nav.sidenav .logo:before {
box-shadow: inserto 1px 1px #2c2c2c;
}Personalizza 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 seguente modello è quello che usiamo per differenziare tipi, stati e modifiche per un determinato elemento:
--[prefix-]ComponentName[-asVariant][-descendant|--modifier][-onState]-(cssProperty|variableName)
Riempimento (impostazione predefinita):
--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
Bordo
--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
--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