Todos los componentes incorporados de los sitios comparten una estructura de clases CSS similar.
Cada componente tiene las tres clases CSS siguientes aplicadas a su elemento <div> más externo:
scs-component scs-type design-style
type es el tipo de componente (como, por ejemplo, image, gallery o divider). design-style es la clase de estilo seleccionada para un componente, como se define en el archivo del tema.
Aspectos básicos de los estilos de tema
El archivo design.json de un tema muestra todos los estilos (frame, shadow, highlighted, etc.) que pueden aplicarse a cada tipo de componente (como button o image). Cada estilo tiene un display name y un class name. El nombre mostrado aparece en el separador Estilo del panel Configuración. El nombre de clase hace referencia a un selector de CSS en el archivo design.css del tema. Por ejemplo, a continuación se muestra la entrada para el componente button:
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
Se traducen los nombres de los componentes incorporados, por lo que verá una clave para obtener el nombre desde el grupo de recursos. Si agrega un componente button a una página y, a continuación, selecciona el estilo Simple en el panel Configuración > Estilo, el archivo design.json asocia el nombre mostrado Simple (clave COMP_STYLE_SIMPLE) al nombre de clase scs-button-style-3. button se representará con las siguientes clases:
scs-component scs-button scs-button-style-3
Si no se ha seleccionado ningún estilo para un componente determinado, se utilizará el estilo por defecto scs-type-default-style. En el ejemplo anterior, el botón se representará con las siguientes clases:
scs-component scs-button scs-button-default-style
Estilo scs-component-content
Para cada componente incorporado, en el scs-component <div> mencionado previamente, hay un content <div> con la clase CSS scs-component-content. Es decir:
scs-component scs-type design-style scs-component-content
En el archivo design.css , la clase scs-component-content se utiliza a menudo para aplicar un estilo al "recuadro" alrededor del componente (por ejemplo, para aplicar un borde o una sombra).
Conviene tener en cuenta que en el archivo incorporado comp.css, la clase común scs-component-content se define con position:relative y display:inline-block, entre otras propiedades de CSS.
Mientras que scs-component-content es útil para el estilo del "recuadro" alrededor de cada componente, las clases específicas del componente son necesarias para aplicar un estilo completo a un componente. Consulte Aplicación de estilos específicos del componente.