Aplicación de estilos específicos del componente

Componente Imagen

El componente Imagen tiene la siguiente estructura de clases CSS bajo la clase scs-component-content:

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

La clase scs-image-image se aplica a la propia etiqueta <img>. La clase scs-image-caption se utiliza para aplicar un estilo a la leyenda, si esta está presente.

La clase scs-image-link solo está presente si la imagen tiene un enlace adjunto. Normalmente, ni esta ni la clase scs-image-container requieren un estilo personalizado.

Por defecto, la leyenda de la imagen se representa como una superposición semitransparente que se extiende a través de la parte inferior de la imagen.

.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 las leyendas en la parte superior de la imagen y cambiar los colores, agregue un estilo adicional para el componente Imagen en el archivo design.json y, a continuación, defínale el CSS en el archivo 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ón

El componente Botón tiene la siguiente estructura de clases:

scs-button-button
    scs-button-text

La clase scs-button-button es el <div> seleccionable al que se le ha aplicado un estilo para que tenga el aspecto de un botón. La clase scs-button-text se utiliza para aplicar un estilo al texto situado dentro del botón.

Por ejemplo, pruebe a cambiar el aspecto y el comportamiento del componente Botón agregándole un estilo adicional en el archivo design.json y, a continuación, defínale un CSS en el archivo 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

El componente Documento tiene la siguiente estructura de clases:

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

La clase scs-document-container ajusta el visor de documentos y normalmente no se le aplica un estilo.

Galería

El componente Galería tiene una única clase que ajusta el componente de control deslizante JSSOR subyacente:

scs-gallery-container 

El control deslizante JSSOR utiliza varias clases a las que también puede aplicar un estilo:

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

Cuadrícula de galería

Las clases que se utilizan para el componente Cuadrícula de galería dependen del diseño y el recorte seleccionados en el panel Configuración:

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

En función de los valores de recorte y diseño seleccionados para Cuadrícula de galería, el valor de layout será stretch, crop, fit o flowing.

La clase scs-gallerygrid-cell solo está presente para los diseños de Columna.

Barra social

El componente Barra social tiene la siguiente estructura de clases:

scs-socialbar-container
  scs-socialbar-icon

La clase scs-socialbar-icon se aplica a cada etiqueta <img> de la barra social.

Párrafo

El componente Párrafo solo tiene una única clase que ajusta el texto real del párrafo:

scs-paragraph-text 

Por ejemplo, para que el texto que introduce en el componente Párrafo tenga un efecto de texto grabado en metal, agregue una clase de estilo adicional en el archivo design.json y, a continuación, defínale el CSS en el archivo 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;
}

O bien, si lo prefiere más elaborado, utilice algo similar al siguiente ejemplo.

.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

El componente Título también tiene una única clase que ajusta el texto real:

scs-title-text 

Mapa

El componente Mapa tiene una única clase que ajusta la representación del mapa:

scs-map-content

Normalmente, a esta clase no se le aplica un estilo.

Componente personalizado local

El Componente personalizado local solo tiene una única clase que ajusta el componente real:

scs-custom-component-wrapper 

Tiene control completo sobre los estilos CSS que necesita utilizar para representar la vista personalizada del componente personalizado local. Un componente local se representa en línea; es decir, puede aplicar directamente los estilos CSS definidos en el tema o en el archivo design.css.

Componente personalizado remoto

El Componente personalizado remoto solo tiene una única clase que ajusta su iFrame:

scs-app-iframe-wrapper

Además de aplicar los estilos CSS definidos en el componente personalizado remoto, puede utilizar los SDK de Sites para recuperar un archivo design.css del sitio 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);
  }
 }
});

De ese modo, puede hacer que el componente herede el estilo del estilo del host.

Divisor

Aunque no hay ninguna clase específica del componente para el componente Divisor, se puede aplicar un estilo a la propia etiqueta <hr>.

Por ejemplo, puede crear un divisor de puntos:

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

Vídeo, YouTube, Espaciador

No hay ninguna clase específica del componente para los componentes Vídeo, YouTube o Espaciador.