Estrenando una nueva sección de mi blog, School of Necromancy, llega el primer código para mejora de skins: Truesight.
Truesight es un código de tooltips que permite poner más que un poco de texto. Funciona perfectamente para ser usado sólo para title="", pero tiene unos cuantos extras que puede ser muy útil para inventarios, zoom de imágenes, y mucho más.
Puedes encontrar la guía de uso aquí.
Avisaré por aquí de pequeñas updates en los códigos de School of Necromancy usando la tag #ncschool. También se incluirá en la página de guía de uso la versión en la que está el código actualmente, para que podáis revisar si es la misma versión que tenéis.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality
Anya is LIVE right now
FREE
Free to watch • No registration required • HD streaming
Foro Activo ha implementado la nueva página de /discover, que sirve para ver la actividad de un foro. Esta tiene un nuevo template editable (General -> Discover) que es super fácil de editar y de customizar. Abajo del cut encontrarás una lista completa de todas las variables y bloques del template.
{TITLE_ACTIVITY_FEED}: Genera el título de la página ("Toda la actividad").
Bloque no_activity: Se genera cuando el foro no tiene actividad reciente.
{no_activity.INFO}: Genera el texto de sin actividad reciente ("No hay actividad de los miembros en el foro para mostrar en este momento.").
Bloque has_activity: Se genera cuando el foro tiene actividad reciente.
{has_activity.L_ACTIVITY_END}: Genera el mensaje de llegar al final de la actividad ("Has llegado a la última actividad guardada por el momento.").
{JS_COLLAPSE}: Genera el script para los grupos colapsables (si muchos usuarios han recibido un award el mismo día, por ejemplo).
[bloque has_activity >] Bloque activity_date_group: Genera los diferentes grupos de actividad (se divide en días).
{has_activity.activity_date_group.FORMATTED_DATE}: Nombre del grupo de actividad ("hoy", "ayer", etc).
[bloque has_activity > bloque activity_date_group > ] Bloque activity_feed_item: Genera cada línea de actividad.
{has_activity.activity_date_group.activity_feed_item.TYPE}: Genera el número del tipo de actividad (dejo abajo una lista de todos los números que he encontrado).
{has_activity.activity_date_group.activity_feed_item.EXTRA_CLASS}: Genera la clase .same-user-next que se añade si hay dos actividades seguidas del mismo usuario.
{has_activity.activity_date_group.activity_feed_item.U_AVATAR}: Genera la url del avatar del usuario que ha realizado la acción.
{has_activity.activity_date_group.activity_feed_item.DATETIME}: Genera la fecha completa ("HH:MM DD/MM/AAAA").
{has_activity.activity_date_group.activity_feed_item.TIME_FORMATTED}: Genera la fecha formateada ("hace X horas", "HH:MM").
{has_activity.activity_date_group.activity_feed_item.ACTIVITY}: Genera la descripción de la actividad.
Números de los tipos de actividad (tal cual los listan en Forumactif):
0: registro.
1: nuevo tema.
2: respondió a un tema.
3: obtuvo una recompensa/premio.
4: publicación de una entrada de blog.
5: generación de la hoja de personaje.
6: publicación de un anuncio (compra/venta).
7: publicación de un evento (calendario).
8: cambio de nombre.
9: nueva encuesta.
Cualquier duda que tengan, pueden pasarse por el ask, y si este tutorial les sirvió, se agradecen reblogs para que llegue a más gente. ¡Saludos! 💚
hola necro o/ vengo con una dudilla, es posible poner en el tablón los temas de un subforo y que salga el avatar del autor? Es que estaba pensando en que sería genial una sección de busqueda automática, se que la llegue a ver en un foro pero no encontré tutorial.
¡Hola, anon! Puedes usar el módulo de novedades. Actívalo y configúralo (le das a la ruedita) para que seleccionar tu subforo de búsquedas. Ahora, edita tu Plantillas -> Portal -> mod_news por el contenido de este pastebin. ¡Listo!
El HTML otorgado es una versión muyyyy básica de ejemplo, que puedes editar tú a tu gusto. Importante que cambies en el script:
-> .ppname: Por donde aparezcan tus nombres de usuario en viewtopic_body.
-> .ppavatar: Por donde aparezcan tus avatares en viewtopic_body.
¡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!
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 💖
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality
Anya is LIVE right now
FREE
Free to watch • No registration required • HD streaming
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 💕
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} : "><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!
¡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:
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:
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.
