Como hacer descripciones de los foros [2]

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

*entra bailando* Aquí concluye el tutorial que empecé con el afán de que la gente pueda empezar a hacerse sus propias descripciones más que bonitas. En el anterior aprendimos a montar la base y colocar una imagen, y hoy aprenderemos diversos métodos empleados para colocar los subforos.


Empezaremos retomando uno de los ejemplos. Sin embargo, esto se puede adaptar a cualquier forma. El que yo emplearé será el que tiene una imagen al costado:

La forma que, personalmente, considero más básica para colocar a los links, es colocarlos debajo de la descripción en un bloque. En ese caso, haremos lo siguiente:

Código:

Al código inicial, que es este:
<div id="desc"><img src="LINK DE TU IMAGEN"><div id="texto">Aquí tu primer descripción</div></div>

Le agregaremos un <div id="subforos"></div> luego del texto, quedando así:
<div id="desc"><img src="LINK DE TU IMAGEN"><div id="texto">Aquí tu primer descripción</div><div id="subforos">Aquí tus subforos</div></div>

Y en el CSS, colocaremos lo siguiente:

Código:

#subforos {
propiedades aquí;
}

Donde dice propiedades aquí podemos colocar algunas de las siguientes cosas:

background: #888; - nos colocará un fondo (en este caso, de color #888). Puedes cambiar el #888 por cualquier otro color, o quitarlo y colocar url('LINK DE IMAGEN') si quieres colocar una imagen.
text-align: center; - hará que el texto salga centrado. Puedes cambiar el center por left (izquierda), right (derecha) o justify (justificado).
border: 1px solid #265175; - nos colocará un borde (en este caso, de color #265175 y 1px de grosor). Puedes cambiar el #265175 por cualquier otro color, y el 1px por cualquier otro tamaño. Además, si preferimos colocar un borde de un solo lado, podemos emplear border-right, border-left, border-top y border-bottom, que se manejan del mismo modo que border.
border-radius: 10px; - redondeará los bordes de la caja. Puedes cambiar el 10px por el valor que se te antoje.
margin: auto; - centrará el bloque de subforos.
padding: 5px; - creará un margen interno entre los bordes de la caja y el contenido. Se puede modificar el 5px a gusto.
width: 80%; - asignará un ancho a nuestra caja. Antes de que lo preguntes, el ancho depende mucho de tu foro, sus tamaños y eso, por lo que dejarlo así (con porcentaje) es sabio.

Yo, en lo personal, para comenzar los ejemplos emplearé una caja con un background de #485E3F, un padding de 3px 7px, width de 90%, margin automático y texto centrado. Además, como quedaba muy pegado a la imagen, le coloqué luego un margin-top: 5px. Es decir, esta cosa:


Ahora, ¿qué pasa si quieres modificar el aspecto de los links de los subforos? Simplemente debes llamarlos al CSS con esto:

Código:

#subforos a {
propiedades aquí;
}

Y donde dice propiedades aquí puedes emplear cualquiera de las propiedades que se señalan en este tutorial.


No es ni la mitad de lo difícil que parece. Empecemos, lo básico sería colocar los subforos al principio de todo:

Código:

<div id="desc"><div id="subforos">Aquí tus subforos</div><img src="LINK DE TU IMAGEN"><div id="texto">Aquí tu primer descripción</div></div>

Y ahora, lo que necesitamos es ir al CSS y añadir algunas cositas, por ejemplo:

Código:

#subforos {
width: 120px;
float: right;
height: 100px;
overflow: auto;
padding: 1px;
background: #485E3F;
}

#subforos a {
display: block;
background: #687A61;
padding: 2px 5px;
margin-bottom: 1px;
}

Imagino que de momento te estás preguntando qué *censurado* significa eso. Veamos.
En la primer parte, hice que los subforos estuvieran en una caja de 120x100 con los atributos width y height. Estos valores se pueden cambiar a gusto. También hice que la caja se ubicara a la derecha empleando float: right; aunque se puede colocar también left para que quede a la izquierda. Le di un color de fondo con background e hice que le salga una barra desplazadora al superar la altura máxima gracias a overflow: auto;.

En la segunda parte, hice que los links adoptaran algunas propiedades básicas de los divs empleando display: block;. Esto permitió, por ejemplo, que adoptaran el máximo ancho posible de forma automática, sin que se los diga. Luego les asigné un color de fondo con background y un pequeño margen interior con padding. También les di un margen inferior con margin-bottom para que no salieran pegados. Este es el resultado:

¿Qué otras propiedades puedes emplear aquí? Todas las que hemos mencionado hasta ahora. Usa tu imaginación.

Ahora, muchos han visto cosas de ese estilo pero que al pasar el mouse se mueve el link o cambian de color, o cosas por el estilo. Es super simple de hacer:

Código:

#subforos a:hover {
propiedades aquí;
}

* {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}

Donde dice propiedades aquí puedes colocar cualquier cosa que quieras que suceda con los links. Por ejemplo, si quieres que su fondo cambie a #000, puedes colocar background: #000; o si quieres que se muevan a la derecha puedes colocar padding-left: 20px;; puedes colocarles un borde, cambiarles el color o fuente de letra, lo que sea. La segunda parte del código suavizará las transiciones para que no sean brutales x3


Supongamos, ahora, que me quieren hacer trabajar y quieren colocar vuestros subforos detrás de una imagen y que cuando pasas el mouse los ves. Vale. Acepto el desafío y prometo venganza. Veamos, el HTML sería así:

Código:

<div id="desc"><div id="subforos"><img src="LINK DE TU IMAGEN">Aquí tus subforos</div><div id="texto">Aquí tu primer descripción</div></div>

Como verán, esta vez la imagen está dentro del div de los subforos. Interesante, dirás tu. Supongo. Tal vez no lo digas. Para el CSS emplearé como base el del ejemplo anterior, y le agregaré algunas cosas:

* {
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
}

#subforos {
width: 120px;
float: right;
height: 100px;
overflow: auto;
padding: 1px;
background: #485E3F;
position: relative;
}

#subforos a {
display: block;
background: #687A61;
padding: 2px 5px;
margin-bottom: 1px;
}

#subforos img {
position: absolute;
top: 0px; left:0px;
}

MWAHAHAHAHAHAHA la venganza es dulce okno o.o Veamos algunas cosas importantes:

• Marqué en negrita las cosas que añadí al CSS.
  
• Es muy importante que la imagen tenga las mismas dimensiones que la caja de los subforos, para que la cubra por completo.
  
• Hay un par de efectos posibles para hacer.

A) La imagen se difumina hasta desaparecer.
Esto es, dentro de todo, facil. Sólo necesitas añadir al final del CSS:

Código:

#cajasf {
position: absolute;
top: 0px; left:0px;
width: 100%;
opacity: 0;
}

#subforos:hover #cajasf {
opacity: 1;
}

Por otro lado, en el HTML deberás añadir una nueva caja que envuelva sólo a los links:

Código:

<div id="desc"><div id="subforos"><img src="LINK DE TU IMAGEN"><div id="cajasf">Aquí tus subforos</div></div><div id="texto">Aquí tu primer descripción</div></div>

Esto nos quedaría:


B) La imagen se desliza hacia arriba, abajo, donde sea
Veamos. Primero, tendrás que ir donde dice #subforos { en el CSS y modificar donde dice overflow: auto; por overflow: hidden;. Esto quitará la posibilidad de emplear una barra desplazadora para cuando tengas muchos subforos, así que ten cuidado. Una forma de resolver ese problema es añadir un div mas al HTML, en cuyo caso te quedaría:

Código:

<div id="desc"><div id="subforos"><div style="overflow: auto">Aquí tus subforos</div><img src="LINK DE TU IMAGEN"></div><div id="texto">Aquí tu primer descripción</div></div>

Pero bueno, vamos a lo divertido: el CSS.

Código:

#subforos:hover img {
propiedades aquí
}

Donde dice propiedades aquí podrás reemplazarlo por una de las siguientes cuatro opciones:

• Si quieres que la imagen se vaya para arriba, debes colocar top: -XXpx; donde XX es igual al alto de tu imagen.
  
• Si quieres que la imagen se vaya para abajo, debes colocar bottom: -XXpx; donde XX es igual al alto de tu imagen.
  
• Si quieres que la imagen se vaya para la izquierda, debes colocar left: -XXpx; donde XX es igual al ancho de tu imagen.
  
• Si quieres que la imagen se vaya para la derecha, debes colocar right: -XXpx; donde XX es igual al ancho de tu imagen.

Entonces, uno de los posibles resultados sería:


Hasta aquí llega la segunda y última (por ahora) parte del tuto. Espero que les haya servido (: Recuerda que si quieres aprender sobre más propiedades de CSS puedes leer los tutoriales básicos. También recuerda que esta no es una zona de pedidos, donde podrás venir y decir "Ohh quiero hacer esto y no sé cómo, ¿me das el code?", para eso está la zona de pedidos del foro ^^ No hay problema con que dejen consultas porque algo no les sale o porque algo no funciona, o creen que algo está mal explicado o se puede agregar algo más, pero realmente no toleraré pedidos aquí xD