Todos os componentes Sites internos compartilham uma estrutura de classe CSS semelhante.
Cada componente tem as três seguintes classes CSS aplicadas a seu 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 arquivo do tema.
Noções Básicas de Estilos de Tema
O arquivo design.json de um tema lista todos os estilos (quadro, sombra, destacado etc.) que podem ser aplicados a cada tipo de componente (como botão ou imagem). Cada estilo tem um nome para exibição e um nome da classe. O nome para exibição é mostrado na guia Estilo do painel Definições. O nome da classe se refere a um seletor de CSS no arquivo design.css do tema. Por exemplo, a entrada para o componente button é a seguinte:
"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 internos são traduzidos, de modo que você vê uma chave para obter o nome do estilo diretamente do pacote de recursos. Se você adicionar um componente button a uma página e depois escolher o estilo Simples no painel Definições > Estilo, o arquivo design.json associará o nome para exibiçã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 nenhum estilo for escolhido para um componente em questão, o estilo padrão, scs-type-default-style, será utilizado. 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 interno, dentro do scs-component <div> mencionado anteriormente, há um content <div> com o nome da classe scs-component-content. Em outras palavras:
scs-component scs-type design-style scs-component-content
No arquivo design.css, a classe scs-component-content muitas vezes é usada para estilizar a "caixa" em volta do componente (por exemplo, para aplicar uma borda ou sombra).
Vale mencionar que no arquivo comp.css interno, a classe scs-component-content comum é definida com position:relative e display:inline-block, entre outras propriedades CSS.
Enquanto scs-component-content é útil para estilizar a "caixa" em volta do componente, as classes específicas do componente são necessárias para estilizar totalmente um componente. Consulte Estilo Específico do Componente.