#nctutorial: estructura

[necromancercoding]

Update de nuevos códigos de ayuda en Codepen

¡Hola! Traigo un par de updates de códigos de Codepen. Estos son códigos que no requieren de tutorial (o que su tutorial ya se incluye en dicho pen) por lo que no tendrán su propio post.

Módulos de cambio de tamaño de texto: A petición de anónimo. Tres versiones diferentes (no viene con el diseño de los elementos). Super sencillo de instalar y tremendamente práctico. La elección de tamaño de texto se guarda en las cookies para que el usuario no tenga que estar volviendo a marcar su elección (no se puede ver en codepen pero prometo que funciona).

Colores secundarios para grupos: Aprovechando que los colores relativos ya tienen un support bastante bueno. Usa, como indica el pen, el JS Básico para Personalización de Posts. Super fácil de aplicar y usar.

Espero que les sirvan estos dos codiguitos. ¡Abrazos!

[necromancercoding]

Hola necro! 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]

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

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

[necromancercoding]

¡Hola Necro qué tal? ¿es posible poner icons fonts en lugar de imágenes en los iconos de "nuevo mensajes", "no hay nuevos mensajes", "temas cerrados" y esos? ¡Muchas gracias por todo tu trabajo!

¡Hola anon! Creo haber contestado esto antes, pero no consigo encontrar el post. Así que lo contesto otra vez 😂

Mi modo de hacerlo es mediante imágenes placeholder (como esta). Si te fijas en la parte final del link, tengo puesto 'frow_nonew'. Hago esto con los tres tipos de imágenes de esa zona: frow_nonew, frow_new y frow_closed.

¿Para qué nos sirve esto? Muy sencillo: no vamos a usar esta imagen como imagen si no como selector. En nuestro index_box, vamos a poner en nuestro .frow (o contenedor de cada subforo) lo siguiente:

<div class="frow" data-icon="{catrow.forumrow.FORUM_FOLDER_IMG}">RESTO DEL HTML</div>

Con eso puedes editar cualquier elemento dentro de .frow (y el propio .frow) dependiendo del estado. Cambiarle el color del borde, el fondo, añadirle florecitas flotando por ahí, lo que tú quieras. Pero para el icono, será tan sencillo como localizarlo en tu html y targettear su :before. Un ejemplo:

.frow .fricon em { color:black; } .frow[data-icon*="_new"] .fricon em { color:red; } /* Nuevos mensajes */ .frow[data-icon*="_closed"] .fricon em:before { content:'\f005'; } /* Foro cerrado */

Puedes hacer esto también con tus temas y mensajes privados, busca la variable con nombre TOPIC_FOLDER_IMG y PRIVMSG_FOLDER_IMG respectivamente, en los templates topics_list_box y privmsgs_body.

¡Saludos!

[necromancercoding]

¡Hola, Necro! Tengo una pequeña duda que más que duda, es por saber tu opinión. ¿Recomiendas más Flex o Grid? El primero he logrado captarlo rápido y me resulta súper útil, pero no sé si Grid merece la pena, si me va a suponer mejorar mis diseños o qué utilidad puedo darle. Un besito para ti y gracias por la enorme labor que haces dando soporte a esta comunidad, creo que no se te reconoce lo suficiente.

¡Hola anon! Muchas gracias por tus palabras <3

Flexbox y Grid son intercambiables a veces, pero tienen sus funciones concretas. Depende de qué vas a elaborar y ahí puedes elegir uno u otro. En algunas situaciones, usar flexbox te complica la vida más que usar grid, y en otros casos, grid es innecesario porque puedes lograr lo mismo con flex con menos líneas.

Mi preferencia para usar grid es, precisamente para lo que está hecho, para hacer layouts. ¿Esos codes donde metes position:absolute en todo para que quede todo en un sitio distinto? Para eso está grid. Véase un tablón, o un subforo (con mucha info y/o que cambia de un subforo a otro), unas stats. Ese tipo de cosas son tremendamente más sencillas con grid que con flex, y te supone también una ventaja increíble si quieres adaptar el layout a móvil, porque solo tienes que ir moviendo las cosas dentro del grid.

Ejemplos y más detalles bajo el cut.

Pongamos dos ejemplos: un subforo y un tablón.

Subforo: Nuestro esquema es el siguiente:

FLEXBOX: Podría tener mi HTML así:

<div class="frow"> <div class="fricon"></div> <div class="frinfo"> <a href="" class="forumtitle">Tu primer foro</a> <div class="flrastinfo"><a href="">Tu último tema</a> / por X / hoy a las 20:00 <a href="">></a></div> <div class="frsubs"><a href="">Link</a><a href="">Link</a><a href="">Link</a><a href="">Link</a></div> </div> <div class="frdata"> <span><b>X</b><i>TEMAS</i></span> <span><b>X</b><i>RESPUESTAS</i></span> </div> <div class="frlastava"> <img src="AVATAR"/> </div> </div>

Y solamente con un flex sobre .frow ya tendría casi todo listo. Un flex en .frdata y el resto puede ser acomodado fácilmente. Es adaptable también, si le pongo un flex-grow:1 a .frinfo, para que en los subforos vacíos (que no tendrían .frlastava) puedan ajustarse y no quede un espacio vacío a la derecha.

GRID: Podría tener mi HTML así:

<div class="frow"> <div class="fricon"></div> <a href="" class="forumtitle">Tu primer foro</a> <div class="flrastinfo"><a href="">Tu último tema</a> / por X / hoy a las 20:00 <a href="">></a></div> <div class="frsubs"><a href="">Link</a><a href="">Link</a><a href="">Link</a><a href="">Link</a></div> <div class="frdata"> <span><b>X</b><i>TEMAS</i></span> <span><b>X</b><i>RESPUESTAS</i></span> </div> <div class="frlastava"> <img src="AVATAR"/> </div> </div>

Y tener que hacer varios ajustes para que todo quede centrado, si uso gap tendré problemas a la hora de ajustar los subforos que no tengan .frlastava... En definitiva: se puede hacer, pero es complicarse de más cuando hay una solución más sencilla.

Tablón: Nuestro esquema es el siguiente:

FLEXBOX: Podría tener mi HTML así:

<div class="tablon"> <div class="tbenv"> <div class="tblinks">Links</div> <div class="tbmain"> <div class="tb1"> <div class="tbfecha">Fecha</div> <div class="tbambi">Ambientación</div> </div> <div class="tb2"> <div class="tbtiempo">Tiempo</div> <div class="tbtramas">Tramas</div> <div class="tbstaff">Staff</div> </div> </div> </div> <div class="tblast">Últimos temas</div> </div>

¿Has visto la cantidad de envoltorios que tengo que meter? Es un poco... ridículo. Ahora imagina tener que ajustar todos esos envoltorios. E imagina que en móvil quiero tener los últimos temas al lado de fecha y ambientación pero que tiempo/tramas/staff queden abajo de ese row. Ni de Blas voy a poder hacer eso con este método.

GRID: Podría tener mi HTML así:

<div class="tablon"> <div class="tblinks">Links</div> <div class="tbfecha">Fecha</div> <div class="tbambi">Ambientación</div> <div class="tbtiempo">Tiempo</div> <div class="tbtramas">Tramas</div> <div class="tbstaff">Staff</div> <div class="tblast">Últimos temas</div> </div>

Y ya está. Literally. El resto lo hace grid. Y como ejemplo, voy a dejar cómo haría yo este grid:

.tablon { display:grid; grid-template-columns:1fr .5fr 1fr 1.5fr; grid-template-rows:40px 100px 150px 100px; grid-template-areas: 'links links links last' 'fecha tiempo tramas last' 'ambi tiempo tramas last' 'ambi staff staff last'; }

Luego asignaría los nombres usando grid-area a cada sección y listo. Tengo mi tablón montado y si quiero modificarlo en móvil porque me queda muy estrecho, solo tengo que cambiar .tablon (seguramente tendrías que hacer más ajustes, pero ni de lejos tan grandes como los que tendrías que hacer usando flexbox).

En definitiva: Grid y Flexbox tienen cada uno su momento y su lugar para ser usados. Pueden ser intercambiables en situaciones pero tienen sus puntos fuertes y sus puntos débiles. Grid es más útil de lo que parece y más fácil de lo que pensáis 😉

[necromancercoding]

Hola Necro! Estoy revisando tu tutorial de hacer skins y en la parte II hablas de unas variables tipo "Algunos de ellos son id (el numerito de usuario), avatar, username, user_posts… ", ¿existe alguna lista que podamos consultar de estas variables que funcionen en FA? ¡Gracias!

¡Hola anon! Estos son los valores disponibles en el array de _userdata:

activate_toolbar: 0 para desactivado, 1 para activado.

avatar: Genera un elemento img con los valores loading "lazy", el src de la imagen, alt "avatar", y un style con el max-width y max-height que tengas declarado en tu panel de administración para el tamaño de avatares.

avatar_link: Genera el link de la imagen de avatar.

fix_toolbar: 0 para fijada, 1 para desfijada.

notifications: 0 si no tienes notificaciones, 1 si tienes.

session_logged_in: 0 para desconectado (invitado), 1 para conectado.

tpl_used: Corresponde al tipo de skin que tengas de base, por defecto prosilver.

user_id: Número de ID del usuario.

user_lang: Lenguaje del usuario. Ejemplo: "es".

user_level: 0 para invitado, 1 para usuario/mod/admin. Mismo valor que session_logged_in.

user_nb_privmsg: Si no me equivoco, corresponde a si el usuario tiene permisos para enviar mps.

user_points: Cantidad de puntos del usuario.

user_posts: Cantidad de posts del usuario.

username: Nombre de usuario (sin color, solo texto).

¡Saludos!

[necromancercoding]

Hola Necro, vengo a ti por una duda, estoy haciendo el tablón inferior y al usar esto {LOGGED_IN_USER_LIST} me sale esto: Usuarios registrados: nombre sito, quisiera quitarle la primera parte y dejar solo la lista de los miembros, podrías guiarme por favor.

¡Hola anon! Es super sencillo. Pon esto en un JS para el Índice:

$(function(){ $('.tucajitadelogged').each(function(){ $(this).html($(this).find('a')).append('.'); $(this).find('a:not(:last-of-type)').each(function(){ $(this).after(', '); }); }); });

Tendrás que cambiar .tucajitadelogged por la clase de tu caja. Esto sirve también para la caja de conectados en las últimas XX horas 😉

[necromancercoding]

¡Hola Necro! Es el anon del navbar desplegable. ¡Muchas gracias por tu ayuda! Estaba intentando que en lugar de desplazarse horizontal: los enlaces aparecieran abajo, pero no sé si eso es posible porqué veo que has utilizado un valor para el width y height que no conozco (el rem, ¡es la primera vez que lo leo!) o por el flex-shrink. ¿Podrías ayudarme? ¡Y perdóname mi ignorancia!

¡Hola de nuevo, anon! No te preocupes, estoy para echar una mano. La medida rem es una medida que depende del tamaño de fuente del root (osea, el elemento <html>). Esto nos permite redimensionar elementos que usen rem cuando el usuario hace zoom en la página o cambia sus tamaños de fuente en la configuración del navegador, por ejemplo.

Respecto a la navegación en vertical, es la misma premisa pero cambiando width por height. Aunque en este caso, tendremos que cambiar el width también para que el texto de los links se vea bien (puedes retirar este cambio de width si usas iconos en lugar de texto). Puedes ver el ejemplo aquí para la versión con texto y aquí para la versión con iconos.

[necromancercoding]

Hola Necro. Tengo una pregunta. ¿Hay alguna forma de hacer que el navbar sea un botón? Como que sea un menú que, al presionar sobre el ícono, se despliegue los enlaces del navbar (Inicio, miembros, MPs, editar perfil)

¡Hola anon! Te he hecho un pen con una versión básica de un navbar desplegable. ¡Espero que te sirva!

[necromancercoding]

¡Hola Necro! Llevo unos días intentando poner en la navbar del foro los enlaces para los mensajes del usuario y los temas junto a un icono de su avatar. ¿Sabrías como se hace? ¡Gracias!

¡Hola anon! Necesitas usar un script de inserción, que pondrías en el HTML donde quieras que aparezca el elemento. Para el avatar, usarías la variable _userdata.avatar:

<script>document.write(_userdata.avatar);</script>

Esto genera un elemento <img> con la URL del avatar en el atributo src.

Para los links de usuario, usaremos _userdata.user_id:

<script>document.write('<a href="/st/u'+_userdata.user_id+'" class="fas fa-folder-open" title="Todos los temas"></a><a href="/sta/u'+_userdata.user_id+'" class="fas fa-file-alt" title="Temas"></a><a href="/spa/u'+_userdata.user_id+'" class="fas fa-comments" title="Mensajes"></a>');</script>

¡Saludos!

[necromancercoding]

¡Hola, Necro! Tengo una dudita. ¿Cómo podemos editar la fecha de los últimos temas que aparece en los foros de la categoría? Me refiero a la parte donde aparece el nombre del último tema, el autor, y la fecha en el índice. Quiero editar únicamente la fecha, pero no consigo encontrar la etiqueta para hacerlo. ¡Gracias!

¡Hola anon! No hay varias variables (valga la redundancia) en index_box (como sí las hay en topics_list_box), pero puedes suplirlas de la siguiente manera:

HTML:

En tu index_box, envuelve la variable {catrow.forumrow.USER_LAST_POST} en un div llamado .frlastdata (si no usas este nombre, reemplaza frlastdata en el JS donde corresponda). Esta clase no es la final que usaremos para el CSS.

CSS:

Opcional, pero puedes esconder .frlastdata con un display:none; si quieres que no se vea nada hasta que el JS se ejecute con la nueva clase.

JS:

En un JS para subforos (o en su defecto, para Todas las páginas), vas a incluir lo siguiente:

$(function(){ $('.frlastdata').each(function(){ var string = $(this).html(); var time = string.split('<br>')[0]; if ($(this).find('a[href^="/u"]').length) { var userlink = $(this).find('a[href^="/u"]'); } else { var userlink = $(this).find('span.color-groups'); } var userlinkHTML = 'Invitado'; if (userlink.length !== 0) { var userlinkHTML = userlink.prop('outerHTML'); } var lastLink = $(this).find('a.last-post-icon, a[href*="view=newest"]'); var lastLinkHTML = lastLink.prop('outerHTML'); /*EDITABLE*/ $(this).replaceWith('<div class="frlastinfo"><div class="frlastuser">'+userlinkHTML+'</div><div class="frlastdate">'+time+'</div><div class="frlastlink">'+lastLinkHTML+'</div></div>'); /*EDITABLE*/ }); });

La línea que está entre los comentarios es lo único que deberías editar; concretamente, la parte de dentro de .replaceWith(). Esto va a reemplazar .frlastdata con el nuevo div (.frlastinfo), que tiene tres divs: uno para el user, otro para la fecha/hora, y otro para el link que lleva al último post. Puedes poner esto como quieras que se genere, poniendo las variables necesarias como están puestas en el ejemplo.

¡Saludos!

[necromancercoding]

Necro! Vengo suplicando ayuda de tus conocimientos. ¿Tienes en tu baúl de tutoriales alguno que explique como colocarle imágenes a los subforos? de preferencia para tontos -jaja- Lo máximo que logré fue que mi imagen quede atrapada en la descripción, o se sobreponga a todo y no permita acceder a nada y ya me desesperé ¡muchas gracias!

¡Hola anon! No tengo realmente nada así, pero poner una imagen en un subforo es sencillo con FA; si la pones en la parte donde dice "dirección de imagen", debería salirte como un elemento más que saldrá en la misma caja que tu descripción (pues comparten variable). Te dejo un ejemplo de cómo posicionar tu imagen fácilmente con flex.