Como hacer descripciones de los foros [1]

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Hola gente linda ^^ En el tuto del día (?) aprenderemos cómo hacer descripciones para tu foro. Recorreré los estilos más habituales de descripciones y os dejaré las indicaciones para hacerlas, pero obviamente el punto es que las personalicen hasta que sean irreconocibles. ¿Qué gracia tendría sino simplemente copiar y pegar todos el mismo estilo?


Empezaremos, lógicamente, con lo básico: una base. Esta será la caja básica que envolverá a todos los elementos de la descripción. Tendrán que poner, en la descripción del foro:

Código:

<div id="desc"><div id="texto">Aquí tu primer descripción</div></div>

Y una vez colocado, iremos a PA > Visualización > Colores > CSS, que es donde va todo nuestro CSS. Aquí colocaremos lo siguiente:

Código:

#desc {
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.
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.
padding: 5px; - creará un margen interno entre los bordes de la caja y el contenido. Se puede modificar el 5px a gusto.
width: 90%; - 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 #888, border de 15px solid #334A2A, un padding de 5px 10px y width de 90%. Es decir, esta cosa:


Ahora, ¿que pasa si quieren emplear una barra desplazadora? Pues simplemente deben agregar:

Código:

#texto {
height: 100px;
overflow: auto;
}

Esto causará que cuando el texto de la descripción supere los 100px de alto, salga una barra desplazadora. Puedes modificar tranquilamente el 100px a gusto.



Bueno, colocar una imagen es bastante fácil en verdad. La cuestión es hacer que te quede como tu deseas. Lo básico sería colocarla así:

Código:

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

Lo cual, en mi caso, quedaría...
Como verán, tengo un pequeño problema de imagen-más-grande-que-mi-caja y se ve horroroso. Eso se solucionará rápidamente si coloco en el CSS:

Código:

#desc img {
width: 100%;
}

En cuyo caso el resultado pasaría a ser algo así



¿Y qué si quieres colocar una imagen vertical en un lado? Pues no creas que me olvidé de tí, pequeño usuario que va a contracorriente. Veamos; lo ideal será que la coloques de este modo en el HTML:

Código:

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

(nótese que allí a diferencia de la anterior está ANTES del texto, importante)
Luego, iremos al CSS y colocaremos lo siguiente para evitar deformidades como la ya expuesta xD

Código:

#desc img {
height: XXpx;
float: left;
}

Donde dice float: left; puedes cambiarlo por float:right; para que salga a la derecha la imagen. Además, en este caso deberás colocarle manualmente el alto que quieres que tenga, si la imagen es más grande de lo esperado u.ú En mi ejemplo, además le agregué un margin-right: 10px; para que no quede pegada al texto, y me quedó esto:



¿Y qué hay de mi, dirás tu, joven usuario que desea colocar sus imágenes en circulitos que floten a un lado u otro de la descripción? De tí me habría olvidado de no ser por Wondiè xD Tendrás que colocar tu imagen como lo señalé en el primer ejemplo, para comenzar. Es importante que la imagen sea un cuadrado. Luego, al CSS le colocas esto:

Código:

#desc {
position: relative;
}

#desc img {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50px;
left: -50px;
}

Donde dice width: 100px; y height: 100px; debes modificar esos valores por el ancho y alto que quieres que tenga la imagen, pero ¡cuidado! Los valores deben ser iguales. Además, el border-radius debe ser igual a la mitad del valor del width o height.
Asumo que verás ese left: -50px y te preguntarás para qué cornos es, como cualquier persona razonable se lo preguntaría. Ese código hará que la imagen esté 50px a la izquierda del borde izquierdo de mi código (si queremos que sea a la derecha, se cambia por right, y el valor se puede modificar a gusto). En mi ejemplo, tendría lo siguiente:

Pero ¡nuevamente tengo un problema! La imagen se superpone. Por lo que añadiremos a la caja del texto un margen para corregir ese problema. En este caso, será un margen a la izquierda de unos, pongamos 60px aproximadamente (esto se elige por pura matemática):

Código:

#texto {
margin-left: 60px;
}

Nuestro nuevo resultado será este:


Hasta aquí llega la primer parte del tuto. En la última parte aprenderemos a darle un lugar a nuestros subforos (: 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