#nctutorial

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

[ifeelgeek]

¡Hola! ¿Saben de skins gratuitas? Sé que en algún momento alguien preguntó, pero perdí el mensaje y en tumblr siempre me salen las mismas 2, pero sé que hay más. ):

Hola anón,

Skins gratuitas:

★ Skins de @anita-codes

• https://star-dust.foroactivo.com/

• https://springofdays.foroactivo.com

• https://simplist-peaceful.foroactivo.com

★ Skin de @athenea-owl

• https://www.tumblr.com/athenea-owl/743610844359884800/01-dolls-world-skin?source=share (consultar con la propia Athenea si esta agotada o tiene nuevo cupo)

★ Skin de @emmescodes

• https://boxcity.foroactivo.com

★ Skin de @code-lab : Geniuspanda

• https://blankthemerpg.forumactif.com

★ Skins de @madeinsevilla93

• https://longlongtime.foroactivo.com

• https://dfw-peakyblinders.foroactivo.com

★ Skin de @mystiqueworkshop

• https://gentlesea-skin1.foroactivo.com

★ Skin de Tony @itsmnemosyne

• https://sweetdreams-bt.activo.mx

★ Skins the captain know best (son varios así que directamente tienes el link)

• https://thecaptainknowsbest.tumblr.com/tipos-skins

★ Skin de @grimmcodes

• https://grimmcodes.tumblr.com/post/754621960152039424/thème-n-1-gratuit (esta en frances)

★ Skin de Isleycodes / @butimabadliar

• https://thealienistskin.foroactivo.com (deberías preguntar si esta disponible)

★ Skins de @rossresources

• https://winordiebyross.forumeiros.com (creo que pide que se le contacte para dar el código)

• https://neonnightsbyross.forumeiros.com

★ Por otro lado, @necromancercoding tiene su tutorial para hacer skins paso a paso que podría servirte para intentar montar uno

• https://necromancercoding.tumblr.com/tagged/nctutorial:%20desde%20cero

¿Nos olvidamos alguno? Es probable y posiblemente cierto, pueden comentarnos abajo o mandárnoslo y lo añadiremos :D

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

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, 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!

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, 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!

[necromancercoding]

Hola Necro! Ante todo gracias por todo. Y después mi pregunta. ¿Cómo puedo poner el avatar de los miembros en la lista de los grupos? Gracias!

¡Hola anon! A ti por venir 💕

Respecto a tu pregunta, es relativamente sencillo, sólo tienes que checar bien tu HTML para asegurar de que todo va a su sitio y el JS lo localiza correctamente.

IGNORANDO MI EXPLICACIÓN, porque Apolo ha aportado una variable del template que no sabía que existía y que hace el JS innecesario 💞 Dejo su respuestita aquí:

Hola necrito! Espero que no moleste mi intromisión, justo hace poco tiempo hice en dixinmortal un tutorial al respecto que permite evitarse los javascripts. En el template: groupcp_info_body buscas: <td><a href="{member_row.U_VIEWPROFILE}">{member_row.USERNAME}</a></td> y lo reemplazas por esto: <td class="username_group avatar-mini" data-th="{L_USERNAME} :&nbsp;"><a href="{member_row.U_VIEWPROFILE}">{member_row.USER_AVATAR}{member_row.USERNAME}</a></td> y ya lo tienes.

HTML:

En tu template profile_view_body, identifica cuál es la caja que contiene tu avatar (variable {AVATAR_IMG}). Para el ejemplo, asumiremos que esta caja se llama .psavatar.

En tu template groupcp_info_body, identifica dónde quieres poner tu avatar. Tienes que tener en cuenta que el moderador de grupo es una caja diferente y no se genera dentro del bloque member_row, así que asegúrate que los avatares del mod también comparten la clase para que funcione correctamente. Para el ejemplo, asumiremos que esta caja se llama .gmavatar.

En el mismo template, identifica dónde se encuentra el link al perfil de usuario (variable {member_row.U_VIEWPROFILE} en el bloque member_row, variable {U_MOD_VIEWPROFILE} en el mod de grupo). Similar al avatar, asegúrate que cumplen con la misma clase. Para el ejemplo, asumiremos que nuestro link (a) está dentro de una caja llamada .gmname, por lo que el selector completo será .gmname a.

En el mismo template, identifica el envoltorio de cada usuario. Lo mismo que lo mencionado arriba a tener en cuenta con la caja de mod. Para el ejemplo, asumiremos que esta caja se llama .gmember.

JS:

Incluye el siguiente JS en tu template groupcp_info_body entre balizas <script>, o, en su defecto, crea un JS para Todas las páginas.

$(function(){ $('.gmname a').each(function() { var gmlink = $(this).attr('href'); var self = $(this); $.get(gmlink, function( data ) { var avatar = $(data).find('.psavatar img'); $(self).parents('.gmember').find('.gmavatar').prepend(avatar); }); }); });

(Acuérdate de revisar comillas en este JS) Y listo. ¡Espero que te sirva!

[necromancercoding]

¿Alguna de tus skins tiene por defecto el sistema de "me gusta" de foroactivo? ¿algún tip o recomendación para editar el que viene por defecto con Fa sin morir en el intento? Gracias.

¡Hola anon! No tengo esa sección incluida en ninguna de mis skins, pero es super fácil de incluir. Esta mini-guía puede aplicarse a cualquier skin, mía, de otro coder, o tuya propia.

Como todos los elementos del post, debe de estar dentro del bloque displayed, que a su vez está dentro del bloque postrow. Un ejemplo de bloque para que se entienda de qué estoy hablando:

<!-- BEGIN postrow --> Contenido <!-- END postrow -->

Los likes a su vez tienen su propio bloque, que hace que aparezca o no esta sección dependiendo de si está activada en el PA. Este bloque se llama switch_likes_active. Dentro del mismo, tenemos varios bloques y variables (las variables son las que se ven como: {seccion.NOMBRE}):

-> Bloque switch_like_list: Activa la variable {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}, que generará la lista de los usuarios que han dado like a un post. Esto se puede modificar en General -> Mensajes y Emails -> Configuración -> Me gusta -> Personalizar el contenido "Me gusta" que aparece en los temas. Se genera dentro de un elemento p con la clase .fa_like_list.

-> Bloque switch_dislike_list: Activa la variable {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}, que generará la lista de usuarios que han dado dislike a un post. Este bloque y el anterior existen debido a que puedes permitir que sólo se den me gustas en los posts. Se genera dentro de un elemento p con la clase .fa_dislike_list.

-> Bloque switch_dislike_button: Activa las siguientes variables, todas responsables del botón de No me gusta:

{postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}: Genera el texto fa_dislike, que se usa como clase para el botón. Debe incluirse en el botón. Si has dado dislike, se transforma en fa_disliked.

{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}: Debe ponerse como el valor de data-href de tu botón, pues genera el identificador que usará el sistema para loggear el voto.

{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}: Debe ponerse como el valor de data-href-rm de tu botón, pues genera el identificador que usará el sistema para loggear el voto.

{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}: Genera el texto del botón No me gusta. Puedes cambiar este valor en General -> Mensajes y Emails -> Configuración -> Me gusta -> Personalizar texto "No me gusta".

{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}: Genera la cantidad de votos negativos de un post; genera un span con la clase .rep-nb que, si está vacío, automáticamente se esconde.

-> Botón Me gusta: Este no tiene bloque que lo envuelva, y cuenta con las siguientes variables:

{postrow.displayed.switch_likes_active.C_VOTE_LIKE}: Genera el texto fa_like, que se usa como clase para el botón. Debe incluirse en el botón. Si has dado like, se transforma en fa_liked.

{postrow.displayed.switch_likes_active.U_VOTE_LIKE}: Igual que el de dislike, debe incluirse como valor de data-href del botón.

{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}: Igual que el de dislike, debe incluirse como valor de data-href-hm del botón.

{postrow.displayed.switch_likes_active.L_LIKE}: Genera el texto del botón Me gusta. También puedes cambiar este valor, en General -> Mensajes y Emails -> Configuración -> Me gusta -> Personalizar texto "Me gusta".

{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}: Genera la cantidad de votos positivos de un post, genera un span con la clase .rep-nb y se esconde también si está vacío.

Dicho todo esto, y conociendo los bloques y sus variables, puedes crear tu propio módulo de me gusta. Os dejo un ejemplo de una caja sencilla usando los iconos de phosphor para el like y dislike: HTML / CSS. El CSS tiene una zona de estructura y una zona de estilo (que viene con mis variables, por lo que servirá para mis skins, pero quizá alguna que no está incluida la tenéis que cambiar). Está hecha usando de base Violent Ends, por lo que funcionará del tirón en dicho skin. Dejo captura a continuación:

Y por completar el ejemplo, uno con los valores cambiados en el PA:

Espero que sirva esta mini guía y que puedas aplicarla bien. ¡Saludos!

[necromancercoding]

¡Hola, Necro! Ante todo, gracias por todo lo que haces, tus tutoriales me han salvado la vida más de una vez <3 (perdón por el spam a likes ocasional jaja) Verás, me he fijado que en Jcink pueden poner un gradient/degradado en vez de un color solido para los grupos de usuario y que luego en el username tenga el gradient también, ¿crees que es posible hacerlo en foroactivo? ¡Gracias por leerme!

¡Hola Myrcella! Es más que posible. El código JS que uso yo es de uso personal, pero hay formas de hacerlo con CSS.

Ha quedado un poco tocho, así que meto un readmore.

Para este ejemplo, supongamos que el color de grupo es #585e3a y el color secundario que queremos usar para este grupo es #5e3a48. Antes de nada, aclarar que FA a veces formatea los códigos hexadecimales con las letras (si las hay) en mayúsculas y otras en minúsculas, por eso veréis las declaraciones dos veces, una con los colores en mayúsculas y otros en minúsculas. Si tu color de grupo es sólo números, ese paso no te haría falta. Esto importa sólo para el color asignado al grupo en el PA, porque lo estaremos usando su presencia en el atributo style para seleccionar ciertos elementos.

Ahora: Para tus nombres de usuario, el código es muy sencillo y no requiere de nada más que:

a[href^="/u"] span:where([style*="#585e3a"], [style*="#585E3A"]) { background: linear-gradient(to right, currentColor, #5e3a48); background-clip:text; -webkit-background-clip:text; -moz-background-clip:text; } a[href^="/u"] span:where([style*="#585e3a"], [style*="#585E3A"]) strong { color:transparent; }

Tendrás, claro, que poner un bloque de estos por cada grupo que tengas.

Ahora, para perfiles, mi recomendación es usar mi código de JS básico para personalización de post (incluida la variante para perfiles sencillos), que nos permitirá usar el mismo formateo, ya que asignará la variable --group a .post/.perfilsencillo con el color del usuario, y así podremos darle una variable secundaria. Por cada grupo, añadiremos:

.post:where([style*="#585e3a"], [style*="#585E3A"]), .perfilsencillo:where([style*="#585e3a"], [style*="#585E3A"]) { --group-sec:#5e3a48; }

Claro, si tu envoltorio de perfil sencillo tiene otra clase, cambiarás eso en el código. También puedes tener las variables secundarias guardadas en tu :root, para una organización más sencilla del código.

A tener en cuenta que tendrás que editar el código manualmente si en algún momento cambias aunque sea ligeramente el color, ya que el código hexadecimal del mismo es el que estamos usando para agregar el segundo color, por lo que recomiendo tener la sección de colores secundarios en una zona de tu CSS bien señalizada y separada con comentarios para que sea sencillo de localizar y editar.

¡Espero que te sirva!

[necromancercoding]

¡Feliz año, Necro! Vengo con una consultilla: ¿es posible incluír en tablilla o en el previsualizador de un post el número de palabras escritas? Esto pensado para, por ejemplo, tramas en las que los posts tengan que tener como máximo un número x de palabras. ¡Gracias!

¡Hola anon! Supongamos que tus tablillas de rol tienen este HTML:

<div class="tablilla-texto trama-texto">Texto aquí.</div>

La mejor opción para que esto funcione solo en las tramas es que des un código concreto para su uso en las tramas, por eso la clase de .trama-texto. Esta clase solo la incluirás en los posts de tramas (puede ser un div con esa class sin nada de CSS, si no quieres tablillas en las tramas). Ahora vas a poner este JS en Todas las páginas.

$(function(){ if (_userdata.user_level === 1) { $('.post:not(#preview) .trama-texto').each(function() { var words = $(this).text().split(' '); $(this).after('<div class="tablillas-palabras">Este post tiene <b>'+words.length+'</b> palabras</div>'); }); } $('#preview .trama-texto').each(function() { var words = $(this).text().split(' '); $(this).after('<div class="tablillas-palabras">Este post tiene <b>'+words.length+'</b> palabras</div>'); }); });

Básicamente, lo que hace este JS es que:

Si eres admin, verás el conteo debajo de todos los posts (para facilitar la moderación). Los users no verán este conteo en los posts.

Si eres un user posteando/editando su propio tema, podrás darle a previsualizar y el conteo saldrá debajo de tu post.

¡Espero que te sirva! Saludos 💕

[necromancercoding]

Hola necro.

Debo decir que soy un gran seguidor de tu trabajo, lo encuentro impecable y te juro que uso siempre tus tablillas para cada tema que tengo en algún foro. <3 Sin embargo, hoy vengo con una cosita, una pregunta.

¿Es muy difícil hacer firmas con movimiento? Por ejemplo, en el foro que estoy, hay firmas muy monas que uno mueve el puntero y cambia un poco (mayormente aparecen frases escritas), pero yo lo intento y nunca me sale, porque más parece un video todo mal cortado. :(((((((

¡Hola Leo! En mi opinión no es difícil, pero depende del efecto que estés buscando. He hecho un par de efectos básicos en este codepen que puedes usar como base; pero los creadores de firmas hacen cosas muy chulas y honestamente el límite está en la imaginación 💕

[necromancercoding]

Hola, Necro. Espero que estés muy bien <3. Quería preguntarte, ¿sabes si hay forma de ordenar los dados por orden alfabético? Creo que se ordenan por número de caras, pero no sé si habrá forma de definir otro tipo de orden, o personalizarlo. Gracias :D

¡Hola anon! Disculpas por tardar en contestar, quería consultar con un amigo que se lleva mejor con los forms que yo antes de compartir nada ya que no quería dar un código que pudiera joderles los dados.

Pero tras pruebas en diferentes foros, el código en cuestión tira bien (de dar con algún bug que no hayamos encontrado, dame un shout). Les dejo el código en pastebin para asegurarme de que no se rompa.

Debería: ordenar los dados alfabéticamente por el nombre de los mismos (de normal, se ordenan por orden de creación en el select de los posts, por caras solo se ordenan en el PA) y debería dejar seleccionado el valor empty ("-") al cargar la página. También debería hacer exactamente lo mismo al crear nuevos selects con el botón + de añadir más dados.

Mi recomendación es ponerlo entre balizas <script> en el template de Escribir un Mensaje & Mensajes Privados -> posting_body, pero si les da mucho palo, se puede meter en un JS de Todas las páginas sin problemas y no debería molestar.

¡Saludos!

[necromancercoding]

¡Hola, Necro! Deseando te encuentres muy bien, vengo por una duda que me ha surgido. Sabes si hay alguna forma de que los colores de los grupos del foro varíen en el modo nocturno? No sé si sea posible, pero en general tu todo lo puedes (? Saludos!

¡Hola anon! Estoy bien, muerto de calor, pero bien. Espero que tú estés bien 💞

Respecto a tu pregunta, es complicado. Requiere de un poquito de ingenio... no, en realidad no, requiere únicamente de CSS, y un CSS además muy fácil.

Primero que nada, nos interesará cambiar los colores en los usuarios en sí. Vamos a localizarlos usando el selector de atributo, y vamos a cambiarle el color al strong de dentro. Para asegurarnos de que lo localiza bien, lo seleccionaremos dos veces: uno con las letras del código hexadecimal en mayus y otra en minus. Usamos :where() porque es más sencillo que repetir la misma línea dos veces.

.light-mode span:where([style="color:#6a919e"], [style="color:#6A919E"]) strong { color: #2d5461; }

Esto tendría que hacerse por cada grupo que quieras modificar. Esta segunda parte del código funciona asumiendo que usas uno de mis códigos (u otro similar) para asignar colores de grupo en un style en posts, perfiles sencillos, miembros...

Como en estos casos se usan variables, simplemente vamos a modificar la variable. Vamos a usar un poco de CSS Nesting para poder seleccionar a dicho div y a todos sus descendientes correctamente:

.light div:where([style*="--group:#6a919e"], [style*="--group:#6A919E"]) { &, &::before, &::after, & *, & *::before, & *::after { --group:#2d5461; --group-75:#2d5461bf; --group-50:#2d546180; --group-25:#2d546140; } }

¡Y listo! Recomiendo ponerlo en algún sitio donde no te vaya a estorbar mucho (como el footer o el header) ya que solo deberías tener que modificarlo si cambias un color de grupo. ¡Saludos!

PD: Si usas otro código que no sea el mío o uno similar al mío para asignar colores a los posts, esta técnica no te funcionará. Pero la única otra técnica que he visto es dándole una clase de grupo, y puedes usar eso debajo de .light-mode para poder modificar las variables igual que en el ejemplo.

[necromancercoding]

Hola Necro! No sé si mis ask no llegó D: Pero pregunté como podía poner el avatar en los últimos temas del tablón y además para que queden en cajitas. Gracias! <3

¡Hola anon! Creo que tu pregunta no llegó, no.

Explico como poner cualquier módulo en el tablón aquí, y veamos tus otras dos preguntas:

Para que queden en cajitas, tendrás sí o sí que editar tu HTML. El template en cuestión es mod_recent_topics, en la sección de Portal. La mayoría de nosotros usamos la versión clásica (no marquee) pero en ambos casos, el bloque que nos interesa es recent_topic_row, que está tanto en scrolling_row (el marquee) y classical_row (el estático). La manera más sencilla de envolver todo en una caja es abrir un div justo después del BEGIN y cerrarlo justo antes del END de recent_topic_row. Además, esto nos hará falta para traer el avatar correctamente. Continúo bajo cut.

Además, tendrás que ponerle al link de título (donde se encuentre una variable que termina con .U_TITLE) al que tenemos que ponerle una clase. También necesitaremos rodear el bloque entero de switch_poster con un span y el de switch_poster_guest con otro span (para el ejemplo, ambos son .tbtname). Mi ejemplo de HTML super simple sería:

<!-- BEGIN classical_row --> <!-- BEGIN recent_topic_row --> <div class="tbtopic"> <div class="tbtavatar"></div> <a href="{classical_row.recent_topic_row.U_TITLE}" class="tbtlink">{classical_row.recent_topic_row.L_TITLE}</a> <div class="tbtinfo"> <!-- BEGIN switch_poster --> <span class="tbtname"> <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a> </span> <!-- END switch_poster --> <!-- BEGIN switch_poster_guest --> <span class="tbtname"> {classical_row.recent_topic_row.switch_poster_guest.S_POSTER} </span> <!-- END switch_poster_guest --> <span class="tbtime">{classical_row.recent_topic_row.S_POSTTIME}</span> </div> </div> <!-- END recent_topic_row --> <!-- END classical_row -->

Además, necesitamos dos clases más, en viewtopic_body. Una es donde se encuentre el avatar (en el ejemplo, .ppavatar), otra donde se encuentre el nombre (en el ejemplo, .ppname) y otra la que rodee a cada uno de los posts (en el ejemplo, .post).

Ahora, el JS, marcado en Todas las Páginas:

$(function(){ /*EDITABLE*/ var tema = '.tbtopic'; var link = '.tbtlink'; var name = '.tbtname'; var icon = '.tbtavatar'; var avatar = '.ppavatar'; var nombre = '.ppname'; var post = '.post'; var avatarPred = 'http://via.placeholder.com/250x400'; /*NO EDITABLE*/ $(tema).each(function(){ var url = $(this).find(link).attr('href'); var target = $(this).find(icon); var userName = $(this).find(name).text(); $.get(url, function(data){ var avaPost = $(data).find(nombre+':contains('+userName+')').parents(post).find(avatar).find('img'); if (avaPost <= 0) { $(target).append('<img src="'+avatarPred+'">'); } else { $(target).append(avaPost); } }); }); });

Espero que te sirva, ¡saludos!