seudo clases CSS

febrero 15, 2010

(capitulo 6)

selectores CSS

febrero 15, 2010

http://css-tricks.com/attribute-selectors/

insertar contenido en html por medio de CSS

febrero 15, 2010

Doctype

febrero 15, 2010

tipos de doctype

Diferencia entre HTML, XML y XHTML

febrero 15, 2010

Cosas de CSS

febrero 10, 2010

– La diferencia entre utilizar el atributo class o el id es que la clase se puede utilizar más de una vez durante una página y el id no.  Los estilos declarados en id suplantan a los de la clase aunque se escriban más tarde.

– el símbolo “*” equivale a todas las etiquetas.

– el símbolo: > indica que las propiedades siguientes sólo se aplicarán al hijo de la etiqueta. Por ejemplo: div.la > em { color: blue; }
sólo se pondrá azul las etiquetas em que estén inmediatamente después de la capa. No se pondrán en azul todas las etiquetas em sino sólo los hijos de la capa.

– importar otra hoja de estilos desde la propia hoja de estilos: @import “advanced.css”;

– para hacer u menú horizontal por medio de listas (ul, li) hay que flotar a la izquierda tanto la etiqueta ul como la a (enlace del item del menú) y la etqueta li  display: inline. Sino los elementos no se colocarán uno al lado del otro.  Para aumentar el área par hacer click añadir el atributo  display: block  en la etiqueta a. así se puede añadir padding, alto y ancho para hacer click más facilmente

– por medio del atributo media se puede indicar que el css correspondiente es para imprimir o para ver en pantall .,….  se escribe:  media=”print”

– el orden de declaracion de seudoclases en etiquetas de tipo enlace influye. primero link y luego hover.

estilos de webparts

febrero 2, 2010

listado de los estilos de los webparts más utilizados

HTML 4-5 diferencias

febrero 2, 2010

El HTML 5 todavía está en desarrollo por la W3C pero estas serán algunas de las diferencias con respecto la  versión anterior HTML4:

Listado de etiquetas HTML5

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)