#nctutorial: personalización

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

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]

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, he visto que en forumactif usan formularios para postear las fichas. He intentado seguir un par de tutoriales (entre ellos el del superformulario), pero al poner los códigos de tablilla envolviendo los valores que devuelve el formulario me devuelve un error. ¿Sabes por qué sucede? ¿Hay alguna manera de que los valores del formulario al generar tema nuevo estén envueltos en divs?

¡Hola anon! Yo personalmente uso este para mis publicaciones de fichas. Importante que modifiques lo siguiente:

var id_foro: El id del foro donde se publicará el post.

Ahora: Cada input/select/textarea que crees, es importante que tenga un name concreto, porque es lo que usarás para localizar su valor en tu HTML. Por ejemplo:

<select name="grupo" id="grupo" required="required"> <option>Death eaters</option> <option>Citizens</option> <option>Order of The Phoenix</option> </select>

O en versión input/textarea:

<textarea id="historia" name="historia" rows="30" cols="50" required="required"></textarea>

¿Cómo usamos esto? Es más sencillo de lo que parece. Supongamos que tenemos solo estos dos campos (grupo e historia) y vamos a ponerlo en este HTML:

<div class="ficha"><span class="grupo"></span><div class="historia"></div></div>

La variable txt_message es la que contendrá nuestro html generado:

var txt_message = 'aquí va tu html y tus valores';

Y cada valor del formulario se usa siguiendo el siguiente nombramiento: form.nombrecampo.value. Sabiendo esto, rellenamos nuestro txt_message:

var txt_message = '<div class="ficha"><span class="grupo">'+form.grupo.value+'</span><div class="historia">'+form.historia.value+'</div></div>';

Es muy importante que pongas las variables siguiendo la nomenclatura correcta + insertándolas como deberían (fíjate que se cierran las comillas simples y van rodeadas de pluses, para que el código entienda que son variables y no texto).

Y listo. En mi opinión esta versión es mil veces más fácil de editar que el Superformulario y en mi opinión da mejores resultados, pues todo es editable mucho más fácilmente; desde el propio formulario hasta el output del mismo.

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

¡Hola! Quería preguntar cómo es posible hacer para cambiar solo el primer post de un tema en concreto. Sé que habría que poner en el post un estilo, pero no sé el código exacto para que solo afecte al primero de cada tema. Lo necesito para quitar la parte del avatar cuando alguien suba un expediente, pero que a los siguientes post que se hagan dentro del tema del expediente no le afecte. Gracias y espero haberme explicado ^^

¡Hola anon! Lo mejor para algo así es tener instalado en el foro el código de esconder perfiles, pues funciona con una clase que puedes ponerle al modelo de ficha y hacer mucho más sencillo el proceso para tus users.

HTML: Sólo tienes que poner la clase 'hidethisprofile' en un div dentro del post (en este caso, recomendaría que fuese directamente tu div de ficha).

JS: Lo siguiente (recuerda revisar comillas), marcado para Temas.

$(function(){ $('.hidethisprofile').each(function(){ $(this).parents('.post').find('.postprofile').hide(); }); });

Modifica sólo dos cosas de ser necesario:

.post: El envoltorio de cada uno de tus posts por separado.

.postprofile: El envoltorio del miniperfil de post.

¡Y listo!

[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! Primero de nada: ¡felices fiestas!

Quería preguntarte... ¿Sabes dónde se editan los iconos de mensajes privados? O sea, nuevo mensaje, mensaje leído,... Los que salen al lado de cada título de mp, vaya. Y también (que imagino que sí), ¿se pueden editar por iconos de font-awesome?

¡Felices fiestas, anon!

Esos iconos están en privmsgs_body, en la sección "Escribir un mensaje & Mensajes privados" de los templates. La variable en cuestión es {listrow.PRIVMSG_FOLDER_IMG}, dentro del bloque listrow.

Puedes usar la misma técnica que describí para los temas aquí (en referencia a este otro ask), pues comparten imágenes.

[necromancercoding]

¡Hola! Sé que has explicado con anterioridad cómo hacer que el link de los temas se ponga automáticamente en el perfil sencillo (la crono integrada, vamos), pero no soy capaz de encontrarlo. ¿Podrías ayudarme, por favor? ¡Felices fiestas!

Hola anon, ¡felices fiestas!

He estado un rato buscando el código que buscas y creo que no he llegado a dar un código así. Sí que comenté en su momento el código de cronología del user conectado, pero no llegué a darlo porque por esas fechas ciertas personalidades anónimas se dedicaron a tirarme mierda durante semanas, lo que canceló y pospuso muchos planes, sadly, entre ellos ese código.

Pero no necesitas nada rocambolesco para poner una cronología en un perfil sencillo, sólo un campo de perfil de tipo zona de texto. Dale a tus usuarios un código BBCode para cada tema, por ejemplo:

[left][url=LINK]Título de tema[/url][u][b]Con quién[/b] / [b]Cuándo[/b] / [b]Dónde[/b][/u][/left]

Y luego diséñalo usando la clase del campo del perfil (JS Básico de personalización de posts, sirve también para perfiles sencillos, link abajo del todo) con los elementos HTML generados por el BBCode 😉

[necromancercoding]

¡Hola Necro! Vengo a implorar algo de ayuda. Estoy usando tu tuto "asignación de colores de grupo en post" y me preguntaba, ¡es posible usarlo para dar el color del grupo a otras cosas fuera de los posts? Por ejemplo, en el tablón quiero poner el anuncio de bienvenida y me gustaría que el nick del user saliera según su color. Lo he intentado, pero no encuentro la manera.

¡Hola anon! Sé que he dado el código antes pero on God la búsqueda de Tumblr es horrenda así que lo vuelvo a publicar.

MÓDULOS: Incluye el módulo "Conectarse" en algunos de tus widgets visibles si no lo tienes ya en uso.

HTML: Edita el template mod_login y añade (si estás usando ese módulo para algo más) o sustituye todo el contenido por (si solo lo estás usando para esto) el siguiente código:

<div class="modname" style="display:none;">{USERNAME}</div>

JS: Añade el siguiente código en 'Todas las páginas':

$(function(){ $('.modname:empty').html('<span style="color:#888888"><strong>Anonymous</strong></span>'); $('.modname span').each(function(){ var bodyColor = $(this).attr('style').split('#')[1].split(';')[0].toLowerCase(); $(this).parents('body').prepend('<style>:root { --groupbody:#'+bodyColor+'; }</style>'); }); });

CSS: En los lugares donde quieras usar el color de grupo del usuario conectado, usa var(--groupbody). Recuerda que todos tus usuarios deben tener color, por lo que ten un grupo automático que dé color a los usuarios con 0 mensajes en adelante.

¡Saludos!

[necromancercoding]

Buenas, Necro. Para hacer que la info del avatar se muestre con pestañas, necesito añadir algún JS? ¿Editar algo en los templates? ¿Vender mi alma? :(((

¡Hola anon! Pensé en hacer un tutorial completo pero creo que es más sencillo hacer un code base y explicártelo. Haz click aquí para ver el codepen.

Primero que nada: necesitarás el JS que aporté aquí, concretamente, su alternativa muevecampos (link al final del tutorial). Para las tabs, tu único JS añadido será:

$('.pptabs span').click(function(){ var datatab = $(this).attr('data-tab'); $(this).addClass('active'); $(this).siblings().removeClass('active'); $(this).parents(post).find('div[data-tab="'+datatab+'"]').fadeIn(); $(this).parents(post).find('div[data-tab="'+datatab+'"]').siblings().fadeOut(); });

Ponlo justo antes del último cierre, como está en el codepen. Ahora bien, su uso es muy sencillo. El atributo data-tab es el que te permitirá cambiar tus pestañas sin necesidad de modificar el JS:

Cada pestaña y caja deben tener el mismo data-tab.

Si quieres mover campos a una pestaña o elemento dentro de una pestaña, usa el muevecampos: pon un atributo llamado 'data-field' en el elemento donde quieras pegar el campo, y pon las clases de los fields que quieras pegar ahí, separadas con espacios (puedes ver ejemplos en la pestaña de batalla del codepen).

El único CSS necesario es el señalado al principio del CSS del codepen. El resto puedes editarlo como quieras.

¡Saludos!

[necromancercoding]

En este mini-tutorial, os dejaré un código que compila útiles para posts de rol de una manera sencilla de aplicar incluso si no sabes mucho JS.

Link al codepen, ¡instrucciones bajo el cut!

Primero que nada, listaré qué códigos se incluyen en esta compilación:

Clase automática para campos de perfil.

Edad calculada de manera automática con el campo de fecha de nacimiento, usando el mes y año de tu foro, no el real.

Color de grupo automático (con posibilidad de añadir variables de opacidad).

Borrado de posts de ‘Contenido patrocinado’.

Reacomodación de avatar retirando su title y su link de envoltorio.

Reemplazo de los iconos de flechitas de FA (imágenes) por iconos de Font Awesome.

Clase personalizada para la señalización de ‘Recuerdo del primer mensaje’ para que se pueda estilar.

Como verás si has abierto el codepen, verás que el JS es un poco larguito. Pero no te apures, que vas a tener que editar muy poco. Fíjate en la primera parte, señalado con el comentario ‘Editable’:

Cada elemento const es una variable que puedes asignar. Vamos una por una:

post: La clase de tus elementos de post, cada uno de ellos. Por defecto, FA lo llama .post.

body: La clase del padre directo del contenido de tus posts. Por defecto, FA lo asigna como .postbody .content>div.

field: La clase de tus elementos de campos de perfil, cada uno de ellos. Por defecto, FA no tiene un elemento así, por lo que tendrías que ponerle un envoltorio a tus campos de perfil.

avatar: La clase que envuelve tu avatar. Por defecto, FA no tiene un elemento así, por lo que tendrías que ponerle un envoltorio a tu avatar.

label: La clase que envuelve al nombre de tus campos de perfil. Depende de que field esté correctamente asignado o no te servirá de nada.

content: Lo mismo que label, pero para el contenido de tus campos de perfil.

nacimiento: La clase que recibiría el campo donde tienes la fecha de nacimiento. Puedes usar el que viene por defecto con FA, simplemente desactiva el field de Edad que lo acompaña, pues ese campo se generará solo.

month: El mes en el que se encuentra tu foro, del 1 al 12, ponlo sin comillas.

year: El año en el que se encuentra tu foro, ponlo sin comillas.

nombre: La clase que envuelve el nombre de cada user en los posts. Por defecto, FA lo asigna como .postprofile dl dt>strong.

accent: El acento que recibirán los usuarios sin grupo e invitados.

variableName: El nombre de la variable que usarás para acceder a los acentos de grupo en los posts.

opacityChoices: Aquí puedes elegir poner diferentes opacidades como se explica en el comentario para poder tener --group, --group-75, --group-50, --group-25... Simplemente pon la opacidad que quieras y el código la calculará por ti (de nuevo, sólo números terminados en 0 y 5, no se incluye 100 que es --group).

Una vez tienes todas las variables setteadas, no necesitas nada más. Simplemente recuerda cambiar las variables de mes y año de acuerdo al paso del tiempo en tu foro, para que las edades se actualicen correctamente. ¡Y listo!

Si usáis estos códigos, se agradece si incluís el crédito en algún lado con un link a este tutorial, para que así este código pueda llegar a aquellas personas que lo necesiten 💞

UPDATE: Si quieres usar este código con su variante muevecampos, haz click aquí. Si quieres usar este código en perfiles sencillos, haz click aquí.

[necromancercoding]

hola Necro, ¿cómo estás? me gustaría saber si hay alguna manera de cambiar todos los colores de un skin dependiendo del color del grupo

¡Hola anon! Puedes lograr eso con muchísima facilidad usando :has().

Primero que nada, pon un widget de Conexión que esté visible y edita su template (mod_login) con este HTML (si tienes más HTML en este módulo en uso, pégalo al final):

<div class="modname" style="display:none;">{USERNAME}</div>

Ahora, supongamos que tienes tus variables de skin así (es lo más sencillo para algo como lo que buscas hacer). Si no sabes usar variables CSS, revisa este tutorial.

:root, :root *, :root *::before, :root *::after { --body: black; --text: #bbb; /*Etc*/ }

Para cada grupo, harás un selector nuevo. HHHHHH es el color de tu grupo, con las letras (si tiene) en mayúsculas, y hhhhhh es el color de tu grupo, con las letras (si tiene) en minúsculas. Esto es porque FA a veces formatea en mayúsculas y a veces en minúsculas, y así cubres todas las bases.

body:has(.modname span[style*="HHHHHH"], .modname span[style*="hhhhhh"]), body:has(.modname span[style*="HHHHHH"], .modname span[style*="hhhhhh"]) *, body:has(.modname span[style*="HHHHHH"], .modname span[style*="hhhhhh"]) *::before, body:has(.modname span[style*="HHHHHH"], .modname span[style*="hhhhhh"]) *::after { --body:red; --text:black; /*Etc*/ }

Para cambios más tochos quizá te viene mejor usar JS, pero creo que con :has() podrás cubrir la gran mayoría de bases sin dificultad 😉

[necromancercoding]

¡Buenas, Necro! ¿Hay alguna forma de sustituir el botón de "Nuevo mensaje privado" (el que sale al entrar en la mensajería) por un icono? ¡Gracias!

¡Hola anon! Del mismo modo que expliqué aquí pero en el template privmsgs_body y la variable es {listrow.PRIVMSG_FOLDER_IMG} (para mensajes privados), topics_list_box y {topics_list_box.row.TOPIC_FOLDER_IMG} (para listado de temas) y search_results_topics y {searchresults.TOPIC_FOLDER_IMG} (para búsquedas). En el caso de estas imágenes (aka temas) puedes usar:

Temas normales con mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_normal_new

Temas normales sin mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_normal_nonew

Temas cerrados con mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_closed_nonew

Temas cerrados sin mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_closed_nonew

Temas populares con mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_popular_nonew

Temas populares sin mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_popular_nonew

Notas con mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_sticky_nonew

Notas sin mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_sticky_nonew

Anuncios con mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_announce_nonew

Anuncios sin mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_announce_nonew

Anuncios globales con mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_global_nonew

Anuncios globales sin mensajes nuevos: http://via.placeholder.com/1/.png?text=topic_global_nonew

El modo de editar los iconos es el mismo, sólo que con más variantes. Para seleccionar por tipo, usa: .ftopic[data-icon*="_nombre_"] (siendo .ftopic tu tema); para seleccionar por estado, usa: .ftopic[data-icon*="_new"].

¡Saludos!

PD: Por si acaso te refieres al botón de mandar/responder mps y no a los iconos de mps, expliqué cómo modificar imágenes de botones en general aquí, sirve cualquier imagen dentro de un link, simplemente pon el enlace de la imagen en cuestión y listo. Cerebro frito, pero por si acaso, cubro todas las bases.

[necromancercoding]

¡Hola, Necro! ¿Cómo estás? Quería preguntarte... ¿Sabes si es posible tener un FORUM_FOLDER_IMG distinto para cada foro? Entiendo que esta variable después cambia dependiendo de si hay o no mensajes sin leer dentro del foro. Así que... Sería posible customizar ambas para cada foro? Desde ya, ¡gracias!

¡Hola anon! La manera más sencilla es usar la variable de imagen de mensajes nuevos/no nuevos/cerrados como un selector de atributo, más que como una imagen per se.

Primero que nada: para diferenciar entre un subforo u otro usando ids, usa este tutorial de Mr. D.

Ahora, lo que vas a hacer es que vas a poner imágenes placeholder en lugar de imágenes reales:

Foros con mensajes nuevos: http://via.placeholder.com/1/.png?text=frow_new

Foros sin mensajes nuevos: http://via.placeholder.com/1/.png?text=frow_nonew

Foros cerrados: http://via.placeholder.com/1/.png?text=frow_closed

Ahora, en index_box, en tu envoltorio de foros (en el ejemplo se llamarán .frow porque es la clase que yo uso), vas a poner dicha variable como un atributo data.

<div class="frow" data-icon="{catrow.forumrow.FORUM_FOLDER_IMG}"> <!-- Resto de tu contenido --> </div>

Supongamos que tu icono por defecto es:

<div class="fricon fas fa-heart"></div>

Para modificar el diseño del icono dependiendo de su estado, vamos a usar data-icon:

.fricon { color:black; } [data-icon*="_new"] .fricon { color:red; } [data-icon*="_closed"] .fricon { color:gray; }

Para modificar el diseño del icono dependiendo de su subforo, usamos la id del subforo:

#f2 .fricon:before { content:'\f005'; /*código de 'fa-star'*/ }

Obviamente, puedes cambiar cualquier cosa que se te apetezca (posición, tamaño, familia de iconos...), esto es un ejemplo muy básico de los cambios más 'habituales'.

¡Saludos!

PD: Si en lugar de usar fuentes de icono usas imágenes, en lugar de modificar colores o pseudoelementos cambiarías el background-image, que recomiendo tener en variables para que puedas cambiarlas con mayor facilidad 😉

[necromancercoding]

¡Hola Necro! ¿Podrías explicarnos cómo poner iconos (fontawesome, game-icons, etc.) en un campo del perfil? Como en un inventario, por ejemplo, para que aparezca en el perfil simple y los temas ¡Muchas gracias! <3

¡Hola anon! La manera más sencilla es usando mi código JS de formateo de perfiles (aquí) y añadiendo lo siguiente:

Supongamos que tu campo a editar se llama Inventario (importante que sea Zona de Texto). Cada objeto va a ser dispuesto así:

[center][i]fas fa-heart[/i][b]Nombre del objeto[/b][/center]

Y ahora, vamos a hacer una edición facilita para convertir ese contenido de i en su clase:

$(function(){ $('.inventario div[align="center"]>i').each(function(){ $(this).attr('class', $(this).text()).empty(); }); });

Y ya el resto es todo CSS 🥰