[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.
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:.
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.<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!!