lunes, 30 de mayo de 2011

Branding: Cómo hacer para que el portal tenga un acho fijo inicial y luego se expanda según la necesidad en SharePoint 2010

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.

image

Comúnmente es http://serverename.

Luego debemos de hacer clic sobre la sección Master Pages:

image

Seleccionamos la página Maestra que deseamos personalizar:

image

Debemos seleccionar Edit File

image

Luego nos preguntará si deseamos desprotegerla para editarla.  Le decimos que sí:

image

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)

image

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.

image

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.

image

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.

image

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.

image

Finalizaremos cerrando el td,tr y table como se muestra en la imagen de abajo, antes del div que cierra s4-mainarea.

image

Luego hacemos referencia de la hoja de estilos en la página maestra como se muestra a continuación:

image

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

viernes, 13 de mayo de 2011

Tip: Branding en SharePoint 2010. Definiendo el ancho fijo y escondiendo el Quick Launch en algunas páginas

 

Para definir el ancho fijo del portal en SharePoint 2010. Sáquele una copia a la página maestra v4.master desde SharePoint Designer y luego edítela para agregar en la página maestra la siguiente referencia de hoja de estilos:

<SharePoint:CssRegistration name="/_layouts/1033/styles/MiEmpresa.css" After="corev4.css" runat="server"/>

After=”corev4.css” garantiza que los estilos se aplicaran luego que se apliquen los de Corev4 con eso se garantiza que podremos sobrescribirlos.

En el div id=s4-workspace agregue la siguiente clase:

<div id=”s4-workspace” class=”s4-notsetwidth” >

Esta clase le dice al render de SharePoint que no agregue en línea el estilo del ancho y alto a dicho div.  Mas información en:http://msdn.microsoft.com/en-us/library/gg430141.aspx

En la hoja de estilos MiEmpresa.css agregue las siguientes líneas

.s4-notsetwidth {}
body #s4-workspace {width:960px !important; margin:auto}
#s4-ribbonrow {width:960px !important; margin:auto}
.ms-cui-ribbontopbars {width:960px !important; margin:auto}
.ms-cui-ribbon {width:960px !important; margin:auto}

Para esconder el Quick Launch de una página en especifico; Edite con SharePoint Designer la página y abajo de la siguiente línea de la página:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

Agregar las siguientes líneas:


<style type="text/css">
     #s4-leftpanel {  display:none; }
     .s4-ca {  margin-left: 5px;  background: transparent; }
</style>

Referencias:

http://allthingsdotnet.net/?p=726

http://msdn.microsoft.com/en-us/library/gg430141.aspx

 

 

SharePoint4Fun,

Manolo Herrera