How to customize the MuCMS theme for your MU Online server's website

The website is your MU Online server's calling card even before the player downloads the client — it's where the visitor decides whether to trust the project, create an account, and follow the ranking. MuCMS, one of the most widely used content management systems among Brazilian private servers, ships with a generic default theme that practically every competing server also uses. Customizing that theme is what visually sets your project apart. This tutorial covers the theme's file structure, safe template editing, color palette and typography, integration with dynamic modules (ranking, shop, news), and how to preserve your customization through CMS updates.

MuCMS folder structure

Before editing anything, it's essential to understand where each piece of the theme lives. A typical MuCMS installation structure is:

Confirm the installed MuCMS version before proceeding — some versions use Blade (.blade.php), others plain PHP with include.

Prerequisites

• FTP/SSH access to the server hosting MuCMS.
• Full backup of the themes/ folder and the database before any change.
• A code editor (VS Code or similar) with PHP/HTML/CSS support.
• A test environment (subdomain or local install) to avoid editing production directly.

Step 1 — Create an isolated copy of the theme (child theme)

Never edit the default theme directly. Duplicate the active theme's folder into a new directory (e.g., themes/viciadosmu-custom/) and point the CMS configuration to the new theme. This ensures a future MuCMS update won't overwrite your customizations, since the core normally only updates the default themes that ship with the installation.

cp -r themes/default themes/viciadosmu-custom

Then edit config/theme.php (or the equivalent for your version) to point to viciadosmu-custom.

Step 2 — Define the color palette and typography

Before touching any template, define the visual identity in centralized CSS variables, avoiding "hardcoded" colors scattered across the files:

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

Apply these variables to buttons, headings, links, and borders — this lets you swap the site's entire visual identity in the future by editing a single block.

Step 3 — Edit the header and footer

The header and footer appear on every page — usually files like views/partials/header.blade.php and footer.blade.php. This is where the server logo, navigation menu (Home, Ranking, Shop, Downloads, Rules), social media links, and the footer with legal/contact information belong. Keep the menu lean — more than 6-7 items at the top hurts mobile navigation.

Step 4 — Customize the home page

The home page usually combines a main banner, server stats (online count, season, EXP/drop rates), and news highlights. An effective MU server home page tends to follow this block order:

Step 5 — Integrate the dynamic ranking

The ranking page normally queries the server's database (character table) through one of MuCMS's own models/controllers. When customizing the visuals, preserve the original loop variables (e.g., $character->name, $character->level, $character->resets) and only restyle the surrounding HTML/CSS — changing the query logic without understanding the database schema can produce incorrect rankings or slow queries.

Step 6 — Customize the integrated shop (cash shop)

If MuCMS is integrated with a shop system (buying Credits/items), the shop page usually lists categories and items from a products table. Keep visible, for each item: name, image, price in Credits/real currency, and a clear purchase button. Add "best seller" or "promotion" badges via conditional CSS classes in the display loop, without altering the checkout logic.

Step 7 — Improve responsiveness (mobile)

Old MuCMS themes are rarely responsive out of the box. Review fixed pixel widths (width: 960px), swapping them for max-width with percentages, and add media queries to stack columns on smaller screens:

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

Test at least three widths (360px, 768px, 1280px) before considering responsiveness done.

Step 8 — Optimize image and script performance

Banner images and icons tend to be the site's heaviest load. Compress banners to under 300 KB, use lazy loading (loading="lazy") on below-the-fold images, and concatenate/minify CSS/JS files whenever the theme allows, to reduce the number of requests.

Step 9 — Test and publish

Validate the customized theme in the test environment, reviewing: login/registration, ranking, shop, news display, and mobile responsiveness. Only then publish to the production domain, keeping the previous theme's backup available for quick rollback if something breaks.

Common errors and fixes

Customization checklist

• Theme duplicated into an isolated folder, pointed to in the CMS configuration.
• Color palette and typography centralized in CSS variables.
• Header, footer, and home page restyled with the server's identity.
• Ranking and shop reviewed without altering query/checkout logic.
• Responsiveness tested at least three screen widths.
• Images compressed and scripts optimized.
• Previous theme backup preserved before publishing.

With the site customized and live, the natural next step is making sure the information it displays (online count, ranking, rates) accurately reflects your server's real configuration — review the server creation tutorial to check whether the parameters advertised on the site match what's configured on the GameServer.

Frequently asked questions