[Tutorial] Crear una caja para utilizar en sus foros con css.

[Tutorial] Crear un caja para utilizar en sus foros con css.

Estaba con ganas de crear un tutorial como este donde
los que lo utilicen tambien didacticamente aprendan un poco de
 css y bueno, matar dos pajaros de un tiro.

Muchos de los nuevos usuarios de smf no saben que se utiliza un lenguaje de programacion muy interesante llamado CSS "hojas de estilo en cascada" (Cascading Style Sheets) y que no es super dificil de usarlo. La idea de este tutorial no es hacer un curso de css ni mucho menos, es crear un recuadro o caja que se pueda utilizar en sus foros en total libertad donde sea y totalmente personalizado a su gusto.

La idea es que utilicen la caja cuando quieran,
si bien es muy basica, pueden hacer muchas otras cosas buscando
codigos css en muchas webs de internet.
Ejemplo: http://usuarios.multimania.es/dhtml_club/objetos/propiedades.htm

Comencemos

Creamos el estilo de la caja

QUE ES ESTO 

.cajabylean
{
   padding: 5px 5px;
   font-size: 12px;
   border: 1px solid #000000;
   background: #F5F6CE;
        width: 500px;
}


.cajabylean | es el nombre de la caja que luego van a llamar en el div, pueden poner el nombre que quieran pero recuerden que no este ya en su estilo ese nombre | El nombre de esta parte del codigo seria el "Selector"

{} | estos simbolos son parte de la sintaxis del lenguaje css, siempre se abre, se declaran los valores y se cierra.)

padding: 5px 5px; | Esto seria el relleno, el primer 5px serian los pixels que deja entre arriba y abajo de lo que escribas el segundo 5px serian los pixels que deja entre la derecha y la izquierda de lo que escribas

font-size: 12px; | Este es el tamaño de la letra

border: 1px solid #000000;  | Este sirve para darle un borde a la caja, 1px es el ancho del borde y #000000 es el codigo hexadecimal del color.  Tabla de colores hexadecimales: http://html-color-codes.info/codigos-de-colores-hexadecimales/

Background: #F5F6CE; | Este codigo es el color de fondo de la caja

width: 500px; | Este seria el ancho de la caja

Con estos simples valores podran tener su propia caja, pero lo mas interesante es hacerla funcionar sin tener que estar escribiendo a cada rato todo este codigo.



Seria la segunda parte del tutorial...

Para que este class (desde ahora le llamaremos class a la caja) funcione siempre que lo llamemos debemos hacer lo siguiente:

Abren la hoja de estilo de su foro (En 1.1.11 Themes/default/style.css | En 2.0 RcX Themes/default/css/index.css) y al final del codigo colocamos nuestro class (Al final o al principio es lo mismo, pero queda mas prolijo y facil de encontrar al final para mi!).
Quedaria asi:

Code: [Select]

.
cajabylean
{
   padding: 5px 5px;
   font-size: 12px;
   border: 1px solid #000000;
   background: #F5F6CE;
        width: 500px;
}


Ahora podremos llamar nuestra caja en un div donde nos interese tenerlo.
Esto quedaria asi, llamandolo.

Code: [Select]

<div class="cajabylean">Contenido</div>
<div></div> | Es la etiqueta que tendra nuestra caja...
class=""  | Es donde vamos a colocar el nombre de la caja que hicimos...
Contenido | Donde pondremos lo que queramos... (Imagenes, texto, lo que quieras)...

Bueno, eso es todo, ya tendran su hermosa caja hecha a su medida!!


y se vera asi:

Si tienen alguna consulta ya saben que la pueden hacer aca!!
Espero que les sirva!
Saludos!!

Entendi todo el tutorial osea probe y hice pero la cosa es que quiero saber cual es el codigo y como ponerle una imagen o un html o no se puede ? Disculpa solo queria consultar. 

El codigo es este por ejemplo:
.cajabylean
{
   padding: 5px 5px;
   font-size: 12px;
   border: 1px solid #000000;
   background: #F5F6CE;
        width: 500px;
}

Con eso te saldra una caja si lo llamas por ejemplo en tu display o index o archivo que quieras.
Para llamar la caja haces lo siguiente:
<div class="cajabylean"> y aca en el medio pones el codigo html que quieras. </div>
Si queres poner una imagen pones <img src="codigo de la imagen" alt=""  /> pero eso ya es html.
Cualquier duda avisame que te ayudo

El codigo es este por ejemplo:
.cajabylean
{
   padding: 5px 5px;
   font-size: 12px;
   border: 1px solid #000000;
   background: #F5F6CE;
        width: 500px;
}

Con eso te saldra una caja si lo llamas por ejemplo en tu display o index o archivo que quieras.
Para llamar la caja haces lo siguiente:
<div class="cajabylean"> y aca en el medio pones el codigo html que quieras. </div>
Si queres poner una imagen pones <img src="codigo de la imagen" alt=""  /> pero eso ya es html.
Cualquier duda avisame que te ayudo

Gracias ! Me sacaste la duda ! Ahora creo yo que podre ponerle tipo recompensas a los display de los usuarios.

Bien ahí :bien:

Hola amigo lean Queria Informate que el link de ejemplo esta dañado o roto como se diga

y ps quisiera ver el ejemplo para llevar a cabo esta modificacion

Gracias por avisarme! Ya lo correji!