Personalizar fragmentos de código con su marca usando CSS en SharePoint 2013

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.

Para aplicar estilo a un fragmento de código, reemplace los estilos predeterminados con CSS personalizado. Se pueden utilizar identificadores de CSS y selectores de elementos para reemplazar todos los estilos predeterminados que se aplican a los elementos, o puede utilizar un editor HTML o una herramienta como las herramientas de desarrollo F12 en Internet Explorer para identificar y reemplazar los estilos predeterminados específicos.

Introducción a dar estilo a fragmentos de código con CSS

Después de convertir una página maestra de HTML o crear un diseño de página HTML, puede obtener una vista previa de esa página en la vista previa del lado servidor de administrador de diseño. En la página de vista previa, puede vaya a la Galería de fragmento de código y, a continuación, copie fragmentos de código en el archivo HTML. Un fragmento de código es una representación de HTML de un control de SharePoint como un control de navegación superior o un cuadro de búsqueda.

Una vez que se copia un fragmento de código en el archivo HTML en la unidad asignada y, a continuación, guardar los cambios, puede actualizar la vista previa del servidor del archivo HTML para ver cómo se procesa el control. Fragmentos de código contienen marcado que proporciona una vista previa de tiempo de diseño en el editor HTML de elección, pero no debe editar este marcado porque es de sólo lectura y no afecta a cómo se procesa el control en el servidor. Por el contrario, muestra una vista previa de gran fidelidad con datos activos, en la vista previa del lado servidor si está disponible, por ejemplo, un control de navegación muestra la estructura del sitio actual navegación con datos en directo desde el origen de datos, como un almacén de términos de SharePoint para la navegación administrada.

Nota:

Para obtener más información sobre cómo asignar una unidad de red, vea Cómo: Asignar una unidad de red a la Galería de páginas maestras de SharePoint.

De forma predeterminada, los fragmentos de código heredan sus estilos de hojas de estilos de SharePoint como corev15.css. Para aplicar estilo a un fragmento de código, se debe invalidar estos estilos de forma predeterminada con la CSS personalizado. Para hacerlo, puede:

Usar identificadores de CSS y selectores de elementos para reemplazar completamente los estilos predeterminados que se aplica a los elementos elegidos.
Utilice una herramienta basada en explorador, como las herramientas de desarrollo F12 en Internet Explorer para inspeccionar los estilos predeterminados en la vista previa del lado del servidor en el Administrador de diseño y, a continuación, identifique los estilos específicos para invalidar.
Usar las características de su editor de HTML para inspeccionar los estilos predeterminados en la vista previa de sólo lectura de un fragmento de código y, a continuación, identifique los estilos específicos para invalidar.

Para identificar los estilos predeterminados mediante el uso de las herramientas para desarrolladores en Internet Explorer, debe usar la vista previa del lado del servidor en el Administrador de diseño para ver la página maestra HTML o diseño de página, presione F12 para iniciar las herramientas de desarrollo, seleccione el menú Buscar y, a continuación, elija elemento Select por, haga clic en. Esto le permite hacer clic en elementos de la página y vea exactamente qué estilos para reemplazar mediante la adición de CSS a la hoja de estilos personalizada que el código HTML master page o vínculos de diseño de página a.

Las hojas de estilo predeterminadas de SharePoint contienen muchos estilos, lo que puede dificultar encontrar algunos específicos. Como alternativa a las herramientas basadas en explorador y dependiendo de su editor de HTML, puede le resulte más sencillo copiar el fragmento de código de la Galería de fragmento de código en el archivo HTML y, a continuación, use el editor HTML para identificar los estilos. En la Galería de fragmento de código, cuando se elige actualización y, a continuación, elija Copiar al Portapapeles, el fragmento de código contiene una vista previa en HTML de dicho fragmento. Después de copiar el fragmento de código en el archivo HTML, puede inspeccionar los estilos utilizados en la vista previa de sólo lectura incluida en el fragmento de código. De este modo, se va a analizar un subconjunto más pequeño de los estilos predeterminados.

Según el fragmento de código y el alcance de la personalización, desea utilizar identificadores de CSS y selectores de elementos para reemplazar completamente todos los estilos de forma predeterminada, en lugar de elegir los estilos predeterminados específicos para invalidar. En el ejemplo siguiente se muestra cómo usar este método para aplicar estilos personalizados para el fragmento de código de navegación superior.

El fragmento de código de navegación superior es uno de los fragmentos de código más utilizados, por lo que también es uno de los fragmentos de código con marca con más frecuencia. En un sitio de SharePoint, puede seleccionar una opción para usar la navegación administrada, para que un almacén de términos se convierta en el origen de datos para el fragmento de código de navegación superior. De este modo, puede usar la herramienta de administración de almacén de términos en Configuración del sitio para agregar o eliminar términos de navegación y administrar la taxonomía de navegación que se muestra el fragmento de exploración superior.

En este ejemplo, el sitio usa navegación administrada, por lo que el control de navegación superior extrae sus entradas de un almacén de términos. Hay un nivel de menús emergentes que aparecen cuando mantenga el mouse sobre un término de navegación de nivel superior, como los equipos. En esta sección se muestra cómo estos estilos personalizados reemplazan los estilos de SharePoint predeterminados.

Antes de usar el Administrador de diseño, al diseñar el boceto HTML para la página principal, es probable que debe usar HTML y CSS para diseñar un elemento de navegación superior funcional. En este ejemplo HTML se usa una estructura básica para la navegación superior: un elemento <div> con un identificador y nombre de clase, una lista de las entradas de navegación de nivel superior y una lista anidada para cada submenú emergente.


<div id="navigation" class="msax-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>
         </ul>
      </li>
      <li></li>
   </ul>
</div>

Para invalidar los estilos predeterminados de SharePoint, en el archivo HTML ficticio, incluya un vínculo estándar al archivo (<link rel="stylesheet" type="text/css" href="URLtoYourCustomCSSFile"/>CSS ) justo antes de la etiqueta /head> de cierre<.

En estos ejemplos de código HTML y CSS, tenga en cuenta lo siguiente:

Las entradas de navegación se styled mediante el formato .msax-Navigation ul li en lugar de aplicar clases directamente a las <etiquetas ul> o <li> .
Los estilos usan la sintaxis .msax-Navigation ul li en lugar de porque el marcado del .msax-Navigation ul>li fragmento de código puede contener etiquetas div> intermedios< entre los elementos seleccionados.
El boceto HTML contiene un elemento vacío <li></li> como la última entrada del nivel superior <ul>. Esto es porque, con la navegación administrada activado, SharePoint agrega un comando Editar vínculos como la última entrada a la navegación de nivel superior y, a continuación, el sitio final normalmente no es necesario mostrar esta opción. El ejemplo CSS utiliza .msax-Navigation ul li:last-child para seleccionar esta entrada y establezca el valor de visualización en none. El elemento vacío <li></li> en el archivo HTML es un sustituto temporal para la entrada de Editar vínculos predeterminada. Tenga en cuenta este elemento final <li> si el sitio usa navegación administrada y su CSS utiliza los selectores de li:last-child.


.msax-Navigation {
margin: 10px 0px; top: 0px; position: relative;
z-index:200;
}
.msax-Navigation a {
margin: 0px; padding: 0px; border: 0px currentColor;
}
.msax-Navigation ul {
list-style: none; margin: 0px; padding: 0px; font-size: 16px; z-index:200;
}
.msax-Navigation ul li {
padding: 10px; display: inline-block; position: relative; z-index:200;
}
.msax-Navigation ul li:first-child {
margin: 0px;
}
.msax-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}
.msax-Navigation ul li a.selected, .msax-Navigation ul li.selected {
background-color: rgb(58,60,62) !important;
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a {
width: 100%; color: rgb(58,60,62); font-size: 16px;
}
.msax-Navigation ul li:hover {
background-color: rgb(58,60,62);
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a:hover {
text-decoration: none;
color:rgb(255,255,255) !important;
}
.msax-Navigation li ul {
left: 0px; top: 35px; display: none; position: absolute; min-width: 100px; box-shadow: 5px 5px 10px 0px rgb(0,0,0); background-color: rgb(58,60,62);
}
.msax-Navigation li:hover ul {
display: block; z-index: 150;
}
.msax-Navigation li li {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li:last-child {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li a {
width: 100%; padding-left: 10px; display: block; color:rgb(255,255,255) !important;
}
.msax-Navigation li li:hover {
background-color: rgb(120, 120, 120);
}

Después de los estilos personalizados se implementan en su boceto HTML y tiene un elemento de navegación superior funcional, siga los pasos habituales:

Asignación de una unidad de red.
Cargar los archivos de diseño.
Convertir el archivo HTML en una página maestra
Obtener una vista previa y corregir los problemas.
Agregar el fragmento de código de navegación superior en la página maestra HTML mediante el uso de la Galería de fragmento de código.

En la Galería de fragmento de código, al configurar las propiedades del fragmento de código de navegación superior, tenga en cuenta lo siguiente:

En la sección importante en la parte superior, no realice ningún cambio en la propiedad CssClass.
No realice ningún cambio en propiedades bajo el encabezado de AjaxDelta debido a que estas propiedades relacionadas con las propiedades MDS que usa SharePoint para convertir el fragmento de código HTML en el fragmento de código ASP.NET correspondiente. Esto se aplica a cualquier fragmento de código, no sólo el fragmento de código de navegación superior.
Si está planeando reemplazar los estilos de SharePoint de forma predeterminada, en la Galería de fragmento de código, en la sección de Behavior en AspMenu (puede haber más de una sección de Behavior si el fragmento de código contiene más de un control, como un control delegado), establezca ClientIDMode en Static. Si deja ClientIDMode establece de forma predeterminada configuración, Inherit, CSS aplicado de fragmentos de código clases cambiará según el orden de fragmentos de código en la página. Para obtener más información sobre ClientIDMode, vea Propiedad Control.ClientIDMode.

Por ejemplo, de forma predeterminada, el control de navegación superior utiliza atributos de identificador de SharePoint de forma predeterminada como zz5_TopNavigationMenu y zz6_RootAspMenu. Al cambiar ClientIDMode a Static, se permiten a utilizar estos identificadores de forma predeterminada como selectores en su propio CSS para reemplazar los estilos de SharePoint de forma predeterminada.
Algunas propiedades ya están configuradas para hacer que el fragmento de código de navegación superior sea más fácil de personalización de marca mediante la eliminación de los comportamientos predeterminados CSS y JavaScript dinámicos por ejemplo, de forma predeterminada se establece UseSimpleRendering en True y MaximumDynamicDisplayLevels se establece en 0. Para obtener más información sobre propiedades específicas del fragmento de código de navegación superior, vea Propiedades de AspMenu y Propiedades de menú.

Después de configurar el fragmento de navegación superior de la Galería de fragmentos de código, elija Actualizar y, después, elija Copiar al portapapeles. En la página maestra HTML, elimine el contenido de la navegación <div id="navigation" class="msax-Navigation"> que contiene el control mockup (elimine solo el contenido de la <etiqueta div>, no la <propia etiqueta div>) y copie el fragmento de código en el div> de navegación<. Si es necesario, cambie la posición del div> de navegación<, normalmente justo después del inicio de la <div id="s4-bodyContainer"> etiqueta, pero antes del <div> que contiene PlaceHolderMain.

Para facilitar la comparación con el código HTML del <div> de navegación anterior, el ejemplo siguiente contiene la parte del <div> de navegación del fragmento de código de navegación superior. Tenga en cuenta que no es el fragmento de código completo.


<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
     <ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
          <li class="static">
          <a accesskey="1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Cameras</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/camcorders" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Camcorders</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/digital-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Digital cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/disposable-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Disposable cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/film-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Film cameras</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Computers</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/desktops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Desktops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/laptops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Laptops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/netbooks" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Netbooks</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/tablets" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Tablets</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Media</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/movies" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Movies</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/music" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Music</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/tv-shows" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">TV shows</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/video-games" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Video games</span></span></a></li>
          </ul>
          </li>
          <li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea">
          <span id="zz7_TopNavigationMenu_NavMenu_Edit" class="ms-navedit-editSpan">
          <a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 2, 0, 0, ''); cancelDefault(event); return false;">
          <span class="ms-displayInlineBlock">
          <span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle">
          <img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
          </div>
          </span></li>
     </ul>
</div>

En lugar de utilizar sólo los estilos personalizados, es posible que tenga un escenario donde desea invalidar un estilo de específico. Por ejemplo, para ocultar el nodo Modificar vínculos, puede crear un estilo personalizado que usa el identificador de forma predeterminada zz7_TopNavigationMenu_NavMenu_Edit para establecer la configuración de visualización en none.

Compartir a través de

Personalizar fragmentos de código con su marca usando CSS en SharePoint 2013

Introducción a dar estilo a fragmentos de código con CSS

Ejemplo: dar estilo al fragmento de código de navegación superior

Ejemplo 1: Un <div> de navegación del archivo de boceto HTML

Ejemplo 2: Un <div> de navegación con estilo CSS personalizado

Ejemplo 3: Vista previa de solo lectura del fragmento de código de navegación superior

Vea también

Recursos adicionales