¡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.
2087
vaporwave
pixelskylines
blakekathryn
ellievsbear
kaledo-art
discoholicmusic
kianamaiart
tangentwithtanner
