ÂĄHey! Este /no/ tan pequeño tutorial viene por pedido en un ask, asĂ que veremos si soy de ayuda.Â
Yo esto lo hago a travĂ©s de los templates, mĂĄs que nada por comodidad propia ya que puede que exista algĂșn mĂ©todo para aplicarlos directamente desde el CSS o utilizando el Javaescript. Sin embargo, como soy de esos a los que les gusta personalizar hasta el Ășltimo rincĂłn, ademĂĄs de no terminar de comprender el JS sin el miedo constante a romperlo, dejarĂ© aquĂ el mĂ©todo que yo ocupo para incluir los Ăconos en los grupos. Debo destacar, primero, que esto es algo âmanualâ, asĂ que deberĂĄn tener paciencia para editar, copiar links y otras cosas mĂĄs.Â
Para comenzar necesitaremos un pequeño código para ir armando lo que queremos.
<a href=âlinkgrupoâ><div id=âgrupo1â> -Espacio para el icono- <n>Nombre del Grupo</n> </div></a>
¿Por qué el uno? Porque claro, no vamos a hacer solo un grupo.
 A algunas personas les gusta tener los estilos de los divs en el css y no en el template, donde pueden ser editados mĂĄs rĂĄpidamente. ÂĄAsĂ que vamos! Hagamos un par para que tengamos las variables hechas. Recuerden que cada grupo debe tener un nĂșmero distinto, para que asĂ sean mĂĄs fĂĄciles de editar.Â
En esta ocasiĂłn haremos cuatro porque soy un maldito perezoso que no quiere hacer mĂĄs.
Como nuestro interés es colocar los iconos para que aparezcan como imågenes en los grupos, vamos a elegir un par al azar para colocarnos dentro de nuestros códigos. En esta ocasión utilizaremos los de FontAwesome, porque son los que han pedido, ¥pero hay muchos otros hosts para que elijan!
Instalamos los iconos en el html y colocamos los que queramos ocupar dentro de los divs. Yo les recomiendo cambiar el i por el span, en caso de que quieran incluir el atributo <i> en algĂșn sitio, para que este no sea alterado tambiĂ©n. AdemĂĄs, podemos agregarles texto o imĂĄgenes, lo que ustedes quieran. Recordemos que esto ocuparĂĄ por completo el espacio de la leyenda, asĂ que dependiendo de cĂłmo hayan editado sus estadĂsticas pueden hacer muchas cosas y de distintos tamaños. Las posibilidades son infinitas. Si notan esos pequeños <n> </n> que atrapan cada nombre del grupo, es porque estos serĂĄn otra variable que podremos modificar. ÂĄObviamente no son obligatorios! Pero es Ăștil tenerlos en cuenta.
Entonces, nuestros cĂłdigos para editar serĂan algo asĂ.
#grupo1, #grupo2, #grupo3, #grupo4 { css del exterior }
#grupo1 span, #grupo2 span, #grupo3 span, #grupo4 span { css de los Ăconos }
#grupo1 n, #grupo2 n, #grupo3 n, #grupo4 n { css de los nombres  }
A estas alturas, nuestros cĂłdigos deben ser un montoncito de cosas sin sentido, y sin ningĂșn estilo.
No es muy lindo, Âżcierto? pero es full editable. AquĂ, solo tienen que dejar sus imaginaciones volar, y ubicar cada atributo sin tener miedo a romper algo.
Ahora, si quieren darle un estilo personalizado a cada grupo (lĂ©ase, el color u otros detallitos) pueden hacerlo agregando otro par de lĂneas de CSS, tomando cada atributo por separado. Si quieren editar los iconos, agregan el span despuĂ©s de cada grupo, si quieren editar las letras, agregan la n. AsĂ, pueden editar cada uno por separado, sin pasar a llevar los cĂłdigos que ya hemos puesto arriba. Â
Y asĂ, ÂĄhasta cuantos grupos tengamos! Esto es muy Ăștil por si quieren, por ejemplo, que el fondo de cada div sea distinto, o que los colores de los Ăconos o las letras cambien segĂșn el grupo. Â
Ahora, es momento de que den a luz a los pequeños artistas que llevan dentro, y comiencen a jugar con los cĂłdigos hasta obtener lo que estĂĄn buscando. Para que esto no sea demasiado largo, no enseñarĂ© puntualmente como darles forma, pero podrĂamos hacerlo luego en otro tutorial.Â
Igualmente les dejo unos ejemplos de cositas que pueden hacer. Pueden ser mĂĄs sencillas, o mĂĄs elaboradas. Los Ășnicos lĂmites que hay serĂĄn los que ustedes mismos se pongan.
Para terminar con este tutorial, debemos meter estos cĂłdigos en el template index-body. El CSS podemos dejarlo aquĂ, entre las etiquetas <style> </style>. Si no, pueden ser colocadas directamente en el CSS del foro, con todo lo demĂĄs.
De vuelta en Index-body, buscaremos esta lĂnea de cĂłdigo.
<em>{LEGEND}Â :Â {GROUP_LEGEND}</em>
La que patearemos borraremos, reemplazĂĄndola por nuestros cĂłdigos html. AsĂ, sin miedo.
ÂĄY listo! Guardamos los cambios. Recordemos que esto es solo para editar los grupos, asĂ que, al ponerlos asĂ, se verĂĄ todo un poco vacĂo. Pueden insertarlos tambiĂ©n en alguna parte de una tablilla que hayan creado para las estadĂsticas, o darles algĂșn efecto en especial para que se vea que forman parte de estas aĂșn si no han metido mĂĄs cĂłdigos. AdemĂĄs, no olviden que deben meter los links de cada grupo manualmente en el template.Â
Para finalizar, les dejo aquĂ el link de los Ăconos de Font-Awesome. Personalmente, utilizo otros listados, pero este es muy Ăștil por su gran cantidad de posibilidades. ÂĄDenle una mirada! (Link)
Y sin mĂĄs, eso ha sido todo. Soy un poco soso para explicar, y siempre doy toda la libertad de acciĂłn posible, asĂ que si algo no ha quedado claro, por favor, envĂenme un mensaje, lo arreglarĂ© enseguida. <3 Eso ha sido todo por ahora, ÂĄmuchas gracias por leer! Y tengan un excelente dĂa.
blakekathryn
pixelskylines
germansingergirl
kianamaiart
s-u-f-j-a-n-s-t-e-v-e-n-s
