Perdoname ser ignorante aprendiendo recien esto pero me refiero que suponte descargo una plantilla CSS gratis en
http://www.freecsstemplates.org y luego lo instalo , mas decir copio y pego el codigo en el diseñador de plantillas.
Lo hice pero no se ve todo, solo sale un fondo blanco y sale puro escrito y nada mas.

Yo elegi un diseño como este http://www.freecsstemplates.org/preview/reckoning pero claro que esta plantilla no cubre oara el foro u otra secciones...

Entonces si no funciona instalar estas plantillas, tendre q crearlas yo y hacer una plantilla en el diseñador de plantillas algo similar a este modelo pero q cubra todas las secciones de la web?

Actualmente habia creado varias paginas pero se me han expirado por estar arreglando una y otra vez los diseños...
esta es la pagina q tengo creada http://therevolution.ucoz.com y me gusta este diseño pero parece q este diseño tiene como bloqueado el banner q viene puesto, he tratado de buscarlo pero no he podido poder sacar ese banner.....

bueno esop!
espero q no sea molestia!
y gracias!

Siempre me han maravillado los menus que se conforman por cajas y, al pasar el mouse sobre ellas, puedes dar click y obtienes un bonito efecto :hover. El problema es que, el 90% de estas cajas son a base de javascript; lo cuál limita mucho nuestra accesibilidad. Hace tiempo que no veo este tipo de menús, por lo que me había olvidado completamente de ellos…

… hasta que, leyendo a The CSS Guy me encuentro con un tutorial que trata precisamente de esto; pero de nuevo, utiliza javascript (aunque es bien usado, y si está desactivado, no se compromete la accesibilidad; pero si el estilo). Me di a la tarea de crear mi propia versión de links en elementos de caja (osease, podrán aplicar esta técnica a cualquier div, li, p, etc.) aunque, de nuevo, no es lo mismo para todos los navegadores. Como siempre, les dejo el demo para que vean de qué trata antes de aventarse todo el tutorial.

El problema (explicado)
Primero vamos a explicar bien el problema; y qué mejor que lo que el mismo CSS Guy ha explicado en su entrada. Lo que queremos es que una caja parecida a esta sea un hipervínculo:

Y claro, a su vez, debe ser compatible con la mayor cantidad de navegadores posible. Ahora bien, para codificar esa caja, nosotros pondríamos algo como esto:

¿Cierto? Pero no podemos convertirlo en hipervínculo, pues el elemento <a> es en línea (inline), y estos elementos no pueden contener elementos de bloque (llamese <h2> y <p>); por lo que esa idea queda desechada. Entonces ¿qué podemos hacer? El CSS Guy ha usado javascript, lo cuál funciona; pero si de casualidad tienes desactivado javascript (como yo); el estilo se perderá (pero sigues con acceso a la información). El menú que normalmente obtendríamos al dar click derecho sobre un link no aparece. El método que propongo es un tanto más útil, sobretodo con los navegadores modernos (que cada vez adquieren más fuerza); pero sigue siendo accesible para usuarios con navegadores viejos.

El HTML
Con la semántica y accesibilidad en mente; el código de arriba es perfectamente válido; pues tenemos un header y un párrafo con una breve descripción de la sección; así que nos quedaremos con ellos. Ahora bien, necesitaremos un link a la información que vamos a presentar y ya con estos tres elementos, los vamos a agrupar con alguna tag (en este caso, <li>), pues forman parte de un mismo elemento (un hipervínculo en este caso). Para este ejemplo, supondré que estamos creando un menú de navegación; y como un menú es una lista de links, eso mismo haré:

Bien, ahora agregaré unos cuantos links más; y por motivo de estética y para darle más vida a nuestro menú, cada <li> tendrá una clase para poderle dar estilo separadamente:

El CSS
Y bueno, la idea principal es posicionar relativamente nuestro contenedor (en este caso, nuestro <li>) y dentro posicionar el <a> absolutamente; ajustarlo al ancho y alto del <li>, ponerlo transparente y darle un efecto :hover al <li> mismo. ¿Suena complicado? Vamos por pasos.

Primero daremos estilo al <ul> y al <li> al cual posicionaremos absolutamente. También le estoy dando un ancho fijo, pero puede ser un porcentaje sin problemas.

Ahora vamos a aprovechar que le dí una clase diferente a cada li para poder darle un color de fondo y un borde. También usaré la pseudo-clase :hover para que, al momento de pasar el mouse sobre nuestro <li>, este cambie de color y obtengamos ese efecto que queremos.

Bien. Ahora vamos a darle estilo a los elementos que tenemos dentro de nuestros <li>. Esto es, el <h3> y el <p>:

Nada ostentoso; pero ustedes pueden dejar volar su imaginación: Ahora si, vamos a lo importante: el anchor. A este elemento lo vamos a mostrar como bloque, lo posicionaremos absolutamente y vamos a ocultar el texto utilizando text-indent. También me aseguraré de que no tenga ningún fondo usando background: none:

El ancho puede ir en porcentaje, pero recomiendo usen pixeles (por IE6).

Arreglar el Código para IE6
Si todo fuera bello y utópico, habríamos terminado; pero como vivimos en un mundo donde la gente utiliza miles de navegadores diferentes, debemos arreglar un poco nuestro código para que sea compatible con los demás navegadores.

Me centraré en IE6. ¿El problema con IE6? En realidad son dos:
1. La pseudo-clase :hover no funciona sobre ningún elemento que no sea un <a>. Por este motivo, el efecto de cambio de color, y por lo tanto, el indicador de que la caja es un link, desaparece.

2. Internet Explorer no sabe cómo manejar height: 100%, pues el elemento padre (el <li>) no tiene un alto especificado (es tonto, lo sé). Por este motivo, solo muestra el alto que considera necesario; esto es; el alto de tu line-height (pues el hipervínculo es solo una línea de texto).
Molesto ¿Cierto? Pero igual, IE6 sigue siendo MUY usado, y estoy seguro que otros navegadores con un soporte equitativamente patético sobre el modelo de caja andan por ahí, navegando la web. Así que vamos a salvar a los pobres usuarios de estos navegadores.

Hay una forma de arreglar el segundo error: simplemente darle un alto al contenedor. Pero aquí estoy asumiendo que el texto es dinámico, por lo que no es una opción. También podría usar javascript; pero si está desactivado el usuario de dicho navegador seguiría sin un link apropiado. En lugar de intentar darle el mismo efecto a IE6 me decidí por darle un estilo alternativo; pero igual atractivo y funcional.

Lo que tenemos en este momento en IE6 es un anchor de 255px y 1EM de alto posicionado arriba y a la izquierda de nuestro <li> sin un efecto hover que nos ayude. Para mostrar el link y, al mismo tiempo, darle un efecto hover a la caja, usaré una imagen:

Bonita flechita ¿que no? Esta flechita la pondré como fondo del anchor; pero solo para IE6 y hacia abajo; con la esperanza de que el usuario deduzca que se trata de un hipervínculo. Tiene dos flechitas, una para el estado normal y una para el hover. Solo es cuestión de usarla de imagen de fondo del anchor, ponerla a la derecha y cambiar la posición de la misma al pasar el mouse sobre el anchor. El código queda así:

Con esto, usuarios de IE6 e IE5.5 (los dos que probé) tienen un indicador de un hipervínculo y un estado :hover. Quiza no es perfecto, y causaría algunos problemas al desactivar las imágenes; pero es lo más cercano que pude llegar a una solución casi perfecta.

Les dejo el demo de las cajas con links. Pueden desactivar las hojas de estilo para que vean que sigue siendo semántico y entendible; visitarlo en IE6 para que vean el efecto y en IE7, Firefox u Opera para ver los links como debieran ser. ¡Espero les sea útil!

Si eres un fanático del diseño, te romperás la cabeza pensando cómo hacer para darle efectos a las tipografías de tu blog, en los títulos de las entradas por ejemplo, o en cualquier otra parte. En teoría, el trabajo con tipografía es bastante “limitado” (a nivel diseño) en CSS.

¿Para qué estamos en nuestro foro? ¡Para solucionarte la vida ^_^, claro! Bueno, con este tutorial aprenderás a aplicar algunos bonitos efectos de diseño gráfico al texto de tu sitio web. ¡Comencemos!

Efectos de diseño en el texto de tu sitio con CSS
Bueno, la idea principal es crear una imagen transparente con algún “efecto” o marca del mismo color que el fondo de nuestro sitio. Luego tendremos que superponer esa imagen sobre el texto para crear una especie de máscara que dejará ver el texto. Vamos a los ejemplos gráficos para que se entienda:

Esta imagen es la “máscara”. Como pueden ver la he guardado como .png.

Luego de acomodar el CSS y HTML (más abajo veremos cómo) nos quedará la “máscara” superpuesta en el texto. Ej:

¿Ahora se entiende? La máscara, al tener el mismo color que el fondo sólo se reconoce en el texto ^_^.

El código HTML
La idea es que, dentro del título (por ejemplo <h1>) creemos un <span> vacío, donde luego, mediante CSS le pondremos la imagen de fondo:

Estilos CSS: “gracias por la magia”
Vamos a usar posicionamiento absoluto (el <span>) dentro de un posicionamiento relativo (el <h1>). Así, el fondo del span se superpondrá al h1 ^_^.

¡Listo! Sólo para maniáticos XD!

No hay límites con CSS
El único límite es nuestra creatividad. Te dejo unos ejemplos para que veas lo que se puede hacer:

¡Espero que te sirva de mucho!

Un tema que suele resultar un tanto engorroso a la hora de la programación web es la maquetación CSS mediante el uso de “cajas” debido a la interpretación de la medida de éstas por los diferentes navegadores.

Si lo que deseas es utilizar definiciones de estilos para versiones específicas de IE, en esta nota les compartiremos la mejor manera de realizar un Box Model Hack para potenciar la compatibilidad de tu sitio.

Comentarios condicionales
Internet Explorer ha tenido por un largo tiempo una propiedad llamada Conditional Comments (comentarios condicionales) que permite que el contenido sea sólo visible para IE. La utilización de los comentarios condicionales en lugar de otros hacks css es simple:

» Crea una hoja de estilos común para todos los navegadores, sin utilizar ningún hack para poder evitar los problemas en IE.
» Crea una hoja de estilos común para todas las versiones de IE.
» Crea una hoja de estilos separada para cada una de las versiones de IE que desees etiquetar.
» Incluir las hojas de estilo del punto 2 y 3 utilizando un comentario condicional.

Sintaxis condicional de comentario
El comentario condicional es sólo un comentario HTML especialmente formateado que es captado sólo por varias versiones de Internet Explorer para Windows.

El siguiente comentario condicional es captado por IE5, IE5.5 e IE6:

Si no deseas que tus estilos específicos de IE sean superpuestos por tu hoja de estilos regular, el orden de la fuente es significante; desearás especificar la hoja de estilos común primero, con las versiones específicas de IE siguiendo a continuación:

Comentario Condicional en CSS

Más allá de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en inglés). Este tipo de reglas tienen usos muy diversos y algunas son específicas de ciertos navegadores.

Las reglas @ comienzan siempre con el símbolo de la arriba y luego su nombre clave. Dependiendo de cual se trate podrá necesitar un único argumento (la regla “import“ por ejemplo) o un bloque de código (la regla “media“). Veamos bien cuáles son.

Regla @import
Agrega los estilos CSS de otra hoja en la que lo usa.
Ejemplo:
@import url(addonstyles.css);

Regla @media
Aplica las reglas que contiene al tipo de medio específico que indica (para impresiones, uso normal por pantalla, para proyectores, etc.).
Por ejemplo:
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}

Los tipos de media que se pueden utilizar son:
• all - Se aplica a todos los tipos.
• aural - Para sintetizadores de voz.
• handheld - Para dispositivos de mano (Palm, iPhone, etc).
• print - Para impresoras.
• projection - Para proyectores.
• screen - Para pantallas de computadora.

Nota: Internet Explorer sólo soporta los tres primeros.

Regla @charset
Ajusta el tipo de codificación de caracteres basándose en los que utiliza otra hoja de estilo.
Por ejemplo:
@charset "ISO-8859-1";

Regla @font-face
Se utiliza para realizar una descripción detallada de una fuente y puede utilizarse también para embeber una tipografía en tu sitio. Sin embargo este último uso sólo es soportado por IE y hay mucha controversia con el tema de los derechos de propiedad al distribuir las fuentes. No es recomendable experimentar con esto si no sabemos bien lo que estamos haciendo.
@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}

Regla @page
Es utilizada para configuraciones avanzadas a la hora de imprimir un sitio, permite por ejemplo determinar el tamaño con el que se imprimirá o con qué margen.
Por ejemplo:
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

Espero haberlos podido acercar un poco más al conocimiento de estas, muchas veces desconocidas, reglas “arroba” de CSS.

Como verán, hasta las Hojas de Estilo en Cascada tienen descendencia. A través de CSS podemos reconocer las etiquetas que en la estructura HTML pertenecen o están contenidas dentro de otra etiqueta, y aplicarles estilos determinados. En CSS estos se llaman Selectores Descendentes. Pero me gustaría dejar claro desde el principio que 2 de estos selectores no funcionan en IE6. ¿Y para qué sigo escribiendo sobre esto? -podrían preguntarse. Bueno porque es una manera muy útil de manejar estilos, y porque esto refuerza que IE6 apesta como browser. Espero algún día que este navegador sea borrado completamente de la faz de la tierra y podamos utilizar todos los estándares habidos y por haber, sin preocuparnos por el soporte. Bueno, hecho los descargos.

Selectores Descendentes
Se ocupan para afectar a todos los elementos que pertenecen (o descienden) de una determinada etiqueta padre. Esto es muy común y hace falta sólo el ejemplo en CSS para que se den cuenta de lo que me refiero:

En el ejemplo anterior, vemos que el color rojo se aplicará solamente a los enlaces <a> que estén dentro de un <ul>, y no a otros. Si queremos ser más específicos, podemos definir id’s o class‘es:

Aquí el color rojo estará en toda etiqueta que tenga una class=“menu”. Y siendo más específico aún, podemos definir si esa class pertenece a cierta etiqueta:

Aquí sólo se verá el rojo del link si está dentro de un <ul class=“menu”> y no otra etiqueta con esa misma class.

Hay que tener cuidado con ser tan específico declarando estilos, ya que suelen haber problemas posteriores de que no se reconoce cierto estilo, siendo que está declarado por diferencias de peso entre éstas. Esta especificidad pienso abordarlo muy luego, ya que es un problema muy común e importante de conocer. Pero mientras mejor sigo con esto.

Selectores Hijo (no soportado por IE6)
Se usa para afectar a uno hijo de determinado elemento.

Hasta aquí suena igual que los selectores descendentes. La diferencia es que con los selectores hijo afectarán solamente los links que estén dentro del <li>, y no dentro de otra sub etiqueta.

Usando el ejemplo anterior, veremos que utilizando los selectores hijos el color rojo se aplicará sólo al <a> contenido dentro del <li>, y no al que está dentro de <em> ya que pasó a ser su hijo y no del <li> (imagina que ahora es su nieto).

Selectores Hermanos Adyacentes (no soportado por IE6)

Son los que comparten la misma etiqueta padre y que se encuentran uno a lado del otro en la estructura HTML. Se identifica con un signo + entre los hermanos, y la etiqueta que tendrá el estilo será la última declarada luego de este +.

Finalmente, ¿qué uso tienen estos últimos 2 selectores, si no son soportados por IE6? Bien, a través de tu framework de Javascript favorito (que suelen ser crossbrowser) puedes darles un gran uso, por ejemplo manipulando classes para tablas, que suelen tener muchos elementos anidados (para una simple celda tienes que escribir <table><tr><td></td></tr></table>).

¿Recuerdas esta gran lista sobre distintos modos de resetear CSS? Mediante estas CSS Reset podíamos resetear nuestro código CSS para optimizarlo. Pues ahora existe una únicamente orientada a HTML5. A esta nueva versión se le han añadido nuevos elementos y eliminado otros, que eran inservibles para HTML5. Os mostramos esta nueva forma de resetear CSS a continuación:

Si lo deseas puedes descargarla desde Google Code.

Podemos crear popups con CSS de forma fácil para mostrar la información que deseemos enseñar pero que al mismo tiempo no tengamos que ir a otra página para verla.

Los protagonistas de este truco principalmente son la propiedad overflow, que hace que se muestre el elemento (visible) cuando el cursor se sitúa encima del texto y se oculte cuando dejemos de situarnos encima (hidden), y la propiedad z-index, que hará que la capa del popup se sitúe encima de los demás elementos.