[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://www.manualdecss.com/codigos-css/indice-codigos.html
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:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimgur.com%2FhNy1g.png&hash=f79aa321dab88080b2b2bb6bc1b633c88e66e267)
Si tienen alguna consulta ya saben que la pueden hacer aca!!
Espero que les sirva!
Saludos!!
Muy buen tuto lean ;) Igual editando el CSS puedes modificar los quotes y demas cosas del foro :P
Estos si son los tutoriales que ayudan :) xD
Revisa bien el tutorial... es imposible que haya etiquetas PHP en un estilo CSS...
Movido de muy mala gana (Simpsons FTW) :P
PD: "final del codigo antes de que se cierre la etiquera php (?>) colocamos nuestro codigo." los archivos CSS no se inician ni cierran con <?php o ?>
ajajaj si, es que en el medio del tuto estuve en el ftp de un usuario de smf arreglandole unas cosas jaja por eso se me paso eso!
Gracias por avisarme!
Edit: Arreglado!
SAludos y me alegro que sirva!
:D genial! gracias lean!
Muchas graicas lena, me solucinaste una duda xd
jaja me alegro que les guste el tuto. Para eso lo hice! jaja
SAludos!
El uso de tu tuto con el Custom Bbcode caería bien ah!
http://custom.simplemachines.org/mods/index.php?mod=621
Aunque no se si ese funciona para RC3 :-\
Buenisimo, asi dejo de instalar mods con caja al pedo ;D.
Gracias lean!
aja gracias herr, recuerda que es 100% modificable y que con un poco de php se pueden crear cosas como el popup que te invita a registrarte y muchas mas cosas. Saludos!
Quote from: lean on August 19, 2010, 04:12:56 PM
aja gracias herr, recuerda que es 100% modificable y que con un poco de php se pueden crear cosas como el popup que te invita a registrarte y muchas mas cosas. Saludos!
Grosso voy a ir investigandolo un toque, pero igual asi como está me es de mucha utilidad.
Gracias de nuevo! ;)
Excelente, esta bueno para los que se van iniciando en css, y vean que es muy practico y sencillo :).
Saludos!
Claro!! el fin es ese, para los que escuchan CSS y se asustan que vean que no es tan complejo.
Gracias por tu comentario!
saludos!
Muy bueno ya sabia algo de esto pero no exactamente, me fue de mucha ayuda tu tuto ;)
Este foro deberia tener el mod favoritos ya que se necesita mucho, hay temas interesantes que me gustaria guardar para que no se me pierdan despues.
Muchas gracias por tu comentario sum!
Para crear cajas no se necesitaba poner también display: block; ? :-\
Eso es solo para que un elemento inline no sea así. Da igual creo.
Un div por defecto es un elemento de bloque.
Exelente me salio para mi foro completo y muy bueno me encanto esta modifcacion BBCODE!
Gracias!
Excelente tutorial, el css es fantástico :)
gracias theSaRk!
Y para hacerlo con los bordes circulares? :P
Aca tenes una web linda para investigar sobre css.
http://www.w3schools.com/
Te vengas por lo de musicaysonico no? ajajajjaja
Ban al mod por no dar respuestas de su tuto!
Quote from: distante on October 27, 2010, 11:07:22 AM
Ban al mod por no dar respuestas de su tuto!
:-* :-* :-*
No te recomiendo que uses -moz-dev... solo son visibles en Firefox y Chrome... usá imágenes redondeadas o CSS3 (todavia no es validado porque sigue siendo beta, o algo así...)
Ya lo tendré que hacer con imágenes u.u
Facil, le pones un background con imagen que tenga las esquinas redondeadas ajaja
Eso de la caja lo entiendo pero por ejemplo esos de cajabylean ul li o algo así para que sirven y como se hacen? no se si en este tema me puedan ayudar o hago otro nuevo para no desvirtuar ahí me dicen :P
ul y li son atributos para armar listas en HTML.
Si se lo que son creo que mas o menos así no:
<ul>
<li>1.-</li>
<li>2.-</li>
</ul>
Pero por ejemplo para que se emplean en el css, cual es la función, eso no lo entiendo bien :S, por ejemplo esto:
.buttonlist ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a
{
display: block;
font-size: 11px;
font-weight: bold;
color: #424242;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
cursor: pointer;
}
.buttonlist ul li a:hover
{
color: #417394;
text-decoration: none;
}
.buttonlist ul li a span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
No entiendo bien :S, entiendo lo basico por ejemplo una caja que diga .cajadeestilo y la encierras en un div class="cajadeestilo" pero cuando son .cajadeestilo ul que funcion tienen en el css?
Y si, es así como lo pones...
y así no se ponen números, para los números se usa <ol> y </ol>.
@Sum41 .- se llaman selectores.
sirven para aplicar estilos a un elemento en particular, también agiliza un poco el trabajo de estar colocando clases a cada elemento (X)html.
te pongo un ejemplo gráfico:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg510.imageshack.us%2Fimg510%2F8568%2Fselector.png&hash=bd18b1cda5a901aa7f57064f5f7f00f84a95a76d)
en ese ejemplo la propiedad color:black, estaría afectando al <li>
Quote from: DoctorMalboro on December 31, 2010, 12:35:52 PM
Y si, es así como lo pones...
y así no se ponen números, para los números se usa <ol> y </ol>.
Creo que no entendiste, a lo que me referia es a lo que zutzu explico, por cierto lo de los numeros solo lo puse por decir algo como refiriendome a "Linea 1" "Linea 2".
@zutzu: muchas gracias es lo que buscaba, ya lo entiendo un poco mejor jeje xD
Te expliqué un error de HTML nada más, CSS no es mi fuerte :P
Quote from: DoctorMalboro on January 01, 2011, 01:04:57 AM
Te expliqué un error de HTML nada más, CSS no es mi fuerte :P
ni html, ni php ni .... ::) :P