Estilos Específicos de Componentes

Componente Imagem

O componente Imagem tem a seguinte estrutura de classes de CSS abaixo da classe scs-component-content:

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

A classe scs-image-image é aplicada ao próprio identificador <img>. A classe scs-image-caption é utilizada para aplicar um estilo à legenda, se a legenda estiver presente.

A classe scs-image-link só está presente se a imagem tiver uma ligação anexada. Normalmente, nem esta nem a classe scs-image-container requerem um estilo customizado.

Por omissão, a legenda da imagem é renderizada como uma sobreposição semitransparente na parte inferior da imagem.

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

Para colocar as legendas na parte superior da imagem e alterar as cores, acrescente um estilo extra para o componente Imagem no ficheiro design.json e, em seguida, defina o CSS para o mesmo no ficheiro design.css.

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

Componente Botão

O componente Botão tem a seguinte estrutura de classes:

scs-button-button
    scs-button-text

A classe scs-button-button é o <div> clicável, com um estilo aplicado para parecer um botão. A classe scs-button-text é utilizada para aplicar um estilo ao texto dentro do botão.

Por exemplo, experimente alterar o aspeto do componente Botão acrescentando um estilo extra para o mesmo no ficheiro design.json e, em seguida, defina o respetivo CSS no ficheiro design.css.

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

Documento

O componente Documento tem a seguinte estrutura de classes:

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

A classe scs-document-container inclui o visualizador do documento e, normalmente, não tem um estilo aplicado.

Galeria

O componente Galeria tem uma única classe que inclui o componente de cursor de deslocação JSSOR subjacente:

scs-gallery-container 

O cursor de deslocação JSSOR utiliza várias classes às quais também pode aplicar estilos:

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

Grelha da Galeria

As classes utilizadas para o componente Grelha da Galeria dependem da disposição e do recorte selecionados no painel Definições:

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

Consoante as definições de recorte e de disposição selecionadas para a Grelha da Galeria, o valor de layout será stretch, crop, fit ou flowing.

A classe scs-gallerygrid-cell só está presente para disposições de Colunas.

Barra de Redes Sociais

O componente Barra de Redes Sociais tem a seguinte estrutura de classes:

scs-socialbar-container
  scs-socialbar-icon

A classe scs-socialbar-icon é aplicada a cada identificador <img> na barra de redes sociais.

Parágrafo

O componente Paragraph tem apenas uma única classe que inclui o texto do parágrafo real:

scs-paragraph-text 

Por exemplo, para que o texto com que contribui no componente Paragraph tenha um efeito de texto gravado em metal, acrescente uma classe de estilo adicional no ficheiro design.json e, em seguida, defina o respetivo CSS no ficheiro design.css.

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

Ou se quiser um efeito mais elaborado, utilize algo parecido com o exemplo seguinte.

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

Título

O componente Title também tem apenas uma única classe que inclui o texto real:

scs-title-text 

Mapa

O componente Mapa tem uma única classe que inclui a apresentação do mapa:

scs-map-content

Normalmente, esta classe não tem um estilo aplicado.

Componente Local Customizado

O Componente Local Customizado tem apenas uma única classe que inclui o componente real:

scs-custom-component-wrapper 

Dispõe de controlo total dos estilos de CSS que necessita de utilizar para renderizar a visualização customizada para o seu componente local customizado. Um componente local é renderizado inline; ou seja, pode aplicar diretamente estilos de CSS definidos no seu tema ou no ficheiro design.css.

Componente Remoto Customizado

O Componente Remoto Customizado tem apenas uma única classe que inclui o respetivo iframe:

scs-app-iframe-wrapper

Além de aplicar os estilos de CSS definidos no seu componente remoto customizado, pode tirar partido do Sites SDK para extrair um ficheiro design.css do site do host.

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

Deste modo, o seu componente pode herdar estilos do estilo do host.

Divisor

Embora não existam classes específicas do componente para o componente Divisor, é possível aplicar um estilo ao próprio identificador <hr>.

Por exemplo, pode criar um divisor ponteado:

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

Vídeo, YouTube, Espaçador

Não existem classes específicas do componente para os componentes Vídeo, YouTube ou Espaçador.