Guide CSS de l'agence ActiveCampaign

En tant qu'agence partenaire d'ActiveCampaign, vous avez accès à des feuilles de style CSS complètes. Vous pouvez utiliser ces feuilles de style pour octroyer un label privé à vos comptes revendus. Par exemple, vous pouvez remplacer le logo d'ActiveCampaign par le vôtre ou vous pouvez modifier l'aspect et la convivialité de l'ensemble de l'application.

Repérer les paramètres de la marque

Vous pouvez appliquer les changements de marque énumérés 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.

Dans le tableau de bord de l'Agence, cliquez sur "Paramètres des comptes par défaut" 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 le signe inférieur du compte avec lequel vous souhaitez travailler. Cliquez ensuite sur l'option "Branding".

Changer le logo et le favicon

Pour ajouter votre logo et favicon aux comptes revendus, vous devrez télécharger le logo ou favicon sur une plateforme d'hébergement d'images. L'une des plateformes que vous pouvez utiliser est Imgur. Copiez ensuite l'URL de l'image et collez-la dans les champs du logo et de l'icône fournis.

Changer la feuille de style

Les modifications apportées à la feuille de style vous permettent de personnaliser le CSS de vos comptes revendus.

Pour personnaliser le CSS de vos comptes revendus :

1. Cochez la case "Personnaliser les styles CSS de la section d'administration". Elle se trouve dans la section "Modèles et styles" de la page de configuration des comptes du tableau de bord de l'Agence.

2. Un encadré s'ouvrira dans la section "Modèles et styles". Tapez ou collez le code CSS dans la case prévue à cet effet.

3. Cliquez sur le bouton "Mise à jour" en bas de la page lorsque vous avez terminé.

Éléments de la plate-forme commune

Vous trouverez ci-dessous un exemple de CSS pour les éléments communs de la plate-forme ActiveCampaign. Vous pouvez vous en servir pour vous aider à commencer à modifier les feuilles de style.

.notify.success {
    couleur : #305980 ;
    de fond : #b8d9f9 ;
}
.ac_login_box .ac_button {
    couleur de fond : #305980 !important ;
    frontière : #305980 1px solide !important ;
    largeur : 160px ;
}
.ac_login_box .ac_login-lower {
    Taille de la police 14px ;
    couleur : #305980 ;
    le poids de la police : 600.
    marge supérieure : 12px ;
}
body.login, body.logout {
    de fond : #8d8d8d ;
}
nav.sidenav.collapse .ac_input-search-collapse
{   background-color : #f3f3f3 ;
    couleur : #000 ;
    frontière : 1px solide #5fafff ;
}
nav.sidenav .ac_input-search .ac_input {
    marge intérieure : 7px 0px 7px 40px !important ;
    couleur de fond : #f3f3f3 ;
    couleur : #000 ;
    bordure : solide 1px #5fafff ;
    -apparence du webkit : aucune ;
}
nav.sidenav .logo {
    affichage : bloc ;
    largeur : 100.
    hauteur : 64px ;
    hauteur maximale : 64px ;
    couleur de fond : #2c2c2c ;
    Alignement du texte : au centre ;
    texte-décoration : aucun ;
}
nav.sidenav .main-container {
    couleur de fond : #305980!important ;
}
nav.sidenav .sub-container .side-menu-header {
    texte-transformation : majuscules ! important ;
    le poids de la police : 600.
    couleur de fond : #2c2c2c!important ;
Taille de la police 15px!important ;
}
nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
    position : absolue ;
    Contenu
    haut : 0.
    à droite : -1px ;
    largeur : 0.
}
nav.sidenav .actmenu {
    couleur de fond : #305980 ;
}
.ac_multibutton > .icon:hover [background : #71c7ff ; }
.ac_multibutton > .icon {
    de fond : #4d8ecc ;
    frontière-gauche : #efefef 1px solide ;
}
.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 > .popover-trigger
    de fond : #4D8ECC ;
}
.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger [background : #71c7ff ; }
.ac_multiaction.mini-button-top .popover-trigger {
    de fond : #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 ; couleur de la bordure : #71c7ff ; 
}
.ac_button.alt2.alt2:hover { couleur de fond : #71c7ff ; couleur de la bordure : #71c7ff ; }
.ac_button.blue, a.ac_button.blue {
    couleur : #fff ;
    couleur de fond : #4D8ECC ;
    frontière : 1px solide #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 {
    de fond : #4D8ECC ;
    couleur : #fff ;
    frontière : 1px solide #4D8ECC ;
}
.ac_button.green:hover, .ac_button.greenbtn:hover { color : #fff;background-color : #71c7ff ; couleur de la bordure : #71c7ff ; }
.ac_button.blue, .ac_button.bluebtn {
    couleur : #fff ;
    couleur de fond : #4D8ECC ;
    frontière : 1px solide #4D8ECC ;
}
.ac_button.blue:hover, .ac_button.bluebtn:hover { color : #fff;background-color : #71c7ff ; couleur de la bordure : #71c7ff ; }
.ac_button.blue-border, .ac_button.blueborderbtn {
    couleur de fond : transparent ;
    couleur : #4D8ECC ;
    frontière : #4D8ECC1px solide ;
}
.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { color : #075F59 ; border-color : #075F59 ; }
.u-userLauncherColor:not([disabled]) {
    couleur de fond : #4D8ECC!important ;
    couleur : blanc !important ;
    remplissage : blanc !important ;
}
.ac_multibutton > ul {
    de fond : #305980!important ;
}
nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
    le poids de la police : 600.
de fond : #305980!important ;
}
.ac_side-menu {
    largeur : 100.
    frontière-fond : 0 aucun ;
    frontière-top-couleur : #2c2c2c ;
    taille de la boîte : border-box ;
    marge supérieure : 1px ;
}
nav.sidenav .sub-container {
    couleur de fond : #2c2c2c ;
}
nav.sidenav .logo:après, nav.sidenav .logo:avant {
    box-shadow : encart 1px 1px #2c2c2c ;
}

Personnaliser les boutons avec le CSS

Vous trouverez ci-dessous les propriétés CSS personnalisées que vous pouvez utiliser pour mettre à jour le style des différents boutons de l'application ActiveCampaign.

Les propriétés du CSS sont nommées de manière à ce que les éléments qu'elles contrôlent soient clairs. Le schéma suivant est celui que nous utilisons pour différencier les types, les états et les modifications pour un élément donné :

--[prefix-]ComponentName[-asVariant][-descendant|--modificateur][-onState]-(cssProperty|variableName)


Remplir (par défaut) :

Exemple de bouton rempli
--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--destructif-surFocus-backgroundColor
--camp-Button--destructive-borderColor
--camp-Button--destructive-onDisabled BorderColor
--camp-Button--destructif-onFocus-borderColor
--camp-Button--destructive-color
--camp-Button--destructive-onDisabled-color
--camp-Button--destructive-onFocus-color


Aperçu

Exemple de bouton souligné
--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


Couleur du texte

Exemple de bouton de couleur de texte
--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
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0
Vous avez d’autres questions ? Envoyer une demande