Guía CSS de la Agencia ActiveCampaign

Disponible en los planes Marketing Sales
Lite Plus Professional Enterprise

Como socio de agencia ActiveCampaign, tiene acceso a hojas de estilo CSS completas. Puede utilizar estas hojas de estilo para etiquetar en blanco sus cuentas de revendidas. Por ejemplo, puede cambiar el logotipo de ActiveCampaign por su 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 marca enumerados en este artículo a todas las cuentas de revenidas o cuentas de revención individuales.

Acceda a la configuración de personalización de marca para todas las cuentas de revendidas

Los cambios realizados aquí se aplican globalmente a todas las cuentas de venidas.

En el Panel de la agencia, haga clic en "Configuración de cuentas predeterminadas" en el menú derecho del Panel de la agencia.

Acceda a la configuración de personalización de marca para cuentas individuales

Los cambios realizados aquí se aplican a cuentas de revención individuales.

En el Panel de la agencia, haga clic en el intercalación de la cuenta con la que desea trabajar. A continuación, haga clic en la opción "Branding".

Cambiar el logotipo y el favicon

Para añadir tu logotipo y favicon a las cuentas revendidas, tendrás que subir el logotipo o favicon a una plataforma de alojamiento de imágenes. Una plataforma que puedes utilizar es Imgur. A continuación, copie la URL de la imagen y péguela en los campos de logotipo y favicon proporcionados.

Cambiar la hoja de estilo

Los cambios en la hoja de estilos le permiten personalizar el CSS de sus cuentas de revendción.

Para personalizar el CSS de tus cuentas de revendción:

1. Haga clic en la casilla de verificación "Personalizar estilos CSS de 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. Un cuadro se expandirá en la sección "Plantillas y estilos". Escriba o pegue el código CSS en el cuadro proporcionado.

3. Haga clic en el botón "Actualizar" en la parte inferior de la página cuando haya terminado.

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 ayudarle a empezar a realizar cambios en la hoja de estilos.

.notify.success ?
    color: #305980;
    antecedentes: #b8d9f9;
}
.ac_login_box .ac_button ?
    color de fondo: #305980 !importante;
    borde: #305980 sólido de 1px !importante;
    Ancho: 160px;
}
.ac_login_box .ac_login inferior a la unidad de
    Tamaño de fuente 14px;
    color: #305980;
    peso de fuente: 600.
    margen superior: 12px;
}
body.login, body.logout ?
    antecedentes: #8d8d8d;
}
nav.sidenav.collapse .ac_input-search-collapse
•    color de fondo: #f3f3f3;
    color: #000;
    Frontera: 1px #5fafff sólido;
}
.ac_input nav.sidenav .ac_input-search ?
    relleno: 7px 0px 7px 40px !importante;
    color de fondo: #f3f3f3;
    color: #000;
    borde: sólido 1px #5fafff;
    -webkit-appearance: ninguno;
}
nav.sidenav .logo ?
    pantalla: bloque;
    Ancho: 100.
    Altura: 64px;
    altura máxima: 64px;
    color de fondo: #2c2c2c;
    alineación de texto: centro;
    decoración de texto: ninguno;
}
nav.sidenav .main-container .
    color de fondo: #305980!importante;
}
nav.sidenav .sub-container .side-menu-header .
    transformación de texto: mayúsculas!importante;
    peso de fuente: 600.
    color de fondo: #2c2c2c!importante;
Tamaño de fuente 15px!importante;
}
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 ?
    color de fondo: #305980;
}
.ac_multibutton > .icon:hover - fondo: #71c7ff;
.ac_multibutton > .icon ?
    antecedentes: #4d8ecc;
    borde-izquierda: #efefef sólido de 1px;
}
.ac_button.alt1 ?
    color de fondo: #4D8ECC;
    color: #fff !importante;
    color del borde: #4D8ECC;
}
.ac_button.alt2 ?
    color de fondo: #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 - fondo: #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 ?
color de fondo: #71c7ff; color del borde: #71c7ff; 
}
.ac_button.alt2.alt2:hover - color de fondo: #71c7ff; color del borde: #71c7ff;
.ac_button.blue, a.ac_button.blue ?
    color: #fff;
    color de fondo: #4D8ECC;
    Frontera: 1px #4D8ECC sólido;
}
.ac_button.blue:hover, a.ac_button.blue:hover?
    color de fondo: #71c7ff;
    color del borde: #71c7ff;
}
ac_button.green, .ac_button.greenbtn ?
    antecedentes: #4D8ECC;
    color: #fff;
    Frontera: 1px #4D8ECC sólido;
}
.ac_button.green:hover, .ac_button.greenbtn:hover á color: #fff;color de fondo: #71c7ff; color del borde: #71c7ff;
.ac_button.blue, .ac_button.bluebtn ?
    color: #fff;
    color de fondo: #4D8ECC;
    Frontera: 1px #4D8ECC sólido;
}
.ac_button.blue:hover, .ac_button.bluebtn:hover á color: #fff;color de fondo: #71c7ff; color del borde: #71c7ff;
.ac_button.blue-border, .ac_button.blueborderbtn ?
    color de fondo: 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])
    color de fondo: #4D8ECC!importante;
    color: blanco !importante;
    relleno: blanco !importante;
}
.ac_multibutton > ul ?
    fondo: #305980!importante;
}
nav.sidenav .sub-container .ac_side-menu .active, nav.sidenav .sub-container .ac_side-menu .active * ?
    peso de fuente: 600.
fondo: #305980!importante;
}
.ac_side-menú de la unidad de comandos de la unidad
    Ancho: 100.
    borde inferior: 0 ninguno;
    borde-top-color: #2c2c2c;
    tamaño de caja: border-box;
    margen superior: 1px;
}
nav.sidenav .sub-container ?
    color de fondo: #2c2c2c;
}
nav.sidenav .logo:after, nav.sidenav .logo:before ?
    sombra de caja: 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 ser claras acerca de lo que controlan. El siguiente patrón es lo que usamos para diferenciar tipos, estados y modificaciones para un elemento determinado:

--[prefijo-]ComponentName[-asVariant][-descendant---modifier][-onState]-(cssProperty-variableName)


Relleno (predeterminado):

del botón rellenoEjemplo
--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

del botón esbozadoEjemplo
--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

del botón de color del textoEjemplo
--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
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 2

Have more questions? Submit a request

Start free trial