ActiveCampaign Agentur CSS-Anleitung

Als ActiveCampaign Agency Partner haben Sie Zugriff auf alle CSS-Stylesheets. Sie können diese Stylesheets verwenden, um Ihre wiederverkauften Konten mit einem White Label zu versehen. Sie können zum Beispiel das ActiveCampaign-Logo gegen Ihr eigenes austauschen oder das Aussehen der gesamten Anwendung ändern.

Suchen Sie die Branding-Einstellungen

Sie können die in diesem Artikel aufgeführten Änderungen am Branding auf alle wiederverkauften Konten oder auf einzelne wiederverkaufte Konten anwenden.

Zugriff auf Branding-Einstellungen für alle wiederverkauften Konten

Die hier vorgenommenen Änderungen werden global auf alle wiederverkauften Konten angewendet.

Klicken Sie im Agency Dashboard auf "Standardkonteneinstellungen" im rechten Menü des Agency Dashboards.

Zugriff auf Branding-Einstellungen für einzelne Konten

Die hier vorgenommenen Änderungen werden auf einzelne wiederverkaufte Konten angewendet.

Klicken Sie im Agency Dashboard auf das nach unten zeigende Caret für das Konto, mit dem Sie arbeiten möchten. Klicken Sie dann auf die Option "Branding".

Ändern Sie das Logo und das Favicon

Um Ihr Logo und Favicon zu wiederverkauften Konten hinzuzufügen, müssen Sie das Logo oder Favicon auf eine Bildhosting-Plattform hochladen. Eine Plattform, die Sie verwenden können, ist Imgur. Kopieren Sie dann die URL des Bildes und fügen Sie sie in die vorgesehenen Felder für Logo und Favicon ein.

Ändern Sie das Stylesheet

Durch Änderungen am Stylesheet können Sie das CSS Ihrer wiederverkauften Konten anpassen.

So passen Sie das CSS für Ihre wiederverkauften Konten an:

1. Klicken Sie auf das Kontrollkästchen "Customize Admin Section CSS Styles". Diese befindet sich unter dem Abschnitt "Vorlagen & Stile" auf der Seite "Kontoeinstellungen" des Agentur-Dashboards.

2. Im Bereich "Templates & Styles" wird ein Feld aufgeklappt. Geben Sie den CSS-Code ein oder fügen Sie ihn in das vorgesehene Feld ein.

3. Klicken Sie auf die Schaltfläche "Aktualisieren" am unteren Rand der Seite, wenn Sie fertig sind.

Gemeinsame Plattformelemente

Nachfolgend finden Sie Beispiel-CSS für gängige Elemente in der ActiveCampaign-Plattform. Sie können dies als Einstiegshilfe für Stylesheet-Änderungen verwenden.

.notify.success {
    Farbe: #305980;
    Hintergrund: #b8d9f9;
}
.ac_login_box .ac_button {
    Hintergrund-Farbe: #305980 !important;
    Rahmen: #305980 1px solid !important;
    Breite: 160px;
}
.ac_login_box .ac_login-lower {
    Schriftgröße 14px;
    Farbe: #305980;
    font-weight: 600.
    Rand-oben: 12px;
}
body.login, body.logout {
    Hintergrund: #8d8d8d;
}
nav.sidenav.collapse .ac_input-search-collapse
{   background-color: #f3f3f3;
    Farbe: #000;
    Grenze: 1px solid #5fafff;
}
nav.sidenav .ac_input-search .ac_input {
    Padding: 7px 0px 7px 40px !important;
    Hintergrund-Farbe: #f3f3f3;
    Farbe: #000;
    border: solid 1px #5fafff;
    -webkit-appearance: keine;
}
nav.sidenav .logo {
    Anzeige: Block;
    Breite: 100.
    Höhe: 64px;
    max-Höhe: 64px;
    background-color: #2c2c2c;
    text-align: center;
    text-decoration: keine;
}
nav.sidenav .main-container {
    Hintergrund-Farbe: #305980!important;
}
nav.sidenav .sub-container .side-menu-header {
    text-transform: uppercase!important;
    font-weight: 600.
    background-color: #2c2c2c!important;
Schriftgröße 15px!important;
}
nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
    Position: absolut;
    Inhalt
    oben: 0.
    rechts: -1px;
    Breite: 0.
}
nav.sidenav .actmenu {
    Hintergrund-Farbe: #305980;
}
.ac_multibutton > .icon:hover { background: #71c7ff; }
.ac_multibutton > .icon {
    Hintergrund: #4d8ecc;
    border-left: #efefef 1px solid;
}
.ac_button.alt1 {
    background-color: #4D8ECC;
    Farbe: #fff !important;
    border-color: #4D8ECC;
}
.ac_button.alt2 {
    background-color: #4D8ECC;
    border-color: #4D8ECC;
    Farbe: #fff !important;
}
.mini-button-top > .popover-trigger {
    Hintergrund: #4D8ECC;
}
.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { background: #71c7ff; }
.ac_multiaction.mini-button-top .popover-trigger {
    Hintergrund: #4D8ECC;
}
.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}
.ac_button.alt1:hover {
background-color: #71c7ff; border-color: #71c7ff; 
}
.ac_button.alt2.alt2:hover { background-color: #71c7ff; border-color: #71c7ff; }
.ac_button.blue, a.ac_button.blue {
    Farbe: #fff;
    background-color: #4D8ECC;
    Grenze: 1px solid #4D8ECC;
}
.ac_button.blue:hover, a.ac_button.blue:hover {
    background-color: #71c7ff;
    border-color: #71c7ff;
}
ac_button.green, .ac_button.greenbtn {
    Hintergrund: #4D8ECC;
    Farbe: #fff;
    Grenze: 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 {
    Farbe: #fff;
    background-color: #4D8ECC;
    Grenze: 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 {
    Hintergrundfarbe: transparent;
    Farbe: #4D8ECC;
    Rahmen: #4D8ECC1px solid;
}
.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { color: #075F59; border-color: #075F59; }
.u-userLauncherColor:not([disabled]) {
    background-color: #4D8ECC!important;
    Farbe: weiß !wichtig;
    Füllung: weiß !wichtig;
}
.ac_multibutton > ul {
    Hintergrund: #305980!important;
}
nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
    font-weight: 600.
Hintergrund: #305980!important;
}
.ac_side-menu {
    Breite: 100.
    Rand-unten: 0 keine;
    border-top-color: #2c2c2c;
    box-sizing: border-box;
    Rand-oben: 1px;
}
nav.sidenav .sub-container {
    background-color: #2c2c2c;
}
nav.sidenav .logo:after, nav.sidenav .logo:before {
    box-shadow: inset 1px 1px #2c2c2c;
}

Anpassen von Schaltflächen mit CSS

Im Folgenden finden Sie benutzerdefinierte CSS-Eigenschaften, die Sie verwenden können, um das Styling verschiedener Schaltflächen innerhalb der ActiveCampaign-Anwendung zu aktualisieren.

Die CSS-Eigenschaften sind so benannt, dass klar wird, was sie steuern. Das folgende Muster wird verwendet, um Typen, Zustände und Änderungen für ein bestimmtes Element zu unterscheiden:

--[Präfix-]Komponentenname[-alsVariant][-nachrangig--modifier][-onState]-(cssEigenschaftVariablenname)


Füllen (Standard):

Beispiel für eine gefüllte Taste
--camp-Button-backgroundColor
--camp-Buttonon-onDisabled-backgroundColor
--camp-Button-onFocus-backgroundColor
--camp-Button-borderColor
--camp-Buttonon-onDisabled-borderColor
--camp-Button-onFocus-borderColor
--Camp-Button-Farbe
--camp-Buttonon-onDisabled-color
--camp-Button-onFocus-color
--camp-Button--destruktiv-backgroundColor
--camp-Button--destructive-onDisabled-backgroundColor
--camp-Button--destructive-onFocus-backgroundColor
--camp-Button--destruktive-borderColor
--camp-Button--destructive-onDisabled-borderColor
--camp-Button--destruktiv-aufFocus-borderColor
--camp-Button--destruktive-Farbe
--camp-Button--destructive-onDisabled-color
--camp-Button--destruktiv-auf-Fokus-Farbe


Gliederung

Beispiel für eine skizzierte Taste
--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-als-Outline-Farbe
--camp-Button-asOutline-onDisabled-color
--camp-Button-asOutline-onFocus-color


Textfarbe

Beispiel für Textfarbtaste
--camp-Button-asText-backgroundColor
--camp-Buttonon-asText-onDisabled-backgroundColor
--camp-Button-onasText-onFocus-backgroundColor
--camp-Button-asText-borderColor
--camp-Button-asText-onDisabled-borderColor
--camp-Button-asText-onFocus-borderColor
--Camp-Button-als-Text-Farbe
--camp-Button-asText-onDisabled-color
--camp-Button-asText-onFocus-color
--camp-Button-asText--destruktive-hintergrundfarbe
--camp-Button-asText--destruktiv-beiDisabled-backgroundColor
--camp-Button-asText--destruktiv-aufFocus-backgroundColor
--camp-Button-asText--destruktive-borderColor
--camp-Button-asText--destruktiv-bei-Deaktivierung-borderColor
--camp-Button-asText--destruktiv-aufFocus-borderColor
--camp-Button-als-Text--destruktive-Farbe
--camp-Button-asText--destructive-onDisabled-color
--camp-Button-asText--destruktiv-auf-Fokus-Farbe
Haben Sie Fragen? Anfrage einreichen