Como socio de agencia de ActiveCampaign, tiene acceso a hojas de estilo CSS completas. Puede usar estas hojas de estilo para etiquetar en blanco sus cuentas revendidas. Por ejemplo, puede cambiar el logotipo de ActiveCampaign por el suyo propio o puede cambiar la apariencia de toda la aplicación.
Localizar la configuración de personalización de marca
Puede aplicar los cambios de personalización de marca enumerados en este artículo a todas las cuentas revendidas o cuentas revendidas individuales.
Acceder a la configuración de personalización de todas las cuentas revendidas
Los cambios realizados aquí se aplican globalmente a todas las cuentas revendidas.
Desde el Panel de Control de la Agencia, haga clic en "Configuración predeterminada de las cuentas" en el menú derecho del Panel de la Agencia.
Acceder a la configuración de personalización de marca para cuentas individuales
Los cambios realizados aquí se aplican a cuentas individuales revendidas.
En el panel de control de la agencia, haga clic en el símbolo de intercalación hacia abajo de la cuenta con la que desea trabajar. Luego haga clic en la opción "Personalización".
Cambiar el logotipo y el favicon
Para agregar su logotipo y favicon a las cuentas revendidas, deberá cargar el logotipo o el favicon en una plataforma de alojamiento de imágenes. Una plataforma que puedes usar es Imgur. Luego copie la URL de la imagen y péguela en los campos de logotipo y favicon proporcionados.
Cambiar la hoja de estilos
Los cambios en la hoja de estilo le permiten personalizar el CSS de sus cuentas revendidas.
Para personalizar el CSS de tus cuentas revendidas:
1. Haga clic en la casilla de verificación "Personalizar estilos CSS de la sección de administración". Esto se encuentra en la sección "Plantillas y estilos" de la página de configuración de la cuenta del Panel de la agencia.
2. Se abrirá un cuadro en la sección "Plantillas y estilos". Escriba o pegue el código CSS en el cuadro proporcionado.
Cuando termine, haga clic en el botón "Agregar" en la parte inferior del formulario.
Elementos comunes de la plataforma
A continuación se muestra un ejemplo de CSS para elementos comunes en la plataforma ActiveCampaign. Puede usar esto para ayudarlo a comenzar a realizar cambios en la hoja de estilo.
.notify.success {
Color: #305980;
Antecedentes: #b8d9f9;
}.ac_login_box .ac_button {
fondo-color: #305980 !importante;
borde: #305980 1px sólido !importante;
ancho: 160px;
}.ac_login_box .ac_login-lower {
tamaño de fuente: 14px;
Color: #305980;
font-weight: 600;
margin-top: 12px;
}body.login, body.logout {
Antecedentes: #8d8d8d;
}nav.sidenav.collapse .ac_input-search-collapse
{ background-color: #f3f3f3;
Color: #000;
borde: 1px sólido #5fafff;
}nav.sidenav .ac_input-search .ac_input {
relleno: 7px 0px 7px 40px !importante;
fondo-color: #f3f3f3;
Color: #000;
borde: sólido 1px #5fafff;
-webkit-apariencia: ninguno;
}nav.sidenav .logo {
Pantalla: bloque;
ancho: 100%;
altura: 64px;
altura máxima: 64px;
fondo-color: #2c2c2c;
alineación de texto: centro;
decoración de texto: ninguno;
}nav.sidenav .main-container {
fondo-color: #305980!importante;
}nav.sidenav .sub-container .side-menu-header {
text-transform: mayúsculas!important;
font-weight: 600;
fondo-color: #2c2c2c!importante;
tamaño de fuente: 15px!important;
}nav.sidenav.collapse .main-container:after, nav.sidenav.collapse .main-container:before {
Posición: absoluta;
contenido: '';
arriba: 0;
derecha: -1px;
ancho: 0;
}nav.sidenav .actmenu {
fondo-color: #305980;
}.ac_multibutton > .icon:hover { background: #71c7ff; }.ac_multibutton > .icon {
Antecedentes: #4d8ecc;
borde-izquierda: #efefef 1px sólido;
}.ac_button.alt1 {
fondo-color: #4D8ECC;
color: #fff !importante;
color del borde: #4D8ECC;
}.ac_button.alt2 {
fondo-color: #4D8ECC;
color del borde: #4D8ECC;
color: #fff !importante;
}.mini-button-top > .popover-trigger {
Antecedentes: #4D8ECC;
}.mini-button-top > .popover-trigger:hover, .mini-button-top.active > .popover-trigger { background: #71c7ff; }.ac_multiaction.mini-button-top .popover-trigger {
Antecedentes: #4D8ECC;
}.ac_multiaction.mini-button-top .popover-trigger:hover,.ac_multiaction.mini-button-top.open .popover-trigger{background:#71c7ff}.ac_button.alt1:hover {
fondo-color: #71c7ff; color del borde: #71c7ff;
}.ac_button.alt2.alt2:hover { background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue, a.ac_button.blue {
color: #fff;
fondo-color: #4D8ECC;
borde: 1px sólido #4D8ECC;
}.ac_button.blue:hover, a.ac_button.blue:hover {
fondo-color: #71c7ff;
color del borde: #71c7ff;
}ac_button.green, .ac_button.greenbtn {
Antecedentes: #4D8ECC;
color: #fff;
borde: 1px sólido #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;
fondo-color: #4D8ECC;
borde: 1px sólido #4D8ECC;
}.ac_button.blue:hover, .ac_button.bluebtn:hover { color: #fff;background-color: #71c7ff; border-color: #71c7ff; }.ac_button.blue-border, .ac_button.blueborderbtn {
fondo-color: transparente;
color: #4D8ECC;
borde: #4D8ECC1px sólido;
}.ac_button.blue-border:hover, .ac_button.blueborderbtn:hover { color: #075F59; border-color: #075F59; }.u-userLauncherColor:not([disabled]) {
fondo-color: #4D8ECC!importante;
color: blanco !importante;
relleno: blanco !importante;
}.ac_multibutton > ul {
Antecedentes: #305980!importante;
}nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * {
font-weight: 600;
Antecedentes: #305980!importante;
}.ac_side-menu {
ancho: 100%;
borde inferior: 0 ninguno;
borde-superior-color: #2c2c2c;
tamaño de caja: border-box;
margen superior: 1px;
}nav.sidenav .sub-container {
fondo-color: #2c2c2c;
}nav.sidenav .logo:after, nav.sidenav .logo:before {
box-shadow: inserción 1px 1px #2c2c2c;
}Personalizar botones con CSS
A continuación se muestran las propiedades personalizadas de CSS que puede usar para actualizar el estilo de diferentes botones dentro de la aplicación ActiveCampaign.
Las propiedades CSS se nombran para que queden claras sobre lo que controlan. El siguiente patrón es lo que usamos para diferenciar tipos, estados y modificaciones para un elemento determinado:
--[prefix-]ComponentName[-asVariant][-descendant|--modifier][-onState]-(cssProperty|variableName)
Relleno (predeterminado):
--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
Contorno
--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
Color del texto
--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