#ncfaq

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.

¡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! 💖

¡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.

¡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.

¡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 😁

¡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.

¡Hola anon! Yo uso varias:

FontAwesome 5:

Cappuccicons:

Icofont:

Phosphor:

Game-icons:

Iconsax:

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.