Vista Favoritos

Última actualización: 2023-11-04
  • Creado para:
  • Developer
    User

La vista Favoritos consta de una columna de imágenes en miniatura.

El aspecto del contenedor de vista Favoritos se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7favoritesview

La vista administra la posición y la altura de la vista Favoritos; en CSS solo es posible definir la anchura.

Propiedades CSS de la vista Favoritos

background-color

Color de fondo de la vista Favoritos.

width

Ancho de la vista.

Ejemplo: Para configurar una vista Favoritos de 100 píxeles de ancho con un fondo gris semitransparente:

.s7ecatalogviewer .s7favoritesview {
 width: 100px;
 background-color: rgba(221, 221, 221, 0.5);
}

El espaciado entre las miniaturas de Favoritos se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7favoritesview .s7thumbcell

Propiedades CSS de las miniaturas Favoritos

margin

El tamaño del margen vertical alrededor de cada miniatura. El espaciado de miniaturas real es igual a la suma de los márgenes superior e inferior establecidos para .s7thumbcell .

Ejemplo: Para configurar el espaciado de diez píxeles:

.s7ecatalogviewer .s7favoritesview .s7thumbcell {
 margin: 5px;
}

El aspecto de la miniatura individual se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7favoritesview .s7thumb

Propiedades CSS de las miniaturas Favoritos

width

Ancho de la miniatura.

height

Altura de la miniatura.

borde

Borde de la miniatura.

NOTA

La miniatura admite state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de miniaturas. En particular, state="selected" corresponde a la miniatura seleccionada recientemente por el usuario. El atributo state="default" corresponde al resto de las miniaturas. Y, el atributo state="over" se utiliza al pasar el ratón por encima.

Ejemplo: Para configurar miniaturas de 75 x 75 píxeles, tenga un borde predeterminado de gris claro y un borde seleccionado de gris oscuro:

.s7ecatalogviewer .s7favoritesview .s7thumb {
 width: 75px;
 height: 75px;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

El aspecto de la etiqueta de miniatura se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7favoritesview .s7label

Propiedades CSS de la etiqueta Favoritos

font-family

Nombre de la fuente.

font-size

Tamaño de fuente.

Ejemplo: Para configurar etiquetas con una fuente Helvetica® de 14 píxeles:

.s7ecatalogviewer .s7favoritesview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 14px;
}

En esta página