1. ActiveCampaign-Kundensupport
  2. Konto, Abrechnung und Einrichtung
  3. Partnerprogramme

ActiveCampaign Agentur CSS Anleitung

Avatar
Ryan R
Letzte Aktualisierung:
ActiveCampaign Tarife
Starter
Plus
Pro
Enterprise

Als ActiveCampaign Agency Partner haben Sie Zugang zu allen 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 Erscheinungsbild 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.

Zugang zu den Branding-Einstellungen für alle wiederverkauften Konten

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

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

Zugang zu den Branding-Einstellungen für einzelne Konten

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

Klicken Sie im Dashboard der Agentur auf das nach unten zeigende Symbol für das Konto, mit dem Sie arbeiten möchten. Klicken Sie dann unter 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 nutzen 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:

Klicken Sie auf die Option "Customize Admin CSS Styles". Diese befindet sich im Abschnitt "Vorlagen und Stile" auf der Seite mit den Kontoeinstellungen im Dashboard der Agentur.

2. Im Abschnitt "Vorlagen und Stile" wird ein Feld eingeblendet. Geben Sie den CSS-Code in das vorgesehene Feld ein oder fügen Sie ihn ein.

Wenn Sie fertig sind, klicken Sie auf auf die Schaltfläche "Hinzufügen" unten im Formular.

Gemeinsame Plattformelemente

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

.notify.success {
    farbe: #305980;
    hintergrund: #b8d9f9;
}
.ac_login_box .ac_button {
    hintergrund-Farbe: #305980 !important;
    border: #305980 1px solid !important;
    breite: 160px;
}
.ac_login_box .ac_login-lower {
    schriftgröße: 14px;
    farbe: #305980;
    schriftgewicht: 600;
    rand-oben: 12px;
}
body.login, body.logout {
    hintergrund: #8d8d8d;
}
nav.sidenav.collapse .ac_input-search-collapse
{ background-color: #f3f3f3;
    farbe: #000;
    border: 1px solid #5fafff;
}
nav.sidenav .ac_input-search .ac_input {
    padding: 7px 0px 7px 40px !important;
    hintergrund-Farbe: #f3f3f3;
    farbe: #000;
    rand: solid 1px #5fafff;
    -webkit-Erscheinung: keine;
}
nav.sidenav .logo {
    anzeige: Block;
    breite: 100%;
    höhe: 64px;
    max-Höhe: 64px;
    hintergrund-Farbe: #2c2c2c;
    text-align: Zentrum;
    textdekoration: keine;
}
nav.sidenav .main-container {
    hintergrund-Farbe: #305980!important;
}
nav.sidenav .sub-container .side-menu-header {
    text-transform: Großbuchstaben!important;
    schriftgewicht: 600;
    hintergrund-Farbe: #2c2c2c!important;
font-size: 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 {
    hintergrund-Farbe: #4D8ECC;
    color: #fff !important;
    rahmen-Farbe: #4D8ECC;
}
.ac_button.alt2 {
    hintergrund-Farbe: #4D8ECC;
    rahmen-Farbe: #4D8ECC;
    color: #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 {
    color: #fff;
    hintergrund-Farbe: #4D8ECC;
    rahmen: 1px solid #4D8ECC;
}
.ac_button.blue:hover, a.ac_button.blue:hover {
    hintergrund-Farbe: #71c7ff;
    border-color: #71c7ff;
}
ac_button.green, .ac_button.greenbtn {
    hintergrund: #4D8ECC;
    color: #fff;
    rahmen: 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 {
    color: #fff;
    hintergrundfarbe: #4D8ECC;
    rahmen: 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]) {
    hintergrund-Farbe: #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 * {
    schriftgewicht: 600;
hintergrund: #305980!important;
}
.ac_side-menu {
    breite: 100%;
    border-bottom: 0 keine;
    border-top-color: #2c2c2c;
    box-sizing: border-box;
    rand-oben: 1px;
}
nav.sidenav .sub-container {
    hintergrund-Farbe: #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, mit denen Sie das Styling verschiedener Schaltflächen innerhalb der ActiveCampaign-App aktualisieren können.

Die CSS-Eigenschaften werden 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][-nachgeordneter|--modifier][-onState]-(cssEigenschaft|Variablenname)

 

Füllen (Standard):

--camp-Button-backgroundColor
--camp-Buttonon-onDisabled-backgroundColor
--camp-Buttonon-onFocus-backgroundColor
--camp-Button-borderColor
--camp-Buttonon-onDisabled-borderColor
--camp-Buttonon-onFocus-borderColor
--camp-Button-Farbe
--camp-Buttonon-onDisabled-color
--camp-Buttonon-onFocus-color
--camp-Button--destruktive-Hintergrundfarbe
--camp-Button--destructive-onDisabled-backgroundColor
--camp-Button--destructive-onFocus-backgroundColor
--camp-Button--destruktive-borderColor
--camp-Button--destructive-onDisabled-borderColor
--camp-Button--destructive-onFocus-borderColor
--camp-Button--destruktive-Farbe
--camp-Button--destructive-onDisabled-color
--camp-Button--destructive-onFocus-color

 

Kontur

--camp-Button-asOutline-Hintergrundfarbe
--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-Umriss-Farbe
--camp-Button-asOutline-onDisabled-color
--camp-Button-asOutline-onFocus-color

 

Textfarbe

--camp-Button-als-Text-Hintergrundfarbe
--camp-Buttonon-asText-onDisabled-backgroundColor
--camp-Button-alsText-auf-Fokus-Hintergrundfarbe
--camp-Button-asText-borderColor
--camp-Button-asText-onDisabled-borderColor
--camp-Button-asText-onFocus-borderColor
--camp-Button-als-Text-Farbe
--camp-Buttonon-asText-onDisabled-color
--camp-Button-asText-onFocus-color
--camp-Button-alsText--destruktive-Hintergrundfarbe
--camp-Button-asText--destruktiv-beiDisabled-backgroundColor
--camp-Button-alsText--destruktiv-beiFokus-Hintergrundfarbe
--camp-Button-asText--destruktive-borderColor
--camp-Button-asText--destruktiv-beiDisabled-borderColor
--camp-Button-asText--destruktiv-aufFocus-borderColor
--camp-Button-alsText--destruktive-Farbe
--camp-Button-asText--destruktiv-bei-Disabled-Farbe
--camp-Button-asText--destruktiv-auf-Fokus-Farbe

Verknüpfung mit:

War dieser Beitrag hilfreich?
2 von 6 fanden dies hilfreich

Haben Sie weitere Fragen? Anforderung einreichen

Start free trial