Cómo personalizar el tema del MuCMS para el sitio de tu servidor de MU Online

El sitio es la carta de presentación de tu servidor de MU Online incluso antes de que el jugador descargue el cliente — es ahí donde el visitante decide si confía en el proyecto, si crea una cuenta y si sigue el ranking. MuCMS, uno de los gestores de contenido más usados por servidores privados brasileños, viene con un tema predeterminado genérico que prácticamente todo servidor competidor también usa. Personalizar ese tema es lo que diferencia visualmente tu proyecto. Este tutorial cubre la estructura de archivos del tema, la edición segura de templates, la paleta de colores y tipografía, la integración con módulos dinámicos (ranking, tienda, noticias) y cómo preservar la personalización frente a actualizaciones del CMS.

Estructura de carpetas del MuCMS

Antes de editar cualquier cosa, es esencial entender dónde vive cada pieza del tema. La estructura típica de una instalación MuCMS es:

Confirma la versión del MuCMS instalada antes de continuar — algunas versiones usan Blade (.blade.php), otras PHP puro con include.

Prerrequisitos

• Acceso FTP/SSH al servidor donde está alojado el MuCMS.
• Backup completo de la carpeta themes/ y de la base de datos antes de cualquier cambio.
• Editor de código (VS Code o similar) con soporte para PHP/HTML/CSS.
• Entorno de prueba (subdominio o instalación local) para no editar directamente en producción.

Paso 1 — Crear una copia aislada del tema (child theme)

Nunca edites el tema predeterminado directamente. Duplica la carpeta del tema activo hacia un nuevo directorio (ej.: themes/viciadosmu-custom/) y apunta la configuración del CMS al tema nuevo. Esto garantiza que una futura actualización del MuCMS no sobrescriba tus personalizaciones, ya que el core normalmente solo actualiza los temas predeterminados que vienen con la instalación.

cp -r themes/default themes/viciadosmu-custom

Después, edita config/theme.php (o el equivalente de tu versión) apuntando a viciadosmu-custom.

Paso 2 — Definir la paleta de colores y tipografía

Antes de tocar cualquier template, define la identidad visual en variables CSS centralizadas, evitando colores "hardcodeados" esparcidos por los archivos:

:root {
  --cor-primaria: #b8860b;
  --cor-secundaria: #1a1a2e;
  --cor-destaque: #e94560;
  --fonte-titulo: 'Cinzel', serif;
  --fonte-corpo: 'Roboto', sans-serif;
}

Aplica estas variables en botones, encabezados, enlaces y bordes — esto permite cambiar toda la identidad visual del sitio editando un único bloque, en el futuro.

Paso 3 — Editar el encabezado y el pie de página

El header y el footer aparecen en todas las páginas — normalmente archivos como views/partials/header.blade.php y footer.blade.php. Aquí es donde van: logo del servidor, menú de navegación (Home, Ranking, Tienda, Descargas, Reglas), enlaces de redes sociales y el pie de página con información legal/contacto. Mantén el menú simple — más de 6-7 ítems en la parte superior perjudica la navegación en móvil.

Paso 4 — Personalizar la página principal (home)

La home generalmente combina banner principal, estadísticas del servidor (online, season, tasas de EXP/drop) y destacados de noticias. Una home eficaz para servidor de MU suele seguir este orden de bloques:

Paso 5 — Integrar el ranking dinámico

La página de ranking normalmente consulta la base de datos del servidor (tabla de personajes) vía una model/controller del propio MuCMS. Al personalizar el visual, preserva las variables originales del loop (ej.: $character->name, $character->level, $character->resets) y solo reestiliza el HTML/CSS alrededor — alterar la lógica de consulta sin entender el schema de la base de datos puede generar rankings incorrectos o queries lentas.

Paso 6 — Personalizar la tienda (cash shop) integrada

Si el MuCMS está integrado a un sistema de tienda (compra de Credits/ítems), la página de tienda generalmente lista categorías e ítems provenientes de una tabla de productos. Mantén visible, para cada ítem: nombre, imagen, precio en Credits/moneda real, y un botón de compra claro. Agrega sellos de "más vendido" o "promoción" vía clases CSS condicionales en el loop de visualización, sin alterar la lógica de checkout.

Paso 7 — Ajustar responsividad (móvil)

Los temas antiguos de MuCMS rara vez nacen responsivos. Revisa anchos fijos en píxeles (width: 960px) cambiándolos por max-width con porcentaje, y agrega media queries para apilar columnas en pantallas más pequeñas:

@media (max-width: 768px) {
  .container-ranking { flex-direction: column; }
  .menu-principal { display: none; }
  .menu-mobile-toggle { display: block; }
}

Prueba en al menos tres anchos (360px, 768px, 1280px) antes de considerar la responsividad concluida.

Paso 8 — Optimizar rendimiento de imágenes y scripts

Las imágenes de banner e íconos suelen ser el mayor peso de carga del sitio. Comprime los banners a menos de 300 KB, usa lazy loading (loading="lazy") en imágenes debajo del pliegue, y concatena/minifica archivos CSS/JS siempre que el tema lo permita, para reducir el número de solicitudes.

Paso 9 — Probar y publicar

Valida el tema personalizado en el entorno de prueba, revisando: login/registro, ranking, tienda, visualización de noticias y responsividad móvil. Solo entonces publica en el dominio de producción, manteniendo el backup del tema anterior disponible para un rollback rápido en caso de que algo se rompa.

Errores comunes y soluciones

Lista de verificación de personalización

• Tema duplicado en carpeta aislada, apuntado en la configuración del CMS.
• Paleta de colores y tipografía centralizadas en variables CSS.
• Header, footer y home reestilizados con la identidad del servidor.
• Ranking y tienda revisados sin alterar la lógica de consulta/checkout.
• Responsividad probada en al menos tres anchos de pantalla.
• Imágenes comprimidas y scripts optimizados.
• Backup del tema anterior preservado antes de la publicación.

Con el sitio personalizado y en línea, el siguiente paso natural es garantizar que la información mostrada en él (online, ranking, tasas) refleje con precisión la configuración real de tu servidor — revisa el tutorial de creación de servidor para verificar si los parámetros anunciados en el sitio coinciden con lo configurado en el GameServer.

Preguntas frecuentes