Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Descarga MyBB 1.8.21
SoporteMyBB tiene un total de 1063 temas de soporte. 0 quedan aún por resolver, 221 han quedado obsoletos y 842 han sido resueltos.
Aún no tienes una cuenta, regístrate es gratis.

Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
eNvy[Tutorial] Estado de tema con FontAwesome Icons
 eNvy
Usuario del Foro

Estado: Sin conexión Registrados
36
252
190
Argentina
190
54
1
0
17 March 2016, 17:24
#1
3
Mejor respuesta del mensaje Estado de tema con FontAwesome IconsBueno, esto lo arme hoy para mi foro, así que se los dejo aquí.

Voy a dejar 1 solo ejemplo, la idea es que también la gente aprenda a hacer este tipo de cosas, no es muy complejo.

Paso 1

Vamos al panel de administración > estilos y plantillas > estilos > tu estilo (el de tu tema) > abren thread_status.css

Paso 2

Dentro, vamos a modificar la primer clase, por lo siguiente:

Debes agradecer para ver el contenido...

Paso 3

Ahora les voy a dejar un ejemplo, lo voy a realizar con la clase "dot_folder" la cual es para mostrar el tema de forma normal con un punto haciendo referencia a que hay mensajes nuestros en dicho tema.

Vamos a buscar la clase .thread_status.dot_folder y la vamos a reemplazar por estas 2:

Debes agradecer para ver el contenido...

En la primera clase :before, colocamos el ícono del punto que indica que nosotros comentamos en este tema, por eso tiene un tamaño de 8 píxeles para que sea pequeño. Al mismo tiempo, tiene posición absoluta para posicionarse sobre el ícono que vamos a utilizar en :after, y el z-index con valor 1 para posicionarse sobre el ícono que vamos a utilizar en :after.

Aclaración: si no les gusta como queda, pueden acomodarlo simplemente agregando la propiedad margin y jugando con los valores.

En la segunda clase :after, colocamos el ícono de una hoja con rayitas para indicar que es un tema, por eso tiene un tamaño de 14 píxeles (en FontAwesome Icons, 14 píxeles es el tamaño para que se vea perfecto, cada uno juega con los tamaños a gusto). Tiene posición relativa y z-index con valor 0 para quedar debajo del ícono que utilizamos en :before.

Para modificar los íconos, tienen que modificar la propiedad content y el valor. Para conocer los valores de los íconos les dejo el siguiente link: https://astronautweb.co/snippet/font-awesome/

De cualquier forma si se descargan la última versión de FontAwesome, pueden abrir el archivo .css y revisar el content de cada ícono (aunque no tendrían la vista previa claro).

¿Y como queda esto?

Pues de este modo:

Debes agradecer para ver el contenido...

Recuerden, yo solo deje un ejemplo con la primera clase, ustedes deberán modificar a gusto el resto.

Saludos.

P.d.: Si lo van a copiar en otro sitio, por favor dejen los créditos y en lo posible el link hacia soportemybb.es, ya que no van a encontrar este tutorial en otro lado ANTES.
Última modificación: 17 March 2016, 17:30 por eNvy.
 
 Whiteneo
Beta Tester

Estado: Sin conexión Beta Testers
336
4,451
Mexico
557
79
5
18 March 2016, 02:34
#2
0
Gracias, esto viene muy bien ya que muchas veces no se quieren utilizar imágenes ya en los temas y con esto se ahorrarría muchísimo detalle en todo el foro al saber lo de los íconos de los temas y todo eso.

Viene muy bien a todos ya que últimamente hay ya muchísimos estilos que usan de todo.

saludos y gracias por compartirlo, ya había agradecido, sin embargo quiero agradecer textualmente igual ya que estos aportes son únicos ya que no existen en la red que uno sepa y servirán de guia a muchos de como hacer esto y luego hacer cosas nuevas gracias a la información del tema.

Saludos...
 
 eNvy
Usuario del Foro

Estado: Sin conexión Registrados
36
252
190
Argentina
190
54
1
0
18 March 2016, 03:43
#3
0
De nada Dark! la idea es compartir ^^
 
 llProKsll
Usuario del Foro

Estado: Sin conexión Registrados
28
342
250
Venezuela
250
145
0
0
18 March 2016, 18:24
#4
0
Vaya, que bien esto es mejor que utilizar imagenes, en lo personal no me gusta usar imagenes justo en esa parte del foro pero ya estoy tan acostumbrado al font awesome que se ve cool y eso no cuenta como imagenes asi que esta bien Gran sonrisa Gracias @ eNvy por compartir Yep
 
 chloe14
Usuario del Foro

Estado: Sin conexión Registrados
4
13
2
Spain
2
15
0
0
7 November 2017, 16:50
#5
0
Excelente, me sirvió muchísimo. Gracias por compartirlo Sonrisa
 


Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Tips para crear un tema en MyBB 1.8 Whiteneo 6 840 25 January 2019, 19:54
Último mensaje: Whiteneo
  [Tutorial] Estado de tema con FontAwesome Icons [ACTUALIZADO] Javier 0 365 28 March 2018, 20:41
Último mensaje: Javier



Usuarios navegando en este tema: 1 invitado(s)