#ncfaq

[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! vengo por tu sabiduría con una duda/idea que podría facilitar los registros para cualquier foro (si es que ya no esta implementado y no me entero xD). Veras, vi el super formulario de foroactivo y se me ocurrió que seria genial tener un formulario en el tema de registro, donde la persona solo pone los datos, envía y listo! el mensaje queda con el formato, en lugar del clásico copiar y pegar al final. Lo intente colocando el código en un tema y no funciono u.u ayuda por favor

¡Hola anon! Los formularios tal cual los entrega FA sólo se pueden poner en páginas HTML, no en temas de registro. Pero se puede adaptar para ser parte de una tablilla perfectamente.

Para facilitarnos el trabajo de la generación del formulario, vamos a usar el generador de nuestros compas brasileños de Forumeiros, que es super sencillo de usar y aplicar. Tu código terminará viéndose algo similar a esto:

Lo que pondremos en el post:

Cogerás el <form> entero y el <textarea> que se ve con los {{campos}}. Esto puedes reskinnearlo como quieras, mientras mantengas el form y los inputs y sus atributos con sus valores.

Lo que pondremos en el template viewtopic_body:

Al final del todo de nuestro template, pondremos los últimos dos <script>. No pongas el primero (el que termina con jquery.min.js).

Lo que pondremos en nuestro CSS:

Para evitar que el usuario pueda postear usando la quickreply o el botón de responder y sólo use el formulario, vamos a esconder un par de cosas. Puedes ponerlo en viewtopic_body si quieres ahorrarte un poquito de espacio en tu CSS.

body:has(#fa-generated-form) form#quick_reply, body:has(#fa-generated-form) .h3:has(+br+form#quick_reply), body:has(#fa-generated-form) a[href^="/post"][href*="&mode=reply"] { display: none; }

Espero que te sirva, ¡saludos! (Y gracias a los compas brasileños por el generador, ¡que es una maravilla!)

[necromancercoding]

Contesto en inglés para que el anon pueda entenderme y dejo la traducción debajo 🖤

ENG: Forumactif is the proper name of the server that we use in the spanish rp, because the company was born in France. Forumactif and its “children” (Foroactivo, Forumotion, etc) all come from the same background, so all the changes, grammar and codes used in their platforms are the same (as they all come from the forum phpbb, that you can also download and upload to a server of your own if you like, they’ve only made changes and made it accesible). As long as you use the same version (phpbb2, phpbb3, invision, etc), you’re good to go. You would need to change plain text that is written by the coder to your native language, but that’s all. And I have proper love for forumotion and forumactif support forums, because they usually have better codes that we have in the spanish one 😂

P.S. They may be things that forumactif has that foroactivo doesn’t, but mainly because the updates go live first in their end. But it shouldn’t be a problem for theme designs.

***

ESP: Forumactif es el nombre correcto para el servidor que usamos en el rpg hispano, porque la compañía nació en Francia. Forumactif y sus “hijos” (Foroactivo, Forumotion, etc), parten todos de la misma base. Todos los cambios, gramática y codes usados en su plataforma son los mismos (debido a que sus códigos vienen de los foros phpbb, que puedes descargar y subir a un server de tu propiedad si quieres, ellos solo han hecho cambios y lo han hecho accesible). Mientras que uses la misma versión (phpbb2, phpbb3, invision, etc), puedes hacer lo que quieras. Simplemente tienes que cambiar el texto plano proporcionado por el coder a tu idioma y listo. Y además tengo un amor guardado para los foros de soporte de forumotion y forumactif porque suelen tener mejores códigos que los que nos proporcionan en el español 😂

P.D. Puede que tengan cosas en forumactif que todavía no tengamos en foroactivo, básicamente porque las updates se aplican primero en sus servidores. Pero no debería ser un problema para las skins.

Hey there ! I am so sorry i can't speak spanish, i was terrible in spanish class. I hope english is good for you ! I just saw you reblog my blank theme for PhpBB3, do you guys use Forumactif too ? If so, i can maybe translate my theme in english (and why not, in spanish ?)

ENG: Oh, I didn't expect this message! I appreciate that you wrote me! My level of English is basic but I could understand your ask perfectly ♥ 

In Latin America we use Foro Activo. As I understand it, it is the same server as Forumactif, so in theory your theme should be able to apply without problem (here we call them 'Skin'). 

It would be great to have your installation guide in English or Spanish. I really appreciate this message and I hope to see more of your precious creations! _________________________________

ESP: Oh, no esperaba este mensaje! Agradezco que me escribieses! Mi nivel de inglés es básico pero pude entender tu ask a la perfección ♥

En America latina usamos Foro Activo. Según tengo entendido, es el mismo servidor que Forumactif así que, en teoría debería poder aplicarse sin problema tu theme (aquí les llamamos 'Skin'). 

Sería grandioso contar con tu guía de instalación en inglés o bien, en español. En verdad te agradezco muchísimo este mensaje y espero poder ver más de tus preciosas creaciones!

Para quienes estén leyendo, sean parte de la comunidad RP Hispanohablante y sepan contestar ¿Foroactivo, es lo mismo que  Forumactif, no? Solo que uno es el server de América Latina y el otro de Francia ��verdad? A ver, etiqueto a @necromancercoding @isleycodes @magicalcore y a @millie-non-codes​ (por llamar a algunos) ya que son coders que han trabajado mucho con foroactivo y quizá lo sepan responder ;n; que quizá pueden ayudarnos!

[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 💕

[necromancercoding]

¡Holi, Necro! Seguí tu tutorial de hacer pestañas con labels en las tablillas (¡muchas gracias por enseñar!), pero la tablilla es para que varios usuarios puedan usar en sus posts dentro de un mismo tema, por lo que me gustaría saber si existe una forma de asignar un id único al label de cada post sin cambiarlo manualmente cada vez. Según vi, una vez respondiste a una duda similar aplicando {postrow.displayed.U_POST_ID} pero eso no funciona dentro de los posts (creo), ¿hay algo similar?

¡Holi! La mejor opción para tablillas con pestañas si es algo a compartir siempre será el JS. Aquí tienes un codepen con un código básico de pestañas. Por el momento, si quieres usar CSS, se tienen que cambiar manualmente por el usuario en cada post.

Pero si tienes acceso al PA, se puede hacer una variable similar a las de FA (las que tienen {ESTAPINTA}) y reemplazarla a posteriori.

$(function() { $('.postbody > .content > div:has([id*="{POSTID}"], [for*="{POSTID}"], [name*="{POSTID}"], [class*="{POSTID}"])').each(function() { if ($(this).parents('.post').attr('id')){ var postID = $(this).parents('.post').attr('id').split('p')[1]; } else { var postID = $(this).parents('.post').find('.postbody .h3 > a').attr('href').split('#')[1]; } $(this).find('[id*="{POSTID}"], [for*="{POSTID}"], [name*="{POSTID}"], [class*="{POSTID}"]').each(function() { $.each(this.attributes, function() { this.value = this.value.replace(/{POSTID}/g, postID); }); }); }); });

Esto te permitirá poner {POSTID} y se verá reemplazado por el id del post (importante que tengas la variable que mencionas en tu ask como valor del id del .post, como viene por defecto en el template de viewtopic_body). Esto haría que un sistema de tabs como este:

<input id="tab1-{POSTID}" type="radio" name="tabs-{POSTID}"/> <input id="tab2-{POSTID}" type="radio" name="tabs-{POSTID}"/> <input id="tab3-{POSTID}" type="radio" name="tabs-{POSTID}"/> <label for="tab1-{POSTID}">label 1</label> <label for="tab2-{POSTID}">label 2</label> <label for="tab3-{POSTID}">label 3</label>

Tenga un valor diferente en cada una de las instancias y funcionen individualmente.

Eso sí, algo importante: En el caso del search_results_posts, tienes que editarlo teniendo en cuenta dos cosas:

El valor de ".postbody .h3 > a" en el JS corresponde al link directo al post, ya que en este template, no se le pone id al post directamente. Si lo tienes en otro lado, tendrás que modificar ese valor por el nuevo (personalmente, recomiendo ponerle una clase al link que es lo más sencillo).

La variable de {searchresults.MESSAGE} en este template tiene que estar exactamente igual que su equivalente en viewtopic_body. Por defecto, siendo hija de .post, .postbody, .content, div (sin clase), en orden descendente. Si tienes otro esqueleto, tendrás que modificarlo en el JS (de nuevo, siendo igual en ambos templates).

PD: Está diseñado para ir directamente a por los atributos de id, for, name y class, no funcionará si se pone como texto sin más en el post, como dato.

PD2: El JS debe ir en Todas las páginas.

¡Saludos!

[necromancercoding]

Hola Necro, estaba usando tu nuevo código para darle clases a los campos de perfil, pero no soy capaz de mover las variables a otros lugares del post, como por ejemplo llevar un icono fuera del post profile y ponerlo en la cabecera junto al nombre. ¿Me ayudas, plis? Gracias :)

¡Hola anon! Entiendo que estás usando la variante muevecampos.

Con esta variante, lo único que tienes que hacer para mover un campo de perfil es, en tu viewtopic_body, poner en el elemento que quieras, la clase del campo de perfil en un atributo data-field. La clase, que no su nombre; las clases que reciben tus campos de perfil eliminan espacios, mayúsculas y tildes (si no estás seguro de cuál es la clase de tu campo, usa el inspeccionar elemento sobre el mismo).

Por ejemplo, para mover un campo llamado Icono, en donde lo quieras poner (se pegará al final del div donde pongas el data-field), lo pondríamos así:

<div class="phicon" data-field="icono"></div>

Y los iconos se moverán al cargar la página automáticamente. Si quieres poner más de un campo de perfil en un mismo div, los pondrás así (y saldrán en el orden en el que estén en el PA):

<div class="phfields" data-field="mensajes puntos edad"></div>

¡Saludos!

[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. Existe alguna manera de, por ejemplo, para los usuarios que pertenezca a X grupo, puedan ver y editar en su perfil determinados campos que los de Y grupo no pueden? No sé si me expliqué bien

¡Hola anon! Puedes usar el groupcolor de _userdata para eso.

if ($('form[action="/profile"]').length) { if (_userdata.groupcolor.toLowerCase() === '585e3a') { $('#profile_field_2_5').parents('dl').hide(); } }

Línea por línea: -> El primer if determina que se ejecute sólo si estamos en presencia del form con action="/profile", que es el form que envuelve la edición de los campos de perfil. Si no existe, el resto no se ejecuta. -> El segundo if determina que si groupcolor (todo en minúsculas), es igual al valor que le proporcionamos, se ejecute lo siguiente. Es importante que el color puesto entre comillas esté en minúsculas o no hará check correcto. -> En la línea interior cogemos el id del input/textarea/select, y usándolo como ancla, viajamos hasta su parent dl (que contiene toda la línea del field) y escondemos el field. Puedes cambiar .hide() por .show() (si tienes todos los campos escondidos y vas mostrándolos usando este JS) o .remove() para que se eliminen por completo.

¡Saludos!

PD: Como siempre, a tener en cuenta que este tipo de edits son estéticos. El JS se puede desactivar y el código dejaría de funcionar. Por eso recomiendo usar CSS para esconder los campos que no quieras que se vean en los posts de ciertos grupos; así, si los rellenan, igualmente no les aparecerán. Véase (usando el JS básico):

.post[style*="585e3a"] .nombrefield { display:none; }

De nuevo puede ser editado con CSS en posts, pero si alguien quiere saltarse taaaanto las normas para llegar a ese nivel, ahí ya juzguen si no les vale más la pena darles con un matamoscas en la cara 💕

[necromancercoding]

Hola Necro!!! Espero estés bien. Hay algún JS que coloque el estado de conexión de un usuario? Es decir, que diga "En línea" o "Fuera de línea". He estado buscando pero no encuentro ninguno. Gracias!!!!

¡Hola anon! No te hace falta ningún JS si lo quieres para perfiles sencillos o perfiles de post.

Perfil sencillo:

La variable {USER_ONLINE} (dentro del bloque switch_show_status) mostrará "En línea" o "Fuera de línea".

Posts:

En el bloque displayed, que va dentro del bloque postrow, encontrarás esta variable: {postrow.displayed.ONLINE_IMG_NEW}, que pondrá " online" (espacio incluido, comillas no incluidas), que puedes poner como clase del elemento .post u otro elemento para poder usar pseudoelementos tal que:

.post .pponline::before { content:'Fuera de línea'; } .post.online .pponline::before { content:'En línea'; }

¡Saludos!

[necromancercoding]

Necro una pregunta curiosa, he visto en foros de jcink que a los nombres de usuarios se les puede colocar como color un degrade, en foroactivo también se puede? y como seria? muchas gracias.

¡Hola Robin! Hablé de cómo hacerlo en este post. Puedes usar la misma táctica usando el [style] del span junto con un selector que targettee solo los links que tengan la estructura de los links de usuario (a con link a un /u, span con un style de color, strong). Tu selector sería:

a[href^="/u"] span[style] strong { /* tus efectos para todos los usuarios con color */ } a[href^="/u"] span:where([style="#hexadecimal"], [style="#HEXADECIMAL"]) strong { --color1:#hexadecimal; --color2:#hexadecimal; }

¡Saludos!

PD: A tener en cuenta que en ciertas zonas puede que no haya un span o un strong, y solo el link, concretamente algunas variables de los posts o perfiles sencillos. Combínalo con el código del otro post para que salga todo perfecto 😉

[necromancercoding]

Hola Necro, quería poner un contador de palabras para tablillas de rol, pero no se muy bien por donde tirar. Me gustaría que aparte de contarlas, en alguna parte salga los caracteres y el limite establecido. Gracias.

¡Hola anon! Este código te podría servir, con un cambio para que sea visible para todo el mundo. Usa el mismo HTML, cambia el JS por este (recuerda cambiar las comillas). Ponlo en todas las páginas para que funcione en búsquedas y previews.

$(function(){ $(’.post .trama-texto’).each(function() { var words = $(this).text().split(’ ’); $(this).after(’<div class=“tablillas-palabras”>Este post tiene <b>’+words.length+’</b> palabras. El límite de palabras es <b>X</b> palabras.</div>’); }); });

Modifica la X que sería el límite de palabras que mencionas. ¡Saludos!

[necromancercoding]

¡Hola, Necro!

Estuve revisando tus preguntas frecuentes y tutoriales (muchas gracias por todo eso) pero no logré encontrar un tutorial específico para los fondos para foro, más que nada para saber cómo cambiarle el color a la imagen y que quede de un solo color, como morado o claro u oscuro. ¿Es posible que nos puedas regalar un pequeño tutorial para eso? Por favooooooor.

¡Hola anon! No daría para un tutorial, la verdad, pero sí que te puedo decir cómo hago mis fondos hoy en día, ya que este método tiene buenos resultados y ayuda incluso si no has editado la imagen en absoluto.

Escoge una imagen que te guste. Recomiendo usar Unsplash.

Si vas a querer que sea en monocromo, pásala a blanco y negro. Puedes usar Pinetools.

Crea tres variables, para fácil edición: --body [el color de fondo], --body-img [tu imagen, puesta como url(LINK)] y --body-effect [tu blend-mode]. Si no sabes usar/crear variables, lee este tutorial.

Añade el siguiente código a tu CSS, y listo.

body#phpbb { background-color:var(--body); background-image:var(--body-img); background-blend-mode:var(--body-effect); background-size:cover; background-attachment:fixed; }

Para fondos claros: Usa un color claro (entre #777 y #bbb) y un blend-mode como screen, soft-light...

Para fondos oscuros: Usa un color oscuro (entre #222 y #666) y un blend-mode como multiply, darken, hard-light...

Para fondos de color: Usa tu color deseado y un blend-mode a elegir de los anteriores (para fondos oscuros uso multiply, para fondos claros uso screen o soft-light).

Tus variables dependerán del estilo que quieras conseguir, claro. A veces te tocará editar un poco la imagen (yo casi siempre les quito contraste usando, you guessed it, Pinetools), pero por lo general, este método te dará un buen resultado sin tener que abrir Photoshop, y si en algún momento quieres cambiar la imagen, es tan simple como cambiar --body-img.

¡Saludos!

[necromancercoding]

Hola Necro. He intentado seguir el tutorial de "Crear variable con el color de grupo del usuario visualizando el foro" para poder usar var(--groupbody) en diferentes zonas del foro y me entra en conflicto con el avatar flotante. ¿Habría algún modo de solucionarlo?

¡Hola anon! No sé a qué te refieres con lo del avatar flotante, más allá de asumir que te refieres a un perfil con position sticky. Si es eso a lo que te refieres, no sé cómo puede estar entrando en conflicto, ya que ese tutorial no incluye nada que pueda romper ningún position sticky. ¿Puedes darme más detalles sobre a qué te refieres o qué está ocurriendo exactamente? ¡Saludos!

PD: De todos modos, hoy en día hay una manera más sencilla de aplicar el groupbody. Te dejo el código bajo el cut, por si acaso no estoy entendiendo bien lo del avatar flotante.

Simplemente pega esto en un JS de Todas las páginas:

$(function(){ if (_userdata.groupcolor.length === 0){ _userdata.groupcolor = '5e3641'; /*Cambia esto por tu color base, los invitados verán este color donde pongas var(--groupbody)*/ } var bodyColor = _userdata.groupcolor.toLowerCase(); $('body#phpbb').prepend('<style>:root {--groupbody:#'+bodyColor+';--groupbody-75:#'+bodyColor+'BF;--groupbody-50:#'+bodyColor+'80;--groupbody-25:#'+bodyColor+'40;}</style>'); });

[necromancercoding]

Hola Necro, tengo un par de dudas que no sé si tienes tutorial porque no lo encuentro en el faq o quizá uso un nombre erróneo. ¿Tienes algún tuto para poner un botón que copie el link directo de un post y un tutorial de cómo aplicar efectos a los hover, por ejemplo un blurry a la foto de debajo? ¡Gracias!!

¡Hola anon! Para lo de los hovers hice una colección de efectos aquí que quizá te sirva (está incluido el blur). Y para copiar el link del post, puedes poner esto en tu viewtopic_body, donde quieras que esté el botoncito de copia (tiene que estar dentro del bloque postrow y el displayed):

<a data-href="{postrow.displayed.POST_URL}" title="Copia el link directo al post" class="postlinkcopy"><em class="fas fa-link"></em></a>

Y usas este JS:

$(function() { $('.postlinkcopy').on('click', function(e) { e.preventDefault(); var baseUrl = window.location.origin; var link = baseUrl + $(this).attr('href'); var inputCopy = $('<input>'); $('body').append(inputCopy); inputCopy.val(link).select(); document.execCommand('copy'); inputCopy.remove(); alert('Link copiado al portapapeles'); }); });

Si no quieres que copie la url completa y solo quieres a partir de /, usa este:

$(function() { $('.postlinkcopy').on('click', function(e) { e.preventDefault(); var link = $(this).attr('href'); var inputCopy = $('<input>'); $('body').append(inputCopy); inputCopy.val(link).select(); document.execCommand('copy'); inputCopy.remove(); alert('Link copiado al portapapeles'); }); });

¡Saludos!