#ncfaq

[necromancercoding]

Foro Activo ha implementado la nueva página de /discover, que sirve para ver la actividad de un foro. Esta tiene un nuevo template editable (General -> Discover) que es super fácil de editar y de customizar. Abajo del cut encontrarás una lista completa de todas las variables y bloques del template.

{TITLE_ACTIVITY_FEED}: Genera el título de la página ("Toda la actividad"). Bloque no_activity: Se genera cuando el foro no tiene actividad reciente.

{no_activity.INFO}: Genera el texto de sin actividad reciente ("No hay actividad de los miembros en el foro para mostrar en este momento.").

Bloque has_activity: Se genera cuando el foro tiene actividad reciente.

{has_activity.L_ACTIVITY_END}: Genera el mensaje de llegar al final de la actividad ("Has llegado a la última actividad guardada por el momento.").

{JS_COLLAPSE}: Genera el script para los grupos colapsables (si muchos usuarios han recibido un award el mismo día, por ejemplo).

[bloque has_activity >] Bloque activity_date_group: Genera los diferentes grupos de actividad (se divide en días).

{has_activity.activity_date_group.FORMATTED_DATE}: Nombre del grupo de actividad ("hoy", "ayer", etc).

[bloque has_activity > bloque activity_date_group > ] Bloque activity_feed_item: Genera cada línea de actividad.

{has_activity.activity_date_group.activity_feed_item.TYPE}: Genera el número del tipo de actividad (dejo abajo una lista de todos los números que he encontrado).

{has_activity.activity_date_group.activity_feed_item.EXTRA_CLASS}: Genera la clase .same-user-next que se añade si hay dos actividades seguidas del mismo usuario.

{has_activity.activity_date_group.activity_feed_item.U_AVATAR}: Genera la url del avatar del usuario que ha realizado la acción.

{has_activity.activity_date_group.activity_feed_item.DATETIME}: Genera la fecha completa ("HH:MM DD/MM/AAAA").

{has_activity.activity_date_group.activity_feed_item.TIME_FORMATTED}: Genera la fecha formateada ("hace X horas", "HH:MM").

{has_activity.activity_date_group.activity_feed_item.ACTIVITY}: Genera la descripción de la actividad.

Números de los tipos de actividad (tal cual los listan en Forumactif):

0: registro.

1: nuevo tema.

2: respondió a un tema.

3: obtuvo una recompensa/premio.

4: publicación de una entrada de blog.

5: generación de la hoja de personaje.

6: publicación de un anuncio (compra/venta).

7: publicación de un evento (calendario).

8: cambio de nombre.

9: nueva encuesta.

Cualquier duda que tengan, pueden pasarse por el ask, y si este tutorial les sirvió, se agradecen reblogs para que llegue a más gente. ¡Saludos! 💚

[necromancercoding]

Necro una duda, quisiera hacer que en los post de los admins el perfil no se vea igual, quitando algunos campos y acomodándolos diferente a los usuarios, se que tienes un tutorial pero no se como lo tienes en la lista, podrías linkearmelo por favor, muchas gracias.

¡Hola anon! Pues ahora con el uso de :has() y las clases de grupo es mucho más sencillo. Vamos a suponer que tu grupo de admin es el número 1 (lo habitual), por lo que la clase que buscaremos será .group-1; que tu contenedor del nombre de user en los posts es .phname, y tu post es .post.

.post:has(.phname .group-1) { tu código }

Puedes usar eso como selector (como quien usaría una clase especial) y poner cosas seguidas:

.post:has(.phname .group-1) .postprofile { background:blue; }

O puedes usar CSS Nesting (si vas a modificar muchas cosas):

.post:has(.phname .group-1) { & .postprofile { background:blue; } }

¡Saludos! 💖

PD: Puedes usar esto para cualquier grupo, no sólo admins; con cambiar el 1 por el valor de la ID de tu grupo, es más que suficiente 💞

[necromancercoding]

hola necro o/ vengo con una dudilla, es posible poner en el tablón los temas de un subforo y que salga el avatar del autor? Es que estaba pensando en que sería genial una sección de busqueda automática, se que la llegue a ver en un foro pero no encontré tutorial.

¡Hola, anon! Puedes usar el módulo de novedades. Actívalo y configúralo (le das a la ruedita) para que seleccionar tu subforo de búsquedas. Ahora, edita tu Plantillas -> Portal -> mod_news por el contenido de este pastebin. ¡Listo!

El HTML otorgado es una versión muyyyy básica de ejemplo, que puedes editar tú a tu gusto. Importante que cambies en el script:

-> .ppname: Por donde aparezcan tus nombres de usuario en viewtopic_body. -> .ppavatar: Por donde aparezcan tus avatares en viewtopic_body.

¡Saludos!

[necromancercoding]

Update de nuevos códigos de ayuda en Codepen

¡Hola! Traigo un par de updates de códigos de Codepen. Estos son códigos que no requieren de tutorial (o que su tutorial ya se incluye en dicho pen) por lo que no tendrán su propio post.

Módulos de cambio de tamaño de texto: A petición de anónimo. Tres versiones diferentes (no viene con el diseño de los elementos). Super sencillo de instalar y tremendamente práctico. La elección de tamaño de texto se guarda en las cookies para que el usuario no tenga que estar volviendo a marcar su elección (no se puede ver en codepen pero prometo que funciona).

Colores secundarios para grupos: Aprovechando que los colores relativos ya tienen un support bastante bueno. Usa, como indica el pen, el JS Básico para Personalización de Posts. Super fácil de aplicar y usar.

Espero que les sirvan estos dos codiguitos. ¡Abrazos!

[necromancercoding]

¡Hola, Necro! ¿Qué tal? ¿Podrías explicar cómo hacer esto que dijiste en la recapitulación de las actualizaciones de FA: "ahora podemos usar _userdata. groupcolor para crear nuestra variable de groupbody"? Gracias de antemano <3

¡Hola anon! Es super sencillo, se usa similar a como se usaba antes el mod_login.

Primero que nada, tendremos que protegernos para que cuando entre un invitado o alguien sin color asignado, tenga un color que pueda enganchar el JS. Para eso, vamos a usar un bloque if que cheque esta situación y redeclare el groupcolor:

if (_userdata.groupcolor.length === 0){ _userdata.groupcolor = '666666'; }

Con esto, ya podrías usar el groupcolor, aunque a mí me gusta normalizarlo en lowercase para poder usarlo en reglas de @/container y similares:

var bodyColor = _userdata.groupcolor.toLowerCase(); $('body#phpbb').prepend('<style>:root { --groupbody:#'+bodyColor+'; }</style>');

Y ya lo tendrías 😁

PD: Recuerda meter todo el JS dentro de un $(function(){ aquí }); y marcarlo para todas las páginas.

[necromancercoding]

Hola Necro, espero que te encuentres bien hace rato que por cuestiones de tiempo no había podido ingresar para seguir con mis proyectos de skin jejej, pero ahora que regreso tengo una duda, si quisiera crear iconos propios para el foro y colocarlos en la skin, cual es el proceso para realizarlo, y tendrás conocimiento de que medida deben de ser los mismo. Gracias de antemano por tu apoyo.

¡Hola HR! Todo bien por acá, espero que tú también andes bien 💕

La manera más sencilla de hacer tu propia icofont es usando IcoMoon.

1.- Tendrás que buscar los svgs de los iconos que quieras usar (recomiendo FlatIcon, siempre dando crédito a los creadores). Importante que el svg del icon sea monocromo. En FlatIcon, puedes seleccionar en filtros 'Black' y usar cualquiera de las tres opciones (Outline, Fill o Hand-drawn); lo importante es que sea 'Black'. Una vez los tengas, guárdalos todos en una carpetita para que los tengas juntitos. Si los tienes ya con el nombre de la clase que quieres para ese icon, mejor que mejor.

2.- Regístrate en IcoMoon y haz click en la parte superior donde pone 'IcoMoon App'. Una vez allí, le vas a dar al hamburger icon en la parte superior izquierda y vas a darle a 'Manage Projects'. Ahí le vas a clickar a New Project, y le pones el nombre de tu fuente. Y le das a LOAD.

3.- Ahora te toca subir todos esos iconitos. Una vez subidos, te van a salir todos en la pantalla; si quieres añadir más, NO le des a upload, en 'Untitled Set', a la derecha, le das al hamburger icon y le das a 'Import to Set'. En el hamburger icon también puedes editar el nombre del set dándole a Properties -> Edit Metadata -> Name.

4.- Selecciona los iconos que finalmente llevará tu fuente. Selecciona el primer botón de arriba (el del cursor con el cuadradito) y haz click en toditos tus iconos. Ahora dale abajo a la derecha a 'Generate Font'. Antes de hacer nada, le vas a dar arriba a la izquierda a 'Preferences'. Cambia tu font name a algo único (es lo que usarías como font-family), y cambia el class prefix a algo relacionado con la font name. Puedes usar por ejemplo la referencia de cómo nombran otras fuentes de icono sus clases y nombre: phosphor/ph-, cappuccicons/cp-... Una vez que lo tengas, dale a 'CSS Selector' y selecciona 'use a class'. Usa el mismo prefijo pero sin la -. Por ejemplo, si fx- es tu prefijo, .fx es tu clase. De nuevo, ejemplos como cappuccicons: cp cp-flower-o.

5.- En esta pantalla también puedes hacer cambios generales sobre la fuente. Si no has cambiado las clases de tus iconos, edítalas aquí. Recuerda que es case-sensitive (si pones mayus, tendrás que usar mayus en tu class cuando uses el icon). También puedes modificar el código de pseudoelemento (no recomiendo cambiarlos a posteriori si updateas la fuente para añadir más iconos, o vas a tener que modificar los códigos que hagan uso de ellas).

6.- ¡Has terminado! Dale a download y sigue el método de subida de fuentes que he explicado en posts como este. IcoMoon te da el stylesheet directamente, así que solo tendrás que modificar los links en dicho CSS por los tuyos de dropbox, y luego subir ese CSS para usarlo en tu foro.

¡Espero que te haya servido este minituto! Saludines 💖

[necromancercoding]

Hola Necro ❤️! Que fuentes/páginas de icons sueles utilizar para tus skins? He visto varios que me parecen más lindos que los de cappuccicons! Y como se instalarian? Gracias!

¡Hola anon! Yo uso varias:

FontAwesome 5:

Cappuccicons:

Icofont:

Phosphor:

Game-icons:

Iconsax:

Todas se instalan poniéndolas en tu overall_header antes de </head>. Hay muchos más que otros coders usan, pero estos son los que personalmente suelo usar (y depende del skin uso uno u otros), y van variando/añadiendo nuevos (por ejemplo, Phosphor e Iconsax son las últimas incorporaciones, Icofont ya no lo uso demasiado) ¡Saludos!

[necromancercoding]

Ahora que la pseudoclase :has() cuenta con un soporte casi global, y aunque sus usos son increíblemente amplios, quería traer un uso bastante concreto y que ayudará a muchos, pues es una de las preguntas más comunes en mi askbox a lo largo de los años: el diseño de categorías y foros 'especiales', es decir, que no son iguales que las por defecto ya sea en tamaño, colores, posiciones.

Con :has(), no necesitarás añadir clases con JS: puedes conseguir el mismo resultado poniendo un elemento en tu título de categoría o en tu título/descripción de foro.

Antes que nada, me estaré refiriendo al codepen que podéis ver aquí, por lo que el code que incluiré en este tutorial es limitado.

El uso de :has(), como digo, es amplio. Pero para el caso que nos atañe, es limpio y sencillo:

Coloca un elemento con la clase que quieras en el título de tu categoría o subforo. Dependerá del diseño que quieras hacer: si quieres que afecte a toda la categoría ponlo en esta, si es personal del subforo ponlo en el mismo. Ten en cuenta que esto aparecerá en más de un sitio (tu navegación, subforos interiores, etc) por lo que intenta usarla tal y como ejemplifico en el codepen.

Teniendo esa clase presente, puedes referirte a ella con la gramática siguiente: .claseDeCajita:has(.claseIdentificativa). Con eso puedes hacer lo que te plazca. Si te cuesta verlo, piensa en cómo lo harías con JS. Con JS, tendrías una clase asignada a .claseDeCajita, que habrás dispuesto de manera similar en un u otro elemento en el título de la categoría. O, en su defecto, usarías las ids de categorías y foros. Piensa que :has() reemplazaría en este caso ese id o clase. Es un scope más limitado, no te hace falta saber el id del subforo (lo que facilita porteos de skin, o para my fellow creators, la creación de subforos especiales sin necesidad de mucha dificultad para la instalación.

Go nuts. Puedes modificar virtualmente cualquier cosa con esto.

Recomiendo, por supuesto, leer la documentación de :has() y ya de paso, recomiendo :not(), pues se pueden usar en conjunto y son todavía más poderosos.

Si tienen preguntas, pueden hacérmelas llegar a mi askbox; y si les ha servido este mini-tutorial, denle un rebloguito para que llegue a más gente 💕