Crear un Tema para SharePoint 2013

Para que nuestro sitio pueda tener un toque personal, SharePoint nos proporciona algunas herramientas.

Este tutorial lo dividiremos en dos partes. La primera en como aplicar los temas que SharePoint pone a nuestra disposición y la segunda de como crear nosotros un tema.

1.- Como utilizar los temas en SharePoint.

Primero entraremos en nuestro sitio.

201

Para cambiar el tema nos dirigiremos al botón de configuración arriba a la derecha y seleccionaremos cambiar el aspecto.

202

Se nos abrirá la pagina de configuración. Lo primero que tenemos que escoger es un diseño.

203

Ahora podremos elegir un fondo, el conjunto de colores a utilizar, el diseño y el conjunto de fuentes.

Después clicamos en probar.

204

Veremos una vista previa del resultado y podremos mantenerlo o volver a la pagina anterior.

205

Ya tenemos aplicado nuestro tema.

206

2.- Como crear un tema

Para crear un tema nosotros mismos tenemos varias opciones.

  • Crear xml´s y añadirlos a la galería para poderlos utilizar.

  • Crear un csc

  • Crear un tema con powerpoint.

2.1.- Crear XML

Crearemos un xml para la paleta de colores y la combinación de fuentes.

Las paletas de colores son archivos XML (archivos .spcolor). Están almacenados en la Galería de temas del sitio raíz de la colección de sitios en la carpeta 15.

Pondremos la dirección:  http://NombreDeColecciónDeSitios/_catalogs/theme/15/ para entrar en la galería de temas.

Aquí veremos las colecciones de fuentes y colores.

Abriremos una con el bloc de notas. Palette001 por ejemplo .

301

Vemos el xml y podemos copiarlo como plantilla para modificar los colores a nuestro gusto.

Para la codificación de los colores podemos acceder a cualquier web de colores en html.

302

Después lo subimos y veremos que tenemos esa paleta para seleccionar.

Clicamos en nuevo documento y lo seleccionamos.

303

Las combinaciones de fuentes son archivos XML (archivos .spfont). Están almacenados en la Galería de temas del sitio raíz de la colección de sitios en la carpeta 15: (http://NombreDeColecciónDeSitios/_catalogs/theme/15/).

Pondremos la dirección: http://NombreDeColecciónDeSitios/_catalogs/theme/15/ para entrar en la galería de temas.

Aquí veremos las colecciones de fuentes y colores.

Abriremos una con extensión .spfont.

Seguimos los mismos pasos que para las paletas de color.

Ahora iremos a configuración -configuración del sitio

304

Seleccionamos Estilos compuestos.

306

Aquí podemos ver los temas disponibles. Crearemos uno nuevo.

305

Rellenamos los campos con nuestros archivos y si queremos un fondo.

Guardamos.

307

Vemos como podemos seleccionar el tema.

308

Si nos dirigimos a cambiar el aspecto veremos como queda.

309

2.2.- Crear un  CSS como anotaciones de un tema.

Podemos crear un css para personalizar nuestro sitio. Tenemos que tener en cuenta que si tenemos un tema aplicado este sera el que que se mostrará. Solo reconocerá algunas anotaciones para modificar ciertos aspectos como los colores las fuentes, el fondo.

ReplaceColor annotation reemplaza el color del tema. Puede ser usado en las propiedades de un css que definen el color como color, background-color, border…

El formato es el siguiente:

/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */

Algunos ejemplos:

  • /* [ReplaceColor(themeColor:”BodyText”)] */ color:#444;
  • /* [ReplaceColor(themeColor:”BackgroundOverlay”,opacity:”0.5″)] */ background-color:#fff;
  • /* [ReplaceColor(themeColor:”EmphasisBackground”,themeTint:”0.05″)] */ background-color:#f2faff;

Replacefont annotation añade el tema de fuente especificado a la lista de fuentes disponibles. Se puede utilizar en css con font y font-family.

El formato es el siguiente:

/* [ReplaceFont(themeFont:"FontSlot")] */

Ejemplo:

/* [ReplaceFont(themeFont:”body”)] */ font-family:”Segoe UI”,”Segoe”,Tahoma,Helvetica,Arial,sans-serif;

ReplaceBGImage annotation reemplaza la imagen de fondo. Puede sesr usasdo con background y background-image en el css.

El formato es el siguiente:

/* [ReplaceBGImage] */

RecolorImage annotation sirve para recolorear la imagen especificada.

El formato es el siguiente:

/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: {x:x-Setting,y:y-Setting,width:RegionWidth,height:RegionHeight})] */

Algunos ejemplos:

  • /* [RecolorImage(themeColor:”SubtleBodyText”,method:”Tinting”)] */ background-image:url(“/_layouts/15/images/tabtitlerowbottombg.png?rev=23″);
  • /* [RecolorImage(themeColor:”BodyText”,method:”Filling”,includeRectangle:{x:161,y:178,width:16;height:16})] */ background:url(“/_layouts/15/images/spcommon.png?rev=23″) no-repeat -161px -178px;

Una vez tengamos todos los cambios deseados tendremos que poner el archivo en la carpeta Themable del directorio Style library. (http:// SiteCollectionName/Style Library/language/Themable/)  (si no existiera lo podemos crear).

language identificadores: https://technet.microsoft.com/en-us/library/cc179219.aspx

El siguiente paso sera registrar el css el la pagina maestra aplicada. Tenemos que añadir <SharePoint:CssRegistration> en la marca <head>

<SharePoint:CssRegistration Name="CSSFileLocation" runat="server" />

Si queremos especificar otra ruta la especificaremos en “cssFileLocation”

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>

Fuentes de información:

https://msdn.microsoft.com/EN-US/library/office/dn266906.aspx

 

David Solanas Vilar

Enterprise Consulting & Training.

Share