Aplicar estilos a los campos de página en SharePoint

Artículo
03/21/2023

En un diseño de página, puede aplicar estilos a un campo de página y los estilos se aplican a cualquier contenido agregado por los autores de contenido cuando crea una página de ese diseño de página. Además, tiene más opciones para controlar cómo se ha adaptado el contenido de un campo de página de RichHtmlField.

Introducción a la aplicación de estilos a los campos de página

Como diseñador, tiene control final sobre el posicionamiento y el estilo de los campos de página en un diseño de página y en las páginas creadas a partir de ese diseño de página. Cuando los autores de contenido, crean páginas desde un explorador, que no se pueden mover campos de página en la página o reemplazar los estilos que especifique. Esto ayuda a garantizar que la personalización de marca permanece coherente a través de todas las páginas del sitio.

Al aplicar estilos a los campos de página, existen dos categorías básicas de los tipos de campo que se deben considerar:

Tipos de campo que no sea RichHtmlField Los campos de página que componen un diseño de página se ajustan al tipo de contenido para ese diseño de página. Un campo de página puede ser de muchos tipos, como una sola línea de texto (TextField) o varias líneas de texto (NoteField). Como diseñador, puede aplicar estilos a todos estos campos de página de la misma manera, aplicación de estilos en el campo de página directamente en el diseño de página.
RichHtmlField El control de campo HTML enriquecido (también conocido como un campo de HTML para publicación) es uno de los controles más eficaces y se usan con frecuencia en diseños de página. De forma predeterminada, en un campo HTML enriquecido, los autores de contenido utilizan la cinta de opciones para dar formato y aplicar estilos a contenido y para insertar tablas, multimedia como imágenes y vídeo y elementos web. Este tipo de campo es útil cuando desea dar la libertad para agregar y aplicar un estilo contenido dentro de los parámetros que se pueden controlar a los autores de contenido. Puede controlar un RichHtmlField de dos maneras:
- Crear una hoja de estilos personalizada De forma predeterminada, los estilos disponibles en la cinta de opciones de un RichHtmlField proceden de una hoja de estilos denominada HtmlEditorStyles.css. Puede configurar la propiedad PrefixStyleSheet para este fragmento de código para que sus propios estilos personalizados aparezcan en la cinta de opciones para los autores de contenido usar.
- Configuración de las propiedades Allow Un fragmento de código para un RichHtmlField tiene 28 propiedades disponibles que comienzan con Allow y puede usar estas propiedades para que los autores de contenido no puedan tener disponibles comandos o grupos específicos de comandos en la cinta de opciones. Por ejemplo, si establece la propiedad AllowFontsMenu en False, los autores no pueden usar el menú Fuente de la cinta de opciones para cambiar la fuente que se aplica al texto; en su lugar, solo pueden usar los estilos CSS que especifique.

Para todos los tipos de campos de página, incluido el RichHtmlField, el diseñador determina cómo se ha adaptado el contenido. Puede usar el RichHtmlField para ofrecer a los autores de contenido la libertad para insertar contenido enriquecido y aplicar estilos; todavía tiene control final sobre el contenido que se pueden agregar y qué estilos se pueden aplicar.

Aplicar estilos a los campos de página distintos de RichHtmlField

Con un control de campo de página, puede definir los estilos utilizados por el contenido. Los autores pueden agregar contenido a una página, pero los controles de diseñador cómo se procesa el contenido a través de CSS que se aplican a dichos controles.

En el diseño de una página HTML, cada campo de página se ajusta en una etiqueta de <div\>. Para aplicar un estilo a un campo de página, simplemente puede agregar un estilo a la<div\>. Por ejemplo, <div style="font-weight:bold". Pero el escenario más común y útil es que agregue un atributo ID a <div\> para cada campo de página en el diseño de página y, a continuación, use el ID como un selector para estilos que residen en una hoja de estilos externa. De este modo, si tiene varios canales de dispositivo, y cada canal tiene su propia hoja de estilos, puede aplicar estilos diferentes para cada campo de página para cada canal. Por ejemplo, el siguiente campo de página del tipo de campo de texto (también denominadas varias líneas de texto) puede tener solo un atributo de ID en la etiqueta <div\>.

<div id="ShortSummaryPageField">
<!--CS: Start Page Field: ShortSummary Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldNoteField" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldNoteField:NoteField FieldName="a5249942-2dc5-4917-85e2-661d019ad548" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">ShortSummary</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">ShortSummary field value.</div></div></div><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldNoteField:NoteField>-->
<!--CE: End Page Field: ShortSummary Snippet-->
</div>

Para obtener más información sobre dónde deben ir los estilos y las referencias de estilo para un diseño de página, vea How to: Create a page layout in SharePoint (Cómo: Crear un diseño de página en SharePoint).

Deshabilitar las opciones de la cinta de opciones de RichHtmlField

Cuando los autores de contenido creación o edición una página y, a continuación, agregan contenido a un RichHtmlField mediante un explorador, puede usar comandos en la cinta de opciones para ese campo para dar formato, estilo, o insertar contenido enriquecido y medios.

En la Galería de fragmento de código, puede configurar las propiedades de un campo de página del tipo RichHtmlField, para que los comandos específicos o grupos de comandos de la cinta de opciones no estarán disponibles para los autores. Por ejemplo, al establecer la propiedad AllowFontSizesMenu en False, puede deshabilitar el menú Font Size en la cinta de opciones. Al establecer la propiedad AllowFonts en False, puede deshabilitar a todo el grupo de fuente en la cinta de opciones.

Después de configurar estas propiedades en la Galería de fragmentos de código y, a continuación, actualizar el fragmento de código, las propiedades aparecen en el marcado del fragmento de código dentro del <!--MS:> comentario.

<div data-name="Page Field: ArticleBody">
<!--CS: Start Page Field: ArticleBody Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldRichHtmlField:RichHtmlField runat="server" AllowFonts="False" FieldName="db3168db-8778-4fb6-a48f-57f598497388">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">ArticleBody</div><div id="ctl02__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">ArticleBody</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">ArticleBody field value. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div></div>
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
<!--CE: End Page Field: ArticleBody Snippet-->
</div>

Nota:

[!NOTA] Si se establece AllowFonts en False, los autores de contenido aún pueden usar métodos abreviados de teclado, como CTRL + B (seguro) para dar formato al texto. Para impedir que los autores de agregar los estilos a texto, puede establecer AllowTextMarkup en False. Con esta opción, al contenido de los autores intentan guardar el contenido que contiene los estilos aplicados al texto, el editor de HTML en el explorador devuelve un error y solicita al autor que quite el código que no es válido.

Un campo de página de RichHtmlField contiene 28 propiedades diferentes Allow. Para obtener más información sobre el control de qué propiedades específicas, vea Propiedades RichHtmlField para obtener más información acerca de la adición y configuración de fragmentos de código, consulte Fragmentos de código del Administrador de diseño de SharePoint.

Control de los estilos disponibles en RichHtmlField

En un RichHtmlField, los autores de contenido pueden usar las opciones en la cinta de opciones para el contenido de un formato. Estas opciones de formato se implementan mediante CSS, y estos estilos se definen en una hoja de estilos de SharePoint denominada HtmlEditorStyles.css que se encuentra en el servidor en una de las siguientes ubicaciones:

C:\Archivos de programa\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES
C:\Archivos de programa\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\FEATURES\PublishingLayouts\en-us

Debido a que la RichHtmlField en el explorador utiliza CSS para implementar sus estilos, puede crear sus propios estilos que son coherentes con la personalización de marca del sitio y, a continuación, puede realizar los estilos disponibles en la cinta de opciones para los autores de contenido usar. Para realizar pequeños cambios en los estilos predeterminados, puede copiar un estilo existente de HtmlEditorStyles.css a la hoja de estilos que hace referencia el diseño de página y, a continuación, modificar ese estilo cambiando las propiedades de CSS y valores (pero no el selector). También puede ocultar los estilos predeterminados de la cinta de opciones mediante la copia en la hoja de estilos y, a continuación, configuración display:none.

Para implementar los estilos personalizados, también puede crear una hoja de estilos desde el principio cambiando la propiedad PrefixStyleSheet para el fragmento de código de RichHtmlField. De forma predeterminada, esta propiedad se establece en ms-rte, y los estilos de la hoja de estilos predeterminada HtmlEditorStyles.css cada comienzan con este prefijo, por ejemplo:

H1. ms-rteElement-H1
{
  -ms-name:"Heading 1";
  -ms-element:"true";
}

Cuando se cambia el valor de la propiedad PrefixStyleSheet, ninguno de los estilos de ms-rte existentes están disponible en el editor de HTML enriquecido y sólo los estilos que cree que usan el nuevo prefijo están disponibles para los autores de contenido. Esto significa que si desea usar algunos de los estilos predeterminados, debe ser copiados a la hoja de estilos y modificados para que utilicen el nuevo prefijo.

Nota:

[!NOTA] La propiedad PrefixStyleSheet se define por cada campo de página de RichHtmlField, pero varios campos de página pueden usar el mismo valor de esta propiedad. Por lo tanto, si varios diseños de página hacer referencia a la misma hoja de estilos, es posible que varios RichHtmlFields en los diseños de página tienen el mismo prefijo de estilo y hacer referencia a los mismos estilos.

Cómo definir una nueva lista de estilos para RichHtmlField

Vaya a su sitio de publicación.
En la esquina superior derecha de la página, elija Configuración y luego Administrador de diseño.
En el Administrador de diseño, en el panel de navegación izquierdo, elija Editar diseños de página.
Elija el diseño de página en la que residirán el campo de página de RichHtmlField.
En la esquina superior derecha de la vista previa del lado servidor, elija Galería de fragmento de código.
En la cinta de opciones, elija Los campos de página y, a continuación, seleccione un campo de página del tipo RichHtmlField.
En la cuadrícula de propiedades, expanda la sección varios y, a continuación, cambie la propiedad PrefixStyleSheet en un valor distinto de ms-rte: por ejemplo, cambie el valor para que sea customstyle.

Importante

Valor de esta propiedad debe ser todo en minúsculas.
Seleccione Actualizar.
En el lado izquierdo de la Galería de fragmento de código, elija Copiar al Portapapeles.
En la unidad de red asignada en el equipo, abra el diseño de página HTML en el editor HTML.

Nota:

Para obtener más información, vea Cómo: Asignar una unidad de red a la Galería de páginas maestras de SharePoint.
En el diseño de página HTML, pegue el fragmento de código HTML dentro de PlaceHolderMain.
Guarde el diseño de página HTML. Los cambios realizados en el archivo HTML se sincronizan con el diseño de página .aspx asociada.

En este momento, si un autor de contenido crea o modifica una página basada en este diseño de página, estilos no están disponibles en la cinta de opciones del editor HTML porque este campo de página específico usa sólo los estilos que comienzan con el prefijo nuevo customstyle, pero aún no se han definido los estilos.
En el servidor, vaya a la siguiente ubicación y abra HtmlEditorStyles.css:

C:\Archivos de programa\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES

Resulta útil ver los estilos predeterminados, comprender cómo se escriban y, posiblemente, volver a utilizar algunas de ellas, copiarlos en la hoja de estilos y, a continuación, modificarlas. Si lo hace, reemplace el prefijo de ms-rte predeterminado con su propio prefijo.

Importante

[!IMPORTANTE] No modifique la hoja de estilos predeterminada, HtmlEditorStyles.css. Esta hoja de estilos proporciona estilos para cada RichHtmlField en la granja de servidores. Además, las actualizaciones de servicio o una actualización puede sobrescribir este archivo, lo que provoca que se pierdan los cambios.
En la hoja de estilos, cree una lista de nuevos estilos que comienzan con el prefijo de nuevo.

Por ejemplo, si customstyle es el nuevo prefijo, la hoja de estilos puede contener el estilo siguiente.
```
H2.customstyleElement-H2
{
  -ms-name:"Heading 2";
  -ms-element:"true";
}
customstyleElement-H2
{
  font-weight: bold;
  font-family: Cambria;
  font-size: 16pt;
}
```
Para mayor claridad, el nombre de clase y el nombre del estilo tal y como aparece en la cinta de opciones se definen independientemente de las propiedades de estilo. En este ejemplo, H2 es el selector de elemento para el estilo y customstyleElement-H2 es el nombre de clase del estilo. El nombre de clase consta de dos partes: customstyle es el prefijo que se ha especificado para este campo de página y, a continuación, Element especifica que este estilo aparecerá en la sección de Elementos de página de la Galería de estilos de la cinta de opciones del editor HTML. La propiedad -ms-name establece el nombre para mostrar que aparece al contenido autores en la Galería de estilos.

SharePoint asigna un estilo a un menú o un comando de la cinta de opciones al analizar el nombre de clase inmediatamente después del prefijo y busca una de estas cadenas:
- Element: sección de elementos de la página de la Galería de estilos
- Style: la sección estilos de texto la Galería de estilos
- FontSize: menú el tamaño de fuente
- ThemeFontFace: menú de la fuente
- ForeColor: menú el Color de fuente
- BackColor: menú el Color de resaltado
- Image: menú de la imagen
- Table: el menú tabla
- Position: alinear los botones del grupo de párrafo
Para obtener más información sobre dónde deben residir los estilos de un diseño de página, vea How to: Create a page layout in SharePoint(Cómo: Crear un diseño de página en SharePoint).

Compartir a través de