Todos os componentes de Sites integrados partilham uma estrutura de classes de CSS semelhante.
Cada componente tem as três classes de CSS seguintes aplicadas ao respetivo elemento <div> mais externo:
scs-component scs-type design-style
O type é o tipo de componente (como image, gallery ou divider). O design-style é a classe de estilo escolhida para um componente, conforme definido no ficheiro do tema.
Noções Básicas sobre Estilos de Temas
O ficheiro design.json de um tema lista todos os estilos (frame, shadow, highlighted, etc.) que é possível aplicar a cada tipo de componente (como button ou image). Cada estilo tem um display name e um class name. O nome para apresentação é mostrado no separador Estilo do painel Definições. O nome da classe refere-se a um seletor de CSS no ficheiro design.css do tema. Por exemplo, segue-se a entrada para o 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"
}
]
},
Os nomes dos componentes integrados são traduzidos e, por isso, vê uma chave para obter o nome do estilo a partir do grupo de recursos. Se acrescentar um componente button a uma página e, em seguida, escolher o estilo Simples no painel Definições > Estilo, o ficheiro design.json associa o nome para apresentação Simples (chave COMP_STYLE_SIMPLE) ao nome da classe scs-button-style-3. O button será renderizado com as seguintes classes:
scs-component scs-button scs-button-style-3
Se não for escolhido nenhum estilo para um determinado componente, é utilizado o estilo por omissão, scs-type-default-style. No exemplo anterior, o botão será renderizado com as seguintes classes:
scs-component scs-button scs-button-default-style
O Estilo scs-component-content
Para cada componente integrado, dentro do scs-component <div> mencionado anteriormente, existe um content <div> com a classe de CSS scs-component-content. Por outras palavras:
scs-component scs-type design-style scs-component-content
No ficheiro design.css, a classe scs-component-content é frequentemente utilizada para aplicar um estilo à "caixa" em redor do componente (por exemplo, para aplicar um contorno ou uma sombra).
Convém notar que, no ficheiro comp.css integrado, a classe comum scs-component-content é definida com position:relative e display:inline-block, entre outras propriedades de CSS.
Enquanto scs-component-content é útil para aplicar um estilo à "caixa" em redor de cada componente, as classes específicas do componente são necessárias para conferir um estilo global a um componente. Consulte Estilos Específicos de Componentes.