How to Edit Your Gaming Community, Clan or Guild Website

1. Get your template files

Your community website starts from a template ZIP GameSignal provides with your hosting (or as a Premium template such as Ashfall or Blackout). Download it from your welcome email, support ticket or the Client Area, then unzip it on your computer.

You can browse live design previews on this site (for example Cherno Refuge) to decide which look you want. Those pages are demos only — edit and upload the ZIP we sent you for your account, not a copy of the preview.

Designs include DayZ Cherno Refuge and Blackpine, Rust Oxide Raiders and Scrapyard, Minecraft BlockCraft, CS2 Zero Hour, World of Warcraft Ashen Covenant and Tidebound Pact, Pulse Arena, WarDogs, Control Zone and more. Premium options such as DayZ Ashfall and Rust Blackout ship as their own ZIP when you purchase them.

Need a shorter how-to for one job only? See the guides hub for wipe notes, Discord invites, domains, whitelist forms, staff and rules.

Work on a copy of the unzipped folder so you always keep an original backup. If you need a fresh ZIP, ask us via Contact.

When you upload, put the contents of the ZIP into your site root so index.html sits in public_html — not nested under an extra folder unless you want the site at a path like yourdomain.com/dayz/.

2. Understand the folder

Every template ZIP uses the same basic layout. Example after unzip:

index.html         ← Home page
rules.html         ← Rules page
staff.html         ← Staff / officers page
README.txt         ← Upload notes
.htaccess          ← Optional clean URLs on Apache/cPanel
css/style.css      ← Colours and layout
js/config.js       ← EDIT THIS — community name, Discord, IP
js/site-config.js  ← Applies config.js (leave alone)
js/main.js         ← Mobile menu (usually leave alone)
assets/images/     ← Photos used by the site

Start with js/config.js. That one file updates your community name, Discord invite, server IP and social links across every page. Then edit HTML for rules/staff copy, css/style.css for colours, and assets/images/ for pictures.

3. Open the template in Visual Studio Code

1. Install and open Visual Studio Code.
2. Choose File → Open Folder… (macOS: File → Open…).
3. Select your unzipped template folder (the one that contains index.html and js/config.js), not the whole Desktop.
4. The left sidebar lists every file. Open js/config.js first.

Tip — Save often: Ctrl+S / Cmd+S. VS Code shows a white dot on the tab when a file has unsaved changes.

4. Preview your changes in a browser

1. In VS Code’s file list, right-click index.html.
2. Choose Reveal in File Explorer (or Finder on Mac).
3. Double-click index.html to open it in Chrome, Edge or Firefox.
4. After each save in VS Code, refresh the browser (F5 or Ctrl+R) to see updates.

Check rules.html and staff.html the same way. Keep the browser and VS Code side by side while you work.

5. Edit js/config.js (start here)

Open js/config.js. Replace the example values with yours, save, then refresh the browser. Logo text, page title, Discord buttons, server IP/port and footer blurb update automatically.

window.SITE_CONFIG = {
  community: {
    name: "Blackpine Outpost",      // full name
    shortName: "BLACKPINE",         // logo / header text
    tagline: "Outpost",             // small line under the logo
    titleSuffix: "DayZ Community",  // browser tab: Name | suffix
    description: "Your short SEO description.",
    footer: "Short footer blurb about your community."
  },

  discord: {
    enabled: true,
    invite: "https://discord.gg/your-invite",
    serverId: ""                    // optional Discord widget ID
  },

  server: {
    name: "Blackpine DayZ #1",
    ip: "123.123.123.123",
    port: "2302",
    connect: ""                     // leave "" to use ip:port
  },

  social: {
    youtube: "",
    twitch: "",
    twitter: ""
  }
};

What each block does

• community — name in the logo, titles, join headings and footer
• discord.invite — every “Open Discord” / Discord button on the site
• discord.serverId — optional; if you add a widget mount in HTML it can load your Discord server widget
• server — connect panel IP, port, server name and Copy IP buttons
• social — fill only if your template shows YouTube / Twitch / Twitter links

Do not edit js/site-config.js — that file applies your config. Keep commas and quotes valid JavaScript (a missing comma will stop the config from loading).

Hero headlines, longer homepage copy, rules text and staff bios are still edited in the HTML pages — config covers identity and connection details only.

6. Edit rules and staff

Rules — rules.html

Open rules.html and rewrite each numbered section to match how your community actually runs. Keep the existing headings if you like the layout, or rename sections (for example “Base building” → “Raid rules”). Delete sections you don’t need; add new <section> blocks by copying an existing one.

Staff — staff.html

Each person is a .staff-card block with:

• Initials or avatar text
• Display name
• Role (Owner, Admin, Moderator, Officer, etc.)

Duplicate a card for more staff; delete cards you don’t need. Keep the HTML structure intact so spacing and mobile layout still work.

7. Change colours in CSS

Open css/style.css. At the top you’ll see a :root block — these variables control the theme.

:root {
  --bg: #0a0c0a;
  --accent: #c4d48a;      /* primary buttons & highlights */
  --accent-hot: #e8a04a;  /* secondary highlight */
  --online: #7dcf6a;      /* “online” status colour */
  /* …other variables… */
}

Change --accent and --accent-hot to your brand colours (hex codes). Optionally tweak backgrounds (--bg, --bg-2) and text colours. Save, then refresh the browser.

Default accents by template:

• DayZ — green/khaki #c4d48a
• Rust — rust orange #ce422b
• Minecraft — green #5bce3a
• WoW — gold #f0c75e
• CS2 — orange #ff6a00

If you change the main accent, also update <meta name="theme-color"> in each HTML file so mobile browser chrome matches.

8. Replace images with GIMP

All template photos live in assets/images/. HTML points at those filenames (for example assets/images/hero-hannah.jpg). You have two safe options:

1. Keep the filename: edit or replace the image but export with the same name (recommended — no HTML changes).
2. New filename: export as a new name, then update every matching src="…" in the HTML.

Workflow in GIMP

1. Open GIMP → File → Open → pick the image from assets/images/.
2. Crop: Tools → Transform Tools → Crop. Heroes look best around 16:9 (for example 1920×1080).
3. Resize: Image → Scale Image. Hero images: about 1600–1920px wide. Gallery tiles: about 800–1200px wide.
4. Export: File → Export As…
   • Photos → .jpg (quality ~85–90)
   • Graphics with transparency → .png
5. Overwrite the original filename in assets/images/ (or export new and update HTML).
6. Refresh your browser preview.

Licensing: only use images you own or have rights to publish. Game press-kit art may have restrictions — keep the “not affiliated” footer note unless you have written permission otherwise.

Performance: huge 8K screenshots will slow the site. Scale them down in GIMP before uploading.

9. Upload to your GameSignal hosting

1. Log in to cPanel (details are in your welcome email).
2. Open File Manager → go to public_html (or the folder we assigned for your community site).
3. Upload your edited files. You can ZIP the template folder locally, upload the ZIP, then Extract in File Manager.
4. Keep the same structure: index.html at the site root of that community, with css/, js/ and assets/ beside it.
5. Visit your domain and hard-refresh (Ctrl+F5) so the browser drops old cached CSS/images.

If something looks broken after upload, usually a file path is wrong or an image wasn’t uploaded. Compare your live folder to the local template.

10. Final checklist

• js/config.js updated (name, Discord, IP/port)
• Browser refresh shows new logo text and Discord link
• Server IP / connect string is correct
• Rules match your community
• Staff names and roles are current
• Colours set in :root
• Hero and gallery images replaced (and compressed)
• Placeholder example text replaced with your community details
• Site tested on phone and desktop
• Files uploaded to cPanel and domain loads

Need us to do it?

Prefer not to edit files yourself? Contact GameSignal — on Managed plans we can apply branding, Discord, server details and image swaps for you. Browse designs on the templates page first.