Procedimiento para personalizar estilos

Artículo
09/18/2014

Última modificación: domingo, 04 de abril de 2010

Hace referencia a: SharePoint Server 2010

En muchos casos, un diseñador desea conservar la apariencia de una página web aplicando determinados estilos personalizados al contenido de la página. Al proceder de este modo, se puede cambiar la definición de las hojas de estilo para cambiar la apariencia de la página actual sin que ello afecte posteriormente al contenido de la página. El editor HTML de Microsoft SharePoint Server 2010 permite que el autor de la página aplique estilos personalizados al contenido mediante una lista predefinida de estilos que proporciona el diseñador.

De forma predeterminada, el editor HTML presenta el conjunto predeterminado de estilos, pero un diseñador de páginas puede reemplazar los valores predeterminados al agregar referencias a hojas de estilo en el diseño de la página. Si el editor HTML detecta nuevas clases de hoja de estilos en cascada (CSS) cuyos nombres tienen el prefijo ms-rteCustom-XXXX (donde XXXX es el nombre para mostrar de las clases exclusivas para la página), se mostrará el nuevo conjunto de estilos personalizados en lugar del conjunto predeterminado.

El editor HTML detecta clases específicas de ciertas etiquetas y las muestra al usuario únicamente si se selecciona el contenido especificado. El menú desplegable siempre muestra estilos que no están definidos para una etiqueta específica. Por ejemplo, es posible que un diseñador desee que el siguiente estilo personalizado esté disponible para el autor de la página mediante un archivo CSS incluido en el diseño de la página. Mientras el autor de la página edita una página creada a partir del diseño, puede usar el botón Seleccionar de la barra de herramientas del editor HTML para resaltar una lista en la página, hacer clic en el botón Estilo y elegir el estilo de lista que se muestra en el fragmento de código para aplicarlo a la lista seleccionada.

Ol.ms-rteCustom-RomanNumberList {
    font-family:Times New Roman; font-size:10pt; color:#000000; 
    text-indent:0; text-align:left; list-  style-type:upper-roman; 
    margin-left:30; margin-right:10; padding-left:10px; margin-top:1; 
    text-transform:capitalize

Puede especificar un prefijo de nombre de clase de CSS único para cada control de campo HTML de publicación, de modo que pueda presentar diferentes estilos personalizados para distintas secciones de la página.

En el diseño de página donde se especifica el control RichHTMLField, se puede invalidar la propiedad PrefixStyleSheet. Por ejemplo, si especifica el siguiente código, el editor HTML buscará clases CSS con el prefijo PageContentStyleCustom en la sintaxis CSS asociada:

<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>

Si el editor HTML encuentra estilos personalizados que contengan ese prefijo, muestra los estilos en la lista desplegable Estilos de acuerdo con la selección actual.

Personalización de estilos de vínculos de resumen, tablas de contenido y elementos web de consulta de contenido

El control de campo de vínculo de resumen y el elemento web de consulta de contenido (CQWP) presentan vínculos creados en la página. Estos vínculos se pueden basar en un conjunto de estilos disponible para el sitio web.

Los elementos web de tabla de contenido y de consulta de contenido muestran vistas controladas por datos de navegación. Ambos elementos web pueden mostrar consultas del contenido de sitios. También se puede asignar un estilo a los encabezados de grupo y los elementos en estos elementos web, de forma que usen un conjunto de estilos disponibles que se van a representar.

SharePoint Server 2010 usa hojas de estilos XSL para presentar estos elementos web. Puede personalizar y ampliar estilos para que coincidan con el color y la personalización de su sitio web.

La tabla 1 muestra la asignación de archivos de hoja de estilos XSL y los elementos web correspondientes.

Tabla 1. Asignación de archivos de hoja de estilos XSL y elementos web correspondientes.

Hoja de estilos XSL	Finalidad	Elemento web correspondiente
ContentQueryMain.xsl	Hoja de estilos XSL "Aplicación"	Consulta de contenido
Header.xsl	Encabezados de grupo para Consulta de contenido y Vínculos de resumen, encabezados de título de Tabla de contenido	Consultas de contenido, Vínculos de resumen, Tabla de contenido
ItemStyle.xsl	Estilos de elementos Consulta de contenido y Vínculos de resumen	Consulta de contenido, Vínculos de resumen
LevelStyle.xsl	Estilos de nivel de Tabla de contenido, que incluye el sitio y sus páginas	Tabla de contenido
SummaryLinkMain.xsl	XSL "Aplicación" para Vínculos de resumen	Vínculos de resumen
TableOfContentsMain.xsl	XSL "Aplicación" para Tabla de contenido	Tabla de contenido

Procedimientos

Para buscar y modificar estilos de Vínculos de resumen

Vaya a la página principal del sitio web y, a continuación, haga clic en Ver todo el contenido del sitio.
Haga clic en Biblioteca de estilos.
Haga clic en Hojas de estilos XSL para mostrar la lista de archivos XSL disponibles en la biblioteca de estilos para los tres tipos de elemento web.

Si desea ver un ejemplo, abra ItemStyle.xsl para modificarlo. ItemStyle.xsl controla la presentación de elementos en los elementos web de vínculo de resumen y de consulta de contenido. A continuación, observe la estructura y el contenido del archivo:

La plantilla XSL no es más que HTML con algunas variables (@ImageURL, @LinkURL, @Description, etc).
Puede mostrar u ocultar datos del elemento web de vínculo de resumen si agrega o quita estas variables.
También puede optar por cambiar la forma en que el código HTML que lo rodea hace que se muestren estas variables.
Cada plantilla XSL se asigna a un estilo que el autor puede elegir.
La primera sección del código de ejemplo incluye plantillas XSL a las que SharePoint Server 2010 llama y pasa datos y de las que obtiene versiones modificadas de los datos.
La sección incluye el código HTML representado con el resultado de las funciones:

<xsl:template name="Default" match="*" mode="itemstyle">
// This section includes a set of functions, or xsl templates, which SharePoint Server 2010 calls, passes data into, and gets modified versions of the data from.  The product does this primarily to improve security.
    <xsl:variable name="SafeLinkUrl">
        <xsl:call-template name="OuterTemplate.GetSafeLink">
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
        </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="SafeImageUrl">
        <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
            <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
        </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="DisplayTitle">
        <xsl:call-template name="OuterTemplate.GetTitle">
            <xsl:with-param name="Title" select="@Title"/>
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
        </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="LinkTarget">
        <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
    </xsl:variable>
// Includes the rendered HTML with the results of the functions.
    <div id="linkitem" class="item">
        <xsl:if test="string-length($SafeImageUrl) != 0">
            <div class="image-area-left"> 
                <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                    <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                </a>
            </div>
        </xsl:if>
        <div class="link-item">
            <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
            <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                <xsl:value-of select="$DisplayTitle"/>
            </a>
            <div class="description">
                <xsl:value-of select="@Description" />
            </div>
        </div>
    </div>
</xsl:template>

Para crear un nuevo estilo

Repita los pasos del 1 al 4 del procedimiento anterior para desplazarse al archivo ItemStyle.xsl.

Abra el archivo ItemStyle.xsl y agregue el código siguiente.

<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
</xsl:template>

Agregue el nombre de plantilla, las variables, la información de parámetros y otros detalles entre las etiquetas de apertura y de cierre en el archivo ItemStyle.xsl, según sea necesario.
Agregue las instrucciones HTML y XSL adecuadas para mostrar las variables de forma adecuada en el elemento web.

Vea también

Conceptos

Procedimiento para personalizar el control de campo del editor HTML

Compartir a través de