Muy probablemente hay varias formas de hacerlo, pero una muy sencilla de hacerlo es a través de tablas de HTML dentro de la página Maestra personalizada. Esto nos permitirá definir un ancho fijo inicial pero que se puede expandir según los elementos dentro del contenido de la página.
Para ello utilizaré SharePoint Designer como herramienta de diseño.
Lo primero será ejecutar la aplicación y luego conectarnos a la colección de sitios que deseamos personalizar.
Comúnmente es http://serverename.
Luego debemos de hacer clic sobre la sección Master Pages:
Seleccionamos la página Maestra que deseamos personalizar:
Debemos seleccionar Edit File
Luego nos preguntará si deseamos desprotegerla para editarla. Le decimos que sí:
La primera tabla la vamos a insertar luego de head, dentro de body y seguido del div “s4-notdlg noindex” siempre y cuando estemos utilizando como inicial una página maestra v4.master para dayandnight.master u otras esto puede variar.
A la tabla le asociaremos una clase llamada master para aplicar algunos estilos y nos aseguraremos que no tenga espaciado dentro y entre las celdas (cellpadding y cellspacing)
Luego a la tabla le agregaremos 3 columnas la 1 y 3 serán para darle un efecto de sombreado al borde y la segunda columna es para agregar todo el contenido restante de la página maestra, que esta antes del div s4-ribbonrow. Importante el valign=”top” de la 2da columna para mantener todo arriba.
Para ubicar donde debemos de cerrar el td la imagen de abajo y luego la 3era columna para agregar el efecto sombreado del borde de la derecha. Luego cerramos la etiqueta tr y table un poco antes de form y body.
Pero aún necesitamos agregar otra tabla para mantener arriba y alineado el contenido luego del encabezado. Dentro del div con Id “s4-mainarea” tentemos la oportunidad de incrustar la tabla que definiremos una clase Contenido y una columna con clase Contenido1 para alinear el QuickLaunch de la izquierda y para aplicar algún estilo que deseemos. Importante definir widht=100% de la tabla.
Luego la otra columna para todo el contenido principal de las páginas. El cual le definiremos una clase Contenido2 y antes del div con id MSO_ContentTable.
Finalizaremos cerrando el td,tr y table como se muestra en la imagen de abajo, antes del div que cierra s4-mainarea.
Luego hacemos referencia de la hoja de estilos en la página maestra como se muestra a continuación:
Y los estilos a las clases definidas son los siguientes:
.master
{
width:960px;
margin-left:auto;
margin-right:auto;
height:100%;
background-color:#FFFFFF;
}
.spacer
{
width:12px
}
.shadowRight
{
*height:100%;
min-height:100%;
width:12px;
background-repeat:repeat-y;
background-position:left top;
background-image: url('custom-images/shadowRight.jpg');
}
.shadowLeft
{
*height:100%;
min-height:100%;
width:12px;
background-repeat:repeat-y;
background-position:left top;
background-image: url('custom-images/shadowLeft.jpg');
}
.Contenido1, .Contenido2 {vertical-align:top;}
Bueno eso es todo. Será necesario luego adapte los colores y tamaños que desee para su estructura y branding del portal.
SharePoint4Fun!,
Manolo Herrera
