Creación de un archivo de vista previa de página maestra en SharePoint

Artículo
03/21/2023

Importante

Esta opción de extensibilidad solo está disponible para experiencias clásicas de SharePoint. No puede usar esta opción con experiencias modernas en SharePoint Online, como con los sitios de comunicación. No se recomienda seguir usando la experiencia clásica o esas técnicas de personalización de marca.

Obtenga información sobre cómo crear archivos de vista previa que se usan de página maestra en la experiencia de creación de temas de SharePoint para mostrar una vista previa de componentes del tema seleccionado.

El Asistente para cambiar el aspecto es el punto de entrada a la experiencia de creación de temas de SharePoint. La Galería de diseño es la primera página en el Asistente para cambiar el aspecto y muestra una vista en miniatura de los diseños disponibles. Los usuarios Seleccione un diseño para su sitio y, a continuación, pasar a la página siguiente en el pueden personalizar el diseño. Los usuarios, a continuación, pueden obtener una vista previa del sitio antes de aplicar el diseño a su sitio. El archivo de vista previa de página maestra se usa para generar las imágenes de vista previa y vista en miniatura. Si una página maestra no tiene un archivo de vista previa correspondiente, no se puede usar en la experiencia de creación de temas.

Para obtener más información, vea Introducción a los temas para SharePoint.

Archivos de vista previa de conceptos básicos necesarios para trabajar con la página maestra

La tabla 1 se enumeran artículos que le ayudarán a comprender los conceptos básicos para trabajar con archivos de vista previa de página maestra.

Tabla 1. Conceptos básicos para trabajar con archivos de vista previa de página maestra

Título del artículo	Descripción
Introducción a los temas para SharePoint	Obtenga información sobre la experiencia de creación de temas en SharePoint.
Elija un tema para el sitio de publicación	Obtenga información sobre cómo cambiar la apariencia de un sitio de SharePoint mediante el Asistente para cambiar el aspecto.

¿Qué es un archivo de vista previa de página maestra?

Archivos de vista previa de página maestra (archivos .preview) son archivos con formato especial que tienen secciones para la paleta de colores predeterminada, combinación de fuentes predeterminada, acortado CSS y HTML acortado. El archivo de vista previa de página maestra debe usar el mismo nombre (excluyendo la extensión) como la página maestra correspondiente. Por ejemplo, si tiene una página maestra denominada article.master, el archivo de vista previa de página maestra correspondiente se denomina article.preview. Vista previa de página maestra y de las páginas maestras se almacena en la Galería de páginas maestras.

Un archivo de vista previa de página maestra tiene la estructura siguiente:

Default color palette
[SECTION]
Default font scheme
[SECTION]
CSS
[SECTION]
HTML

En el archivo de vista previa de la página maestra:

La paleta de colores predeterminada es el archivo .spcolor de la Galería de temas (http:// SiteColltionName/_catalogs/theme/15/) que desea usar como valor predeterminado. La paleta de colores predeterminada corresponde a los colores que se usan en la página maestra en su estado predeterminado. Es decir, antes de que un usuario ha seleccionado una paleta de colores en el Asistente para cambiar el aspecto.
El esquema de fuente predeterminado es el archivo .spfont de la Galería de temas (http:// SiteCollectionName/_catalogs/theme/15/) que desea usar como valor predeterminado. La combinación de fuentes predeterminada corresponde a las fuentes que se usan en la página maestra en su estado predeterminado. Es decir, antes de que un usuario ha seleccionado una combinación de fuentes en el Asistente para cambiar el aspecto.

CSS es la sección que contiene las hojas de estilos en cascada (CSS). Todas las clases CSS deben ir precedidas de[ID]. En el ejemplo siguiente se muestra una parte de la sección CSS en un archivo de vista previa de página maestra.

[ID] #dgp-pageContainer
{
    background-color: [T_THEME_COLOR_PAGEBACKGROUND];
    color: [T_THEME_COLOR_BODYTEXT];
    width: 100%;
    height:100%;
    background-image: url('[T_IMAGE]');
    background-size: cover;
    font-family: [T_BODY_FONT];
}

HTML es la sección HTML que define la estructura HTML de la vista previa.

Nota:

[!NOTA] Todos los valores de la dimensión deben especificarse como unidad relativa en el archivo de vista previa de página maestra. Por ejemplo, los valores de la dimensión pueden especificarse como un porcentaje o como una medida de MT. Para obtener más información sobre las medidas em, consulte la sección 5.1.1. Longitudes relativas a fuentes: las unidades 'em', 'ex', 'ch', 'rem' en el borrador de trabajo de nivel 3 del módulo de unidades y valores CSS de W3C.

Símbolos (token) se usa en el archivo de vista previa de página maestra. Tokens son valores de cadena que se reemplazará con el texto, los valores de color o valores de fuente en la vista previa generado. Las secciones siguientes describen los tokens disponibles y cómo se usan.

Varios tokens

Los tokens de varios se reemplazan con los valores de alto y ancho especificados en la vista previa.

Tabla 2. Varios tokens

Nombre del token	Descripción
[T_HEIGHT]	El alto de la vista previa.
[T_WIDTH]	El ancho de la vista previa.
[T_IMAGE]	La dirección URL de una imagen de fondo opcional.
[T_IMGHEIGHT]	El alto de la imagen, si es necesario.
[T_IMGWIDTH]	El ancho de la imagen, si es necesario.

Tokens de color

Tokens de color se reemplazan con los valores de color en la imagen de vista previa. Tabla 3 se describen dos formatos de tokens de color. Reemplace ColorSlot por el nombre de anotación de la ranura de color. Los tokens de color deben escribirse en mayúsculas (por ejemplo, [T_THEME_COLOR_PAGEBACKGROUND]). Para ver la lista de tokens de color disponibles, vea la sección Asignación de ranuras de color en Paletas de colores y fuentes en SharePoint.

Tabla 3. Tokens de color

Nombre del token	Descripción
[T_THEME_COLOR_ ColorSlot]	Utilice este formato si desea que el valor de color de la ranura de color.
[T_THEME_COLOR_ _ColorSlot__AA]	Utilice este formato si desea que el valor hexadecimal de 8 dígitos de la ranura de color. Este formato es útil para los valores de filtro habilitar la opacidad y degradados en Internet Explorer.

Tokens de fuente

Los tokens de fuente se reemplazan con valores de fuente de la imagen de vista previa.

[T_ _SlotName__FONT]

Reemplace SlotName por el nombre de la ranura de fuente. Los tokens de fuente deben estar en mayúsculas (por ejemplo, [T_BODY_FONT]). Para ver la lista de ranuras de fuente y dónde se usan en una página, vea la sección Ranuras de fuente en Paletas de colores y fuentes en SharePoint.

Tokens de contenido de texto

Los tokens que se enumeran en la tabla 4 se usan en la sección HTML del archivo de vista previa de página maestra. Los tokens se reemplazan con texto de ejemplo en la imagen de vista previa en la Galería de diseño. El texto de ejemplo se muestra en el mismo idioma que el resto del sitio.

Tabla 4. Tokens de contenido de texto

Nombre del token	Descripción
[BRANDSTRING]	El texto de la marca que aparece en la página. En los temas preinstalados, aparece en la esquina superior izquierda "Marca".
[SUITELINK1] [SUITELINK2] [SUITELINK3]	Los vínculos de conjunto de aplicaciones que aparecen en la barra de conjunto de aplicaciones. Vea "Primer elemento", "Segundo elemento", "Tercer elemento" en la figura 1.
[BIENVENIDO]	El texto de nombre de usuario. Vea "Nombre de usuario" en la figura 1.
[RIBBONTAB1] [RIBBONTAB2] [RIBBONTAB3]	Los nombres de las fichas de la cinta de opciones. Vea "Ficha 1", "ficha 2", "Ficha 3" en la figura 1.
Cuadro de búsqueda	El texto dentro del cuadro de búsqueda. Vea "Texto de búsqueda" en la figura 1.
[TN1] [TN2] [TN3]	Los elementos de navegación horizontal. "NAVEGACIÓN 1", "NAVEGACIÓN 2", "NAVEGACIÓN 3".
Título	El título de la página. "Título de la página".
[QL1] [QL2] [QL3] [QL4]	Los elementos de navegación vertical. "El primer elemento de menú", "Segundo elemento de menú", "El tercer elemento de menú".
[QLADD]	El vínculo debajo de los elementos de navegación vertical. Vea "Vínculo de comando" en la figura 1.
[ENCABEZADO DE TABLA DE LA ENTIDAD DE CERTIFICACIÓN]	El encabezado encima del texto de la página. En la figura 1, "Bienvenido a la vista previa del tema!".
[DESCRIPCIÓN DE LA TABLA DE CA]	Texto de la descripción. En la figura 1, "Está viendo un ejemplo de cómo se usarán los colores en este tema para el contenido. Este es un ejemplo de un...".
[COLORES DE ÉNFASIS DE LA ENTIDAD DE CERTIFICACIÓN]	La lista de colores de énfasis y bloques.
[TÍTULO DE LA LISTA DE CA]	El encabezado de la lista. En la figura 1, "Ejemplo de una lista".
[TABLA DE CA]	La lista de ejemplo.
Título del sitio	El título del sitio. Vea "Título del sitio" en la figura 1.

Figura 1. Tema preinstalado con texto de ejemplo

Tema preinstalado

Crear un archivo de vista previa de página maestra

Para crear un archivo de vista previa de página maestra, utilice una vista previa de página maestra existente como punto de partida.

Para crear una vista previa de la página maestra

Realizar una copia de una vista previa de la página maestra. SharePoint incluye oslo.preview y seattle.preview.
Cambiar el nombre de la copia de la vista previa de página maestra para que coincida con su página maestra correspondiente. Por ejemplo, si la página maestra se denomina article.master, cambie el nombre de vista previa de página maestra article.preview.
Use un editor HTML para editar el archivo de vista previa de página maestra. Actualizar el archivo para reflejar el diseño y la apariencia de la página maestra.

Sugerencia

[!SUGERENCIA] Valores de dimensión se especifican como porcentajes en el archivo de vista previa de página maestra. En el ejemplo siguiente se muestra un método para convertir una medida absoluta (píxeles) en una medida relativa (porcentaje). Se supone que tiene un tamaño de explorador de 1024 x 768. Si la página maestra tiene un alto de elemento de 32 píxeles y el elemento primario es el cuerpo de la página, calcular el porcentaje dividiendo el alto del elemento por el alto del explorador. La medida relativa es 4%(32/768).
Cargue el archivo de vista previa de página maestra en la Galería de páginas maestras.
Use el Asistente para cambiar el aspecto para probar la vista previa de página maestra con el contenido del sitio.

Nota:

[!NOTA] También puede crear un diseño que usa la nueva página maestra mediante la adición de un elemento a la lista de diseños compuestos. El diseño estará disponible en la Galería de diseño (la primera página del Asistente para cambiar el aspecto ). Para obtener más información, vea el procedimiento Implementar un tema mediante la interfaz de usuario en Cómo: Implementar un tema personalizado en SharePoint.
Repita los pasos 3 a 5, según sea necesario.

Compartir a través de