Como customizar o tema do MuCMS para o site do seu servidor de MU Online

O site é o cartão de visitas do seu servidor de MU Online antes mesmo do jogador baixar o cliente — é nele que o visitante decide se confia no projeto, se cria conta e se acompanha o ranking. O MuCMS, um dos gerenciadores de conteúdo mais usados por servidores privados brasileiros, vem com um tema padrão genérico que praticamente todo servidor concorrente também usa. Customizar esse tema é o que diferencia visualmente o seu projeto. Este tutorial cobre a estrutura de arquivos do tema, edição segura de templates, paleta de cores e tipografia, integração com módulos dinâmicos (ranking, loja, notícias) e como preservar a customização diante de atualizações do CMS.

Estrutura de pastas do MuCMS

Antes de editar qualquer coisa, é essencial entender onde vive cada peça do tema. A estrutura típica de uma instalação MuCMS é:

Confirme a versão do MuCMS instalada antes de seguir — algumas versões usam Blade (.blade.php), outras PHP puro com include.

Pré-requisitos

• Acesso FTP/SSH ao servidor onde o MuCMS está hospedado.
• Backup completo da pasta themes/ e do banco de dados antes de qualquer alteração.
• Editor de código (VS Code ou similar) com suporte a PHP/HTML/CSS.
• Ambiente de teste (subdomínio ou instalação local) para não editar direto em produção.

Passo 1 — Criar uma cópia isolada do tema (child theme)

Nunca edite o tema padrão diretamente. Duplique a pasta do tema ativo para um novo diretório (ex.: themes/viciadosmu-custom/) e aponte a configuração do CMS para o novo tema. Isso garante que uma atualização futura do MuCMS não sobrescreva suas customizações, já que o core normalmente só atualiza os temas padrão que acompanham a instalação.

cp -r themes/default themes/viciadosmu-custom

Depois, edite config/theme.php (ou o equivalente da sua versão) apontando para viciadosmu-custom.

Passo 2 — Definir a paleta de cores e tipografia

Antes de mexer em qualquer template, defina a identidade visual em variáveis CSS centralizadas, evitando cores "hardcoded" espalhadas pelos arquivos:

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

Aplique essas variáveis em botões, cabeçalhos, links e bordas — isso permite trocar a identidade visual inteira do site editando um único bloco, no futuro.

Passo 3 — Editar o cabeçalho e o rodapé

O header e o footer aparecem em todas as páginas — normalmente arquivos como views/partials/header.blade.php e footer.blade.php. É aqui que entram: logo do servidor, menu de navegação (Home, Ranking, Loja, Downloads, Regras), links de redes sociais e o rodapé com informações legais/contato. Mantenha o menu enxuto — mais de 6-7 itens no topo prejudica a navegação em mobile.

Passo 4 — Customizar a página inicial (home)

A home geralmente combina banner principal, estatísticas do servidor (online, season, taxas de EXP/drop) e destaques de notícias. Uma home eficaz para servidor de MU costuma seguir esta ordem de blocos:

Passo 5 — Integrar o ranking dinâmico

A página de ranking normalmente consulta o banco de dados do servidor (tabela de personagens) via uma model/controller do próprio MuCMS. Ao customizar o visual, preserve as variáveis originais do loop (ex.: $character->name, $character->level, $character->resets) e apenas reestilize o HTML/CSS em volta — alterar a lógica de consulta sem entender o schema do banco pode gerar rankings incorretos ou queries lentas.

Passo 6 — Customizar a loja (cash shop) integrada

Se o MuCMS estiver integrado a um sistema de loja (compra de Credits/itens), a página de loja geralmente lista categorias e itens vindos de uma tabela de produtos. Mantenha visível, para cada item: nome, imagem, preço em Credits/moeda real, e um botão de compra claro. Adicione selos de "mais vendido" ou "promoção" via classes CSS condicionais no loop de exibição, sem alterar a lógica de checkout.

Passo 7 — Ajustar responsividade (mobile)

Temas antigos de MuCMS raramente nascem responsivos. Revise larguras fixas em pixels (width: 960px) trocando por max-width com porcentagem, e adicione media queries para empilhar colunas em telas menores:

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

Teste em pelo menos três larguras (360px, 768px, 1280px) antes de considerar a responsividade concluída.

Passo 8 — Otimizar performance de imagens e scripts

Imagens de banner e ícones costumam ser o maior peso de carregamento do site. Comprima banners para menos de 300 KB, use lazy loading (loading="lazy") em imagens abaixo da dobra, e concatene/minifique arquivos CSS/JS sempre que o tema permitir, para reduzir o número de requisições.

Passo 9 — Testar e publicar

Valide o tema customizado no ambiente de teste, revisando: login/registro, ranking, loja, exibição de notícias e responsividade mobile. Só então publique no domínio de produção, mantendo o backup do tema anterior disponível para rollback rápido caso algo quebre.

Erros comuns e soluções

Checklist de customização

• Tema duplicado em pasta isolada, apontado na configuração do CMS.
• Paleta de cores e tipografia centralizadas em variáveis CSS.
• Header, footer e home reestilizados com a identidade do servidor.
• Ranking e loja revisados sem alterar a lógica de consulta/checkout.
• Responsividade testada em pelo menos três larguras de tela.
• Imagens comprimidas e scripts otimizados.
• Backup do tema anterior preservado antes da publicação.

Com o site customizado e no ar, o próximo passo natural é garantir que as informações exibidas nele (online, ranking, taxas) reflitam com precisão a configuração real do seu servidor — revise o tutorial de criação de servidor para conferir se os parâmetros anunciados no site batem com o que está configurado no GameServer.

Perguntas frequentes