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

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

[necromancercoding]

¡Hola Necro! ¿Viste que ya están disponibles los Relative colors? ¡Ahora se puede hacer variaciones de opacidad y degradados de un color sin tener que crear un porrón de variables! Por ejemplo, con background: rgb(from var(--group) r g b / 50%); podrías hacer que un fondo tenga el color de acento de los grupos a opacidad 50% y ese color puede ser hexadecimal.

¡Hola anon! Sí, los relative colors y color-mix son un game changer. Para los que no lo conozcan:

Relative colors: Como explica el anon, permite hacer variaciones a un color en cuestión sin tener que hacerlo manualmente, ya sea declarando otra variable, llevándolo a rgb/hsl, whatever. Puedes manipular colores hexadecimales en HSL sin tener que escribirlos en HSL to begin with.

Color-mix: Permite mezclar dos colores entre sí; también permite modificar el alpha de un color para que sea transparente. En mi opinión es una de las maneras más efectivas de hacer paletas duocolor con variantes entremedias; a mí me ha resultado especialmente útil en foros con uso recurrente de gradientes, grupos con más de un color... Pero tiene mil usos, hasta para modificar ligeramente el color de un texto si en algún lado queda un poco apagado.

Creo que son dos útiles tremendamente eficaces y que se volverán todavía más eficaces con el tiempo. Dejo una mini demostración en codepen para los que todavía no entienden qué hacen estas cositas (para que os hagáis una idea, solo el color red está declarado en la sección Relative Colors y solo los colores red/blue en la sección color-mix).

PD: Tanto color-mix como relative colors se pueden almacenar en variables por lo que no tienes que estar repitiendo la sintaxis cada vez que lo quieras usar. Bastante más útil tener 1000 variables aunque hagas edits varios de la misma en 50 más que hacer más largo tu CSS con usos puntuales de color-mix/relative colors que luego vas a repetir igualmente 😉

[necromancercoding]

Hola Necro. Estoy haciendo una skin de foro y me gustaría cambiar el texto que aparece en el botón de nuevo tema y foros cerrados por un texto personalizado. ¿Sabes de algún tuto que haga esto?

¡Hola anon! Puedes cambiar ese texto directamente en tu HTML o con CSS:

viewforum_body: línea 26 a 30 para nuevo tema.

viewtopic_body: línea 69 a 71 para nuevo tema, 73 a 75 respuesta.

privmsg_body: nuevo tema viene con variable única y se tiene que cambiar con JS/CSS (línea 15).

privmsg_read_body: responder viene con variable única y se tiene que cambiar con JS/CSS (línea 13 a 20).

Personalmente, cambio los de viewforum_body y viewtopic_body directamente en el HTML, y para los de mensajes privados, los cambio con JS:

$(function(){ $('img.i_msg_newpost').replaceWith('NUEVO MP'); $('a[href*="/privmsg?mode=reply"] img[src*="i_reply.gif"]').replaceWith('RESPONDER'); });

¡Saludos!

[necromancercoding]

hola Necro, como puedo hacer para separar el user de la fecha de lo que se genera en el catrow. forumrow. USER_LAST_POST. para ponerles un icon antes de cada uno. | Soy otro anon. He usado el JS que diste y funciona estupendo. No obstante, en los foros sin mensajes, aparece "undefined" en el lugar de la fecha. Para que no salga nada en ese caso, ¿cómo podría ser? Por cierto, hay una pequeña errata en la línea 17, que los elementos span se cierran con un div. ¡Un saludo!

¡Hola anon! He editado el código y el post. Gracias por el tip del bug, también, la costumbre de cerrar con divs 😉

[necromancercoding]

Hol Necro, que tal? resulta que he visto un codigo que al hacer click en el titulo desplega informacion, se que se puede hacer con una etiqueta nueva y tu ya lo habias explicado, pero mi pregunta no viene a eso si no que al abrir el inspector era un div con un atributo "clicked" y no tenia un js ni nada parecido al lado ¿Sabrias algo? es que me genera curiosidad el saber por que funciona de esa forma.

¡Hola anon! El único bloque HTML que me viene a la mente que hace eso es details. Details es, a efectos prácticos, un spoiler de HTML nativo. Su gramática es muy sencilla.

<details> <summary>Botón, puedes poner lo que quieras aquí, no solo texto.</summary> Todo lo que esté fuera del summary estará escondido por defecto y se mostrará al clickar el botón. </details>

Puedes tener el spoiler abierto por defecto, agregando open a la baliza details:

<details open> <summary>Botón, puedes poner lo que quieras aquí, no solo texto.</summary> Todo lo que esté fuera del summary se mostrará por defecto y se esconderá al clickar el botón. </details>

Además, como el spoiler, es toggleable, por lo que el botón funciona tanto para cerrar como para abrir. Lo único malo de esto es que no puedes cambiar el efecto de apertura (pues lo que esté fuera del summary tiene display:none y pasa al display que tenga por defecto, y la cualidad display no es transicionable), al menos por el momento; hay algunos nuevos cambios que quizá permitan en el futuro cercano animar elementos como details (info para los curiosos aquí).

EDIT: Viéndolo en el link que me has pasado en el otro ask, no se trata de details (está hecho con JS el de tu link, está añadiendo y quitando una clase al clickar), pero por suerte, puedes lograr exactamente el mismo efecto con <details>. Incluso puedes cambiar el diseño de details si está abierto o cerrado, como se ve en tu ejemplo:

details { aquí van las cualidades que afecta a details cuando está en estado normal, es decir, cerrado } details[open] { aquí van las cualidades o cambios en details al estar abierto } details[open] summary { puedo afectar hasta el botón, para que se muestre diferente cuando está abierto }

¡Espero te sirva!

[necromancercoding]

Hola, espero que te encuentres muy bien ♥ ahora mi pregunta es: ¿Sabras como poner informacion adicional en el template "groupcp_info_body"? A que me refiero, logre añadir el Avatar (con mucho esfuerzo y leyendo mil tutoriales) pero ahora si quisiera poner, por ejemplo lo de los puntos, algunas imagenes que existen en el perfil y otros links de contacto, eso no se como podria traspasarlo... en mi mente seria similar a lo del avatar, pero ... no entiendo como

¡Hola anon! Todo eso se hace con llamadas .get(), que imagino que es lo que has usado para traer el avatar. Para esto importa tanto lo que pongas en groucp_info_body como lo que pongas en profile_view_body, ya que necesitas sus clases. Suponiendo que tus campos de perfil en profile_view_body tienen esta estructura:

<!-- BEGIN profile_field --> <div id="field_id{profile_field.ID}" class="psfield"><div class="psflabel">{profile_field.LABEL}</div><div class="psfcontent">{profile_field.CONTENT}</div></div> <!-- END profile_field -->

Tu llamada .get() para coger esos fields se hará o bien por id, o bien por nombre del campo. Personalmente uso la segunda opción porque siempre es la misma, al contrario que la id.

$(function(){ $('.groupmember').each(function(){ /*Cambia aquí .groupmember por la clase de tu envoltorio de cada pj en la página de groupcp_info_body*/ var link = $(this).find('.gmname a').attr('href'); /*Cambia aquí .gmname por la clase de donde se encuentre la variable {member_row.U_VIEWPROFILE} en groupcp_info_body*/ var self = $(this); $.get(link, function(data){ var puntos = $(data).find('.psflabel:contains("Puntos")').parents('.psfield'); $(self).find('.gmpoints').append(puntos); /*Cambia .gmpoints por donde quieras pegar tus puntos*/ }); }); });

Lo importante en la llamada .get() es lo de dentro. Siempre habrá dos cosas que tendrás que localizar:

El valor a copiar, en este caso, la variable puntos. Ahí vas a localizar usando $(data) y luego .find().

El lugar a pegar. Ahí vas a localizar usando $(self) y luego .find().

Todas las cosas que quieras traer se hacen así. Por ejemplo, campos de contacto:

var contact = $(data).find('.pscontact a'); $(self).find('.gmcontact').append(contact); /*Cambia .gmcontact por donde quieras pegar tus links*/

O imágenes:

var icon = $(data).find('.psflabel:contains("Icono")').parents('.psfield').find('.field_uneditable img'); $(self).find('.gmicon').append(icon); /*Cambia .gmicon por donde quieras pegar tu icono*/

Algo importante es que no necesitas múltiples llamadas .get() para el mismo valor. Todos estos otros ejemplos (contacto e icon) irían dentro del .get() inicial, debajo de la localización y append de puntos. Si no, vas a saturar la página con llamadas (y más en este caso, que tienes numerosos users haciendo llamadas a sus perfiles) ¡Saludos!

[necromancercoding]

Hola, Necro <3 tenía una consultita de nuevo, como estaba siguiendo tu tutorial de una skin de cero, llegué a esta parte, en donde colocas esto del script de _userdata(.)username para dar como la bienvenida al usuario, entonces yo quería saber cómo es que puedo hacer que eso también conduzca al link del perfil de la persona en cuestión. ¡Gracias, Necro!

¡Hola anon! Sí, el array _userdata tiene múltiples cosas que te pueden ser útil. Listita time:

activate_toolbar/fix_toolbar/notifications: Si la toolbar está activa su valor será 1, si la toolbar está desactivada será 0. No cambia al esconder la toolbar haciendo click en la flechita; es global, la misma para todo el mundo.

avatar: Genera una etiqueta con la src del avatar del user.

avatar_link: Genera solo el link de src del avatar del user.

session_logged_in: Si el usuario está conectado, genera 1, si es invitado, genera 0.

user_id: Número de ID del usuario (/uX = sólo genera la X).

user_lang: Lenguaje del usuario; es (español), en (inglés), fr (francés) etc.

user_level: Si el usuario es admin, será 1, si el user no tiene poderes de admin, será 0.

user_nb_privmsg: Cantidad de mps que tiene el usuario.

user_points: Cantidad de puntos que tiene el usuario.

user_posts: Cantidad de posts que tiene el usuario.

username: Nombre de usuario.

Puedes usar todas estas variables del mismo modo que indico como user username y avatar en el tutorial. ¡Saludos!