Hello everyone!
Following the interest shown in the design of my /ayuda (Help) page, I have decided to share the complete code with the community. I aimed for a clean, functional design that integrates perfectly with the forum's aesthetics, regardless of the device.
👁️ Preview
Demo link: https://triforce.totalh.net/p/ayuda
🌟 Design Features
- Fully Responsive: Fluid adaptation for mobile, tablet, and desktop.
- Native Theme Support: The design automatically detects the user's forum theme setting (Light/Dark mode) and integrates seamlessly.
- Minimalist Design: Focused on comfortable reading and simple navigation for the end user.
💻 Implementation Code
This design is fully integrated using the fof/pages or Advanced Pages extension. Simply create a new page and paste the complete code into the editor:
code block
CSS
/* =====================================
TRIFORCE - CENTRO DE AYUDA
===================================== */
/* 1. RESET Y CONTENEDOR */
.tf-help-wrapper {
max-width: 850px;
margin: 0 auto;
padding: 25px 15px;
text-align: left !important;
color: var(--body-color);
font-family: 'Poppins', sans-serif;
--tf-accent: var(--primary-color);
--tf-card: var(--body-bg);
--tf-border: var(--control-bg);
--tf-radius: 4px;
/* Paleta */
--tf-fire: #b83b14; --tf-gold: #ffb000; --tf-gem: #00d4ff;
--tf-bronze: #cd7f32; --tf-emerald: #2ecc71; --tf-sapphire: #3498db; --tf-obsidian: #7f8c8d;
}
.tf-help-wrapper *, .tf-help-wrapper *::before, .tf-help-wrapper *::after { box-sizing: border-box; }
/* 2. CABECERAS Y TÍTULOS */
.tf-help-header { text-align: center; margin-bottom: 35px; }
.tf-main-title { margin: 0 0 10px 0 !important; font-size: 42px !important; font-weight: 700 !important; color: var(--heading-color) !important; letter-spacing: -1px; text-transform: uppercase; }
.tf-tagline { font-size: 16px; color: var(--muted-color) !important; margin: 0; line-height: 1.6; }
/* 3. MODO LECTURA */
.tf-reading-mode { display: flex; align-items: center; justify-content: space-between; gap: 15px; background: var(--control-bg); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 12px 20px; margin-bottom: 30px; }
.tf-reading-text { font-size: 13px; color: var(--muted-color); margin: 0; }
.tf-reading-badge { background: var(--tf-accent); color: var(--body-bg); font-size: 10px; font-weight: 700; padding: 6px 12px; border-radius: var(--tf-radius); text-transform: uppercase; white-space: nowrap; }
/* 4. TARJETAS */
.tf-card { background: var(--tf-card) !important; border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 30px 35px; }
.tf-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; border-bottom: 1px solid var(--tf-border); padding-bottom: 15px; }
.tf-card-header h2 { font-size: 22px !important; color: var(--heading-color) !important; margin: 0 !important; font-weight: 700 !important; text-transform: uppercase; }
/* 5. RESUMEN, TEXTO Y REGLAS */
.tf-nutshell { border: 1px dashed var(--tf-accent); border-radius: var(--tf-radius); padding: 16px 20px; margin-bottom: 25px; position: relative; }
.tf-nutshell-tag { position: absolute; top: -10px; left: 20px; background: var(--tf-accent); color: var(--body-bg); font-size: 9px; font-weight: 800; padding: 2px 10px; border-radius: 4px; letter-spacing: 1px; }
.tf-nutshell p { font-size: 13.5px !important; color: var(--muted-color) !important; line-height: 1.5; margin: 0 !important; font-style: italic; }
.tf-text { font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
/* =====================================
REGLAS (ESTILO SALÓN DE LA FAMA)
===================================== */
.tf-rule{
display:flex;
align-items:flex-start;
gap:16px;
padding:18px;
margin-bottom:14px;
background:var(--body-bg);
border:1px solid var(--tf-border);
border-radius:4px;
transition:border-color .2s ease,
background .2s ease;
}
.tf-icon-box{
width:44px;
height:44px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:var(--control-bg);
border:1px solid var(--tf-border);
border-radius:4px;
}
.tf-icon-box i{
font-size:18px;
line-height:1;
}
.tf-title{
margin-bottom:5px;
font-size:15px;
font-weight:700;
letter-spacing:.2px;
color:var(--heading-color);
}
.tf-desc{
color:var(--muted-color);
font-size:14px;
line-height:1.6;
}
/* 6. AVISOS E ICONOS */
.tf-notice { border: 1px solid var(--tf-accent); border-radius: var(--tf-radius); padding: 14px; margin-top: 15px; color: var(--muted-color); font-size: 13px; }
.tf-notice strong { color: var(--heading-color); }
/* =====================================
PALETA ICONOS
===================================== */
.tf-fuego{
color:#b83b14;
}
.tf-oro{
color:#ffb000;
}
.tf-joya{
color:#00d4ff;
}
.tf-bronce{
color:#cd7f32;
}
.tf-esmeralda{
color:#2ecc71;
}
.tf-zafiro{
color:#3498db;
}
.tf-obsidiana{
color:#7f8c8d;
}
/* 7. FOOTER Y RESPONSIVE */
.tf-local-footer { text-align: center; margin-top: 40px; font-size: 13px; color: var(--muted-color); font-weight: 500; }
.tf-footer-icon { color: var(--tf-accent); margin-right: 4px; font-size: 11px; }
@media(max-width: 767px) {
.tf-main-title { font-size: 24px !important; line-height: 1.2; letter-spacing: -0.5px; }
.tf-card, .tf-rule { padding: 18px; }
.tf-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
.tf-card-header h2 { font-size: 19px !important; }
.tf-reading-mode { flex-direction: column; align-items: center; text-align: center; }
}
.AdvancedPages-hero {
padding: 10px 0 !important;
}
.AdvancedPages-hero .Hero-title {
font-size: 22px !important;
}
HTML
<div class="tf-help-wrapper">
<header class="tf-help-header">
<h1 class="tf-main-title">
Centro de Ayuda
</h1>
<p class="tf-tagline">
Documentación, navegación y uso de la plataforma Triforce
</p>
</header>
<div class="tf-reading-mode">
<p class="tf-reading-text">
Encuentra respuestas rápidas sobre el funcionamiento de Triforce. Consulta el apartado <strong>RESUMEN</strong> de cada sección para localizar fácilmente la información más importante.
</p>
<span class="tf-reading-badge">
<i class="fas fa-bolt"></i>
Lectura Veloz
</span>
</div>
<main class="tf-help-content">
<!-- =====================================
1. MENÚS E INTERFAZ DEL SISTEMA
===================================== -->
<div class="tf-help-segment">
<section class="tf-card">
<div class="tf-card-header">
<h2>
1. Menús e Interfaz del Sistema
</h2>
</div>
<div class="tf-nutshell">
<div class="tf-nutshell-tag">
RESUMEN
</div>
<p>
La navegación de Triforce está organizada para encontrar rápidamente discusiones, etiquetas, perfiles y contenido de la comunidad.
</p>
</div>
<p class="tf-text">
La interfaz de Triforce está diseñada sobre Flarum para ofrecer una experiencia rápida y sencilla. Los principales apartados permiten explorar conversaciones, localizar información y personalizar la forma de participar dentro de la comunidad.
</p>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-list tf-joya"></i>
</div>
<div>
<div class="tf-title">
Discusiones y Actividad
</div>
<div class="tf-desc">
El apartado <strong>Discusiones</strong> muestra los temas activos de la comunidad ordenados según su actividad reciente. Desde aquí puedes acceder a conversaciones nuevas o continuar debates existentes.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-search tf-fuego"></i>
</div>
<div>
<div class="tf-title">
Búsqueda de Contenido
</div>
<div class="tf-desc">
La búsqueda permite localizar discusiones, mensajes, etiquetas o perfiles utilizando palabras clave sin necesidad de recorrer manualmente toda la plataforma.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-tags tf-bronce"></i>
</div>
<div>
<div class="tf-title">
Etiquetas y Categorías
</div>
<div class="tf-desc">
Las etiquetas organizan el contenido por temáticas. Puedes acceder a una etiqueta concreta para visualizar sus conversaciones relacionadas y seguir aquellas áreas que sean de tu interés.
</div>
</div>
</div>
</section>
</div>
<!-- =====================================
2. PUBLICACIÓN Y CONTENIDO
===================================== -->
<div class="tf-help-segment">
<section class="tf-card">
<div class="tf-card-header">
<h2>
2. Publicación y Contenido
</h2>
</div>
<div class="tf-nutshell">
<div class="tf-nutshell-tag">
RESUMEN
</div>
<p>
Utiliza el editor para crear publicaciones, aplica formatos cuando sea necesario y protege a otros usuarios utilizando correctamente los spoilers.
</p>
</div>
<p class="tf-text">
Triforce permite crear conversaciones, responder mensajes y compartir contenido mediante un editor preparado para diferentes tipos de publicaciones.
</p>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-pen-nib tf-oro"></i>
</div>
<div>
<div class="tf-title">
Editor de Publicaciones
</div>
<div class="tf-desc">
El editor permite escribir mensajes utilizando herramientas visuales y formatos compatibles para mejorar la presentación del contenido publicado.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-eye-slash tf-joya"></i>
</div>
<div>
<div class="tf-title">
Sistema de Spoilers
</div>
<div class="tf-desc">
Los detalles importantes de películas, series, videojuegos o libros deben ocultarse mediante la función de spoiler para evitar revelar información relevante a otros usuarios.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-robot tf-fuego"></i>
</div>
<div>
<div class="tf-title">
Contenido Generado con IA
</div>
<div class="tf-desc">
El contenido creado con ayuda de herramientas de inteligencia artificial debe indicarse correctamente para mantener la transparencia dentro de la comunidad.
</div>
</div>
</div>
</section>
</div>
<!-- =====================================
3. CUENTA Y ESPACIO PERSONAL
===================================== -->
<div class="tf-help-segment">
<section class="tf-card">
<div class="tf-card-header">
<h2>
3. Gestión de Cuenta y Perfil Personal
</h2>
</div>
<div class="tf-nutshell">
<div class="tf-nutshell-tag">
RESUMEN
</div>
<p>
Tu perfil reúne tu actividad, publicaciones y configuraciones personales dentro de Triforce.
</p>
</div>
<p class="tf-text">
Cada usuario dispone de un espacio personal donde puede gestionar su identidad dentro de la comunidad, consultar su historial y controlar diferentes aspectos de su cuenta.
</p>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-user-circle tf-oro"></i>
</div>
<div>
<div class="tf-title">
Perfil Personal
</div>
<div class="tf-desc">
Desde tu perfil puedes consultar tus publicaciones, respuestas, reacciones y la información pública que hayas decidido compartir con la comunidad.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-users tf-bronce"></i>
</div>
<div>
<div class="tf-title">
Menciones de Usuarios
</div>
<div class="tf-desc">
Puedes mencionar a otros miembros utilizando el símbolo <strong>@</strong> seguido del nombre de usuario para llamar su atención dentro de una conversación.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-image tf-zafiro"></i>
</div>
<div>
<div class="tf-title">
Archivos y Multimedia
</div>
<div class="tf-desc">
Los archivos multimedia asociados a tu actividad pueden gestionarse desde las herramientas disponibles en tu cuenta según las funciones habilitadas por la plataforma.
</div>
</div>
</div>
</section>
</div>
<!-- =====================================
4. NOTIFICACIONES, APARIENCIA Y PRIVACIDAD
===================================== -->
<div class="tf-help-segment">
<section class="tf-card">
<div class="tf-card-header">
<h2>
4. Notificaciones, Apariencia y Privacidad
</h2>
</div>
<div class="tf-nutshell">
<div class="tf-nutshell-tag">
RESUMEN
</div>
<p>
Personaliza cómo recibes avisos, adapta la apariencia de Triforce y controla las opciones relacionadas con tu privacidad.
</p>
</div>
<p class="tf-text">
Triforce permite ajustar diferentes elementos de la experiencia personal para que cada usuario pueda configurar la plataforma según sus preferencias de uso, comodidad y privacidad.
</p>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-bell tf-joya"></i>
</div>
<div>
<div class="tf-title">
Gestión de Notificaciones
</div>
<div class="tf-desc">
Puedes configurar qué eventos generan avisos dentro de la plataforma, como respuestas a tus publicaciones, menciones, actividad de usuarios seguidos o novedades relacionadas con tus conversaciones.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-palette tf-fuego"></i>
</div>
<div>
<div class="tf-title">
Apariencia y Personalización Visual
</div>
<div class="tf-desc">
La interfaz puede adaptarse mediante las opciones visuales disponibles, permitiendo utilizar diferentes configuraciones de apariencia para mejorar la comodidad durante la navegación.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-shield-halved tf-bronce"></i>
</div>
<div>
<div class="tf-title">
Privacidad y Control Personal
</div>
<div class="tf-desc">
Desde las opciones personales puedes gestionar determinados aspectos relacionados con la visibilidad de tu actividad y la información que compartes con otros miembros.
</div>
</div>
</div>
<div class="tf-notice">
<strong>Consejo:</strong> Revisa periódicamente tus ajustes personales para mantener la experiencia de Triforce adaptada a tus necesidades.
</div>
</section>
</div>
<!-- =====================================
5. PROGRESO, INSIGNIAS Y RANGOS
===================================== -->
<div class="tf-help-segment">
<section class="tf-card">
<div class="tf-card-header">
<h2>
5. Progreso, Insignias y Sistema de Rangos
</h2>
</div>
<div class="tf-nutshell">
<div class="tf-nutshell-tag">
RESUMEN
</div>
<p>
La participación positiva dentro de Triforce permite conseguir reconocimiento mediante puntos, insignias y sistemas de progreso comunitario.
</p>
</div>
<p class="tf-text">
Triforce incorpora sistemas de reconocimiento destinados a premiar la colaboración, la calidad de las aportaciones y la participación activa dentro de la comunidad.
</p>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-trophy tf-oro"></i>
</div>
<div>
<div class="tf-title">
Puntos de Experiencia
</div>
<div class="tf-desc">
La actividad dentro de la comunidad puede generar progreso mediante diferentes acciones como participar en conversaciones, ayudar a otros usuarios o aportar contenido útil.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-certificate tf-joya"></i>
</div>
<div>
<div class="tf-title">
Insignias y Reconocimientos
</div>
<div class="tf-desc">
Las insignias representan logros obtenidos dentro de la plataforma y permiten destacar determinadas contribuciones o hitos alcanzados por los miembros.
</div>
</div>
</div>
<div class="tf-rule">
<div class="tf-icon-box">
<i class="fas fa-star tf-oro"></i>
</div>
<div>
<div class="tf-title">
Mejores Respuestas
</div>
<div class="tf-desc">
Cuando una respuesta resuelve correctamente una duda o aporta una solución útil, puede ser marcada como respuesta destacada para facilitar la ayuda futura a otros usuarios.
</div>
</div>
</div>
</section>
</div>
<!-- =====================================
FOOTER DOCUMENTO
===================================== -->
<div class="tf-local-footer">
<i class="fas fa-sync-alt tf-footer-icon"></i>
Última actualización: 17 de mayo de 2026
</div>
</main>
</div>
🛠 Implementation Notes
- Usage: Simply create a new page in fof/pages or Advanced Pages and paste the code block above into the content editor.
- Customization: Since the CSS is included within the same page, it is very easy to manage the design independently.
