En tant qu'agence partenaire d'ActiveCampaign, vous avez accès à l'intégralité des feuilles de style CSS. Vous pouvez utiliser ces feuilles de style pour mettre vos comptes revendus en étiquette blanche. Par exemple, vous pouvez remplacer le logo d'ActiveCampaign par le vôtre ou modifier l'aspect et la convivialité de l'ensemble de l'application.
Localiser les paramètres de la stratégie de marque
Vous pouvez appliquer les modifications de marque énumérées dans cet article à tous les comptes revendus ou à des comptes revendus individuels.
Accéder aux paramètres de marque pour tous les comptes revendus
Les modifications apportées ici sont appliquées globalement à tous les comptes revendus.
Depuis le tableau de bord de l'Agence, cliquez sur "Default Accounts Settings" dans le menu de droite du tableau de bord de l'Agence.
Accéder aux paramètres de marque pour les comptes individuels
Les modifications apportées ici sont appliquées aux comptes individuels revendus.
Dans le tableau de bord de l'agence, , cliquez sur la flèche vers le bas pour le compte avec lequel vous souhaitez travailler. Puis cliquez sur l'option "Marque".
Modifier le logo et le favicon
Pour ajouter votre logo et votre favicon aux comptes revendus, vous devez télécharger le logo ou le favicon sur une plateforme d'hébergement d'images. Une plateforme que vous pouvez utiliser est Imgur. Copiez ensuite l'URL de l'image et collez-la dans les champs logo et favicon prévus à cet effet.
Modifier la feuille de style
La modification de la feuille de style vous permet de personnaliser le CSS de vos comptes revendus.
Pour personnaliser le CSS de vos comptes revendus :
Cliquez sur l'option "Customize Admin CSS Styles". Elle se trouve dans la section "Modèles et styles" de la page des paramètres du compte du tableau de bord de l'agence.
2. Une boîte s'ouvre dans la section "Modèles et styles". Tapez ou collez le code CSS dans la case prévue à cet effet.
Lorsque vous avez terminé, cliquez sur le bouton "Ajouter" au bas du formulaire.
Éléments communs de la plate-forme
Vous trouverez ci-dessous des exemples de feuilles de style CSS pour des éléments communs de la plateforme ActiveCampaign. Vous pouvez l'utiliser pour vous aider à commencer à modifier les feuilles de style.
.notify.success {
couleur : #305980 ;
arrière-plan : #b8d9f9 ;
}
.ac_login_box .ac_button {
couleur de fond : #305980 !important ;
border : #305980 1px solid !important ;
largeur : 160px ;
}
.ac_login_box .ac_login-lower {
taille de la police : 14px ;
couleur : #305980 ;
poids de la police : 600 ;
marge-top : 12px ;
}
body.login, body.logout {
arrière-plan : #8d8d8d ;
}
nav.sidenav.collapse .ac_input-search-collapse
{ background-color : #f3f3f3 ;
couleur : #000 ;
bordure : 1px solid #5fafff ;
}
nav.sidenav .ac_input-search .ac_input {
marge intérieure : 7px 0px 7px 40px !important ;
couleur de fond : #f3f3f3 ;
couleur : #000 ;
border : solid 1px #5fafff ;
-webkit-appearance : none ;
}
nav.sidenav .logo {
affichage : bloc ;
largeur : 100 % ;
hauteur : 64px ;
hauteur maximale : 64px ;
couleur de fond : #2c2c2c ;
text-align : center ;
décoration du texte : aucune ;
}
nav.sidenav .main-container {
couleur de fond : #305980!important ;
}
nav.sidenav .sub-container .side-menu-header {
text-transform : uppercase!important ;
poids de la police : 600 ;
couleur de fond : #2c2c2c!important ;
font-size : 15px!important ;
}
nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
position : absolute ;
contenu : '' ;
top : 0 ;
droite : -1px ;
largeur : 0 ;
}
nav.sidenav .actmenu {
couleur de fond : #305980 ;
}
.ac_multibutton > .icon:hover { background : #71c7ff ; }
.ac_multibutton > .icon {
l'arrière-plan : #4d8ecc ;
bordure-gauche : #efefef 1px solid ;
}
.ac_button.alt1 {
couleur de fond : #4D8ECC ;
couleur : #fff !important ;
couleur de la bordure : #4D8ECC ;
}
.ac_button.alt2 {
couleur de fond : #4D8ECC ;
couleur de la bordure : #4D8ECC ;
couleur : #fff !important ;
}
.mini-button-top > .popover-trigger {
l'arrière-plan : #4D8ECC ;
}
.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { background : #71c7ff ; }
.ac_multiaction.mini-button-top .popover-trigger {
l'arrière-plan : #4D8ECC ;
}
.ac_multiaction.mini-button-top .popover-trigger:hover, .ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}
.ac_button.alt1:hover {
couleur de fond : #71c7ff ; border-color : #71c7ff ;
}
.ac_button.alt2.alt2:hover { background-color : #71c7ff ; border-color : #71c7ff ; }
.ac_button.blue, a.ac_button.blue {
couleur : #fff ;
couleur de fond : #4D8ECC ;
bordure : 1px solid #4D8ECC ;
}
.ac_button.blue:hover, a.ac_button.blue:hover {
couleur de fond : #71c7ff ;
couleur de la bordure : #71c7ff ;
}
ac_button.green, .ac_button.greenbtn {
l'arrière-plan : #4D8ECC ;
couleur : #fff ;
bordure : 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 {
couleur : #fff ;
couleur de fond : #4D8ECC ;
bordure : 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 {
couleur de fond : transparent ;
couleur : #4D8ECC ;
bordure : #4D8ECC1px solid ;
}
.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { color : #075F59 ; border-color : #075F59 ; }
.u-userLauncherColor:not([disabled]) {
couleur de fond : #4D8ECC!important ;
color : white !important ;
fill : white !important ;
}
.ac_multibutton > ul {
arrière-plan : #305980!important ;
}
nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
poids de la police : 600 ;
arrière-plan : #305980!important ;
}
.ac_side-menu {
largeur : 100 % ;
border-bottom : 0 none ;
border-top-color : #2c2c2c ;
taille de la boîte : border-box ;
margin-top : 1px ;
}
nav.sidenav .sub-container {
couleur de fond : #2c2c2c ;
}
nav.sidenav .logo:after, nav.sidenav .logo:before {
box-shadow : inset 1px 1px #2c2c2c ;
}
Personnaliser les boutons avec CSS
Vous trouverez ci-dessous des propriétés CSS personnalisées que vous pouvez utiliser pour mettre à jour le style de différents boutons dans l'application ActiveCampaign.
Les propriétés CSS sont nommées de manière à indiquer clairement ce qu'elles contrôlent. Le modèle suivant est celui que nous utilisons pour différencier les types, les états et les modifications d'un élément donné :
--[prefix-]ComponentName[-asVariant][-descendant|--modificateur][-onState]-(cssProperty|variableName)
Remplir (par défaut) :
--camp-Button-backgroundColor
--camp-Button-onDisabled-backgroundColor (couleur de fond du bouton désactivé)
--camp-Button-onFocus-backgroundColor
--camp-Button-borderColor
--camp-Button-onDisabled-borderColor
--camp-Button-onFocus-borderColor
--Couleur du bouton de camp
--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
Contour
--Couleur d'arrière-plan du bouton de camp comme de la ligne d'affichage
--camp-Button-asOutline-onDisabled-backgroundColor (couleur de fond du bouton désactivé)
--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
Couleur du texte
--camp-Button-asText-backgroundColor
--camp-Button-asText-onDisabled-backgroundColor (couleur de fond du bouton désactivé)
--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