Archive for the ‘Diseño en SharePoint’ Category

menu navegación y jquery marcar paginas

marzo 4, 2010

$(document).ready(function (){

 $(“table[class~=’topNavSelected’] td”).attr(“class”,”relleno”);
 $(“table[class~=’topNavSelected’] tr”).append(“<td width=’17px’><img- src=’/images/pestanya_der.png’ border=’0’/></td>”);
 $(“table[class~=’topNavSelected’] tr:first-child”).prepend(“<td width=’17px’><img- src=’/images/pestanya_izq.png’ border=’0’/></td>”);

 $(“td.relleno a”).attr(“class”,”enlace_actual”);

 var titulo_pagina = document.title;
 var selector = “div.enlace_menu_izq[rel='” + titulo_pagina + “‘]”;
 $(“div.enlace_menu_izq”).mouseover(function(){
            $(this).attr(“class”,”enlace_menu_izq_hover”);
            $(selector).attr(“class”,”enlace_menu_izq_selected”);

    }).mouseout(function(){
            $(this).attr(“class”,”enlace_menu_izq”);
   $(selector).attr(“class”,”enlace_menu_izq_selected”);
      });
   
 $(selector).attr(“class”,”enlace_menu_izq_selected”);
   
    //alert(titulo_enlace);
  
    });

Modificar el menú de navegación Asp:Menu Sharepoint

febrero 26, 2010

http://danishhussain.blogspot.com/2009/07/customizing-share-point-2007moss-top.html

<SharePoint:AspMenu ….

……

<StaticItemTemplate>

<table>
<tr>
<td>
<asp:hyperLink runat=”Server” id=”urlNav”
NavigateUrl='<%#
Eval(“DataPath”)%>’ Text='<%#
Eval(“Text”)%>’ />
</td>
</tr></table></StaticItemTemplate></SharePoint:AspMenu>

ideas locas para adjuntar un css a un webpart como característica

febrero 16, 2010

Se ha creado un webpart personalizado que se añadirá al sitio por medio de una característica. Para que pueda ser reutilizado, los estilos css deben ser totalmente independientes al código del webpart (no vale colocarlos todos dentro del atributo style) Así que se debe enlazar una hoja de estilos al webpart.

Si el webpart se ha creado desde cero, no hay problema, se añade el código correspondiente desde .Net y luego se complia. Lo que hace el código es añadir una etiqueta CSSRegistration (<SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/Band.css%>” runat=”server”/> ) dentro de

<Sharepoint:CssLink runat="server" />

para que pinte una nueva etiqueta <link> con  el nuevo css.

El problema viene cuando el webpart que se quiere reutilizar y activar con una característica ya viene prehecho. En este caso se ha utilizado un Content Query Webpart. ¿Cómo asociamos un CSS únicamente a este webpart?.  Dos ideas locas, utilizando el archivo xsl que pinta la cabecera del webpart. se llama: Header.xsl en el insertar:

– etiqueta <link> directamente en el código (no sé si se puede colocar esta etiqueta dentro del body o debe ir únicamente en la cabecera) la etiqueta puede ir donde se quiera, la interpreta igual

insertar el siguiente código:

<style type='text/css' media='screen,projection'>
@import '/styles/layout.css';/*ruta del css*/
</style> 

no entiende la etiqueta @import 

insertar un content SharePoint:CssRegistration para que se incluya en el placeholder de la cabecera. no sé si al ser un archivo xsl interpretará la etiqueta y la colocará donde toca. Además tampoco sé si una vez pintada la cabecera se rellenará el csslink con cssregistration de después. Como es un archivo xsl, no entiende las etiquetas asp.

Sólo hay tres soluciones: dar formato con xsl, poner los estilos directamente en el xsl con la etiqueta <style> o linkar un css con la etiqueta <link> en el achivo xsl que pinta entero el webpart: si queremos añadir algo por encima de todos los ítems (estén agrupados o no) y por debajo (incluído el FooterTemplate), tenemos que añadir código a la función: OuterTemplate en el MyContentQueryMain.xsl

estilos de webparts

febrero 2, 2010

listado de los estilos de los webparts más utilizados

Orden de aplicación de las hojas de estilo en Sharepoint

febrero 2, 2010

En una masterpage, las siguiente etiquetas son las que van cargando los archivos CSS:

Primero, utilizando <Sharepoint:CssLink runat=”server” />se cargan las siguientes cuatro cosas por este orden:

1º  Css cargados por medio de: <SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/aaaa.css %>” runat=”server”/> siguiendo orden alfabético.

2º  Core.css

3º el css especificado con el atributo DefaultURL dentro de la propia etiqueta SharePoint:CssLink por ejemplo:  <Sharepoint:CssLink DefaultUrl=”<% $SPUrl:~SiteCollection/Style Library/mi.css %>”  runat=”server”/>

4º el css alternativo especificado desde la interfaz de SharePoint, cuando se elige la masterpage (afectan también a las páginas de configuración)

la propiedad $SPUrl se utiliza para crear rutas dinámicas pero sólo sirve en los sitios con las características de publicación activadas

Segundo, mediante <SharePoint:Theme runat=”server”/> se carga el tema con su correspondiente css.

Otro modo de cargar CSS es escribiendo en la masterpage:<link rel=”stylesheet” type=”text/css” href=”<% $SPUrl:~SiteCollection/Style Library/~language/internacional/miestilo.css %>”> Esta etiqueta está escrita directamente en el HTML, no responde a ningún control por lo según donde se coloque se cargará. Por ejemplo si queremos que se cargue la última, la colocaremos después de todas las etiquetas que cargan CSS. Pero si queremos que cargue antes del tema, la colocaremos antes de la etiqueta <SharePoint:Theme runat=”server”/>

Modificar títulos de webparts

febrero 2, 2010

Muchas veces, sobre todo cuando se diseña una intranet, las páginas de inicio suelen quedar bastantes sosas porque sólo aparecen webparts a modo de listados de bibliotecas y muy pocas imágenes (unos pocos banners a la derecha que a veces son sólo enlaces de interés). Es entonces cuando el diseño nos pide un icono para cada título de webpart (icono de folios para noticias, icono de calendario, clip para notas,…).

La primera idea para personalizar esto fue una solución muy rudimentaria: ocultar el título del webpart que viene por defecto e incluir arriba otro webpart de tipo editor  HTML de contenido, así podíamos colocar el código HTML que quisieramos, pero perdíamos la funcionalidad de poder modificar directamente el webpart de la lista sin tener que entrar en el modo de edición.

Después de leer este artículo de Heather Solomon, la solución es más sencilla:

http://www.heathersolomon.com/blog/articles/Controlling-Single-Web-Parts-with-CSS.aspx

Como todos los webparts usan los mismos estilos, simplemente modificando: .ms-WPHeader, .ms-WPTitle, .ms-WPBody,… no serviría porque cambiaría en todos los sitios. (listado de estilos que se utilizan en SharePoint)

Los titulos de los webparts se pueden difereciar de dos modos: Que cada tipo de webpart tenga un titulo personalizado pero que según el tipo sea el mismo (que todos los webparts de noticias tengan el mismo icono) o que según donde se encuentre tenga un estilo u otro.

Modificar según donde se encuentre en el layout:

La idea es colocar los webparts que se quieren personalizar dentro de un contenedor con un id o class para que, por medio de selectores de descendencia CSS llamar a los estilos por debajo.

Primero habría que establecer una regla general para todos los webpartas. Por ejemplo:

.ms-WPHeader  {background:green; border:1px solid red}

y después diferenciar cada uno de los webparts dependiendo de dondes están. Por ejemplo, teniendo este código HTML:

<div class=”mi_contenedor”>

  <los webpats/>

</div>

Con la siguiente regla CSS:

div.mi_contenedor .ms-WPHeader  {background:yellow; border:0px}

Sólo los estilos .ms-WPHeader que estén dentro de la capa con la clase mi_contenedor se verán amarillos y sin borde.

Hay que tener en cuenta que para este sistema hay que modificar la masterpage o la page layout correspondiente. Si no pudiera ser, una solución es mirar el código fuente de la página desde el navegador y buscar si existe algún contenedor con class o id para poder llamarlo.

Modificar un webpart según su tipo:

Otro modo para diferenciar un webpart de otro según su tipo es por medio de selectores por atributo CSS. Las clases pueden ser las mismas para todos, pero por medio de los atributos de las etiquetas, por ejemplo, title, se puede aplicar unas porpiedades u otras.

El código fuente de la página indicará el atributo para crear la regla CSS que defina el estilo. Hay que buscar el trozo de código que pinta la barra del titulo. Por ejemplo:

 <tr class=”ms-WPHeader”>
      <td title=”Contacts – Create a contacts list when you want to manage information about people that your team works with such as customers or partners. You can share information between your contacts list and Windows SharePoint Services-compatible contacts programs.” id=”WebPartTitleWPQ3″ style=”width:100%;”>
            <h3><a accesskey=”W” tabindex=”0″ href=”/sites/heather/Lists/Contacts/AllItems.aspx”><nobr><span>Contacts</span><span id=”WebPartCaptionWPQ3″></span></nobr></a></h3></td>…….

Identificando que el estilo lo queremos aplicar a la etiqueta td con el atributo title “Contacts…”  ya tendríamos diferenciada la celda del resto.  La formula para escribir reglas en css es la siguiente:

selector [attribute=”value”]  {declarations}

Siguiendo con el ejemplo, se escribiría:

tr.ms-WPHeader td[title^=”Contacts”]{background:yellow}

Como la etiqueta td no está asociada a ninguna clase, no se puede llamar directamente sin que se modifiquen todas las td, por eso se llama al estilo padre: tr.msWPHeader. Así todas las td que estén por debajo cumplirán esta norma. Además se especifica que el atributo title debe contener al principio el texto indicado entre comillas con el símbolo ^antes del igual. (Los selectores se explican en otro articulo)