Skip to content

Customising G3W

G3W-SUITE supports customisation of its interface, enabling you to adapt the system to your organisation’s branding and preferences, and improve the user experience.

📝
You must be logged in as an administrator to customise your G3W instance.


Step 1: Update Site Title

  1. Go to the G3W-SUITE Administration Panel.

  2. Click the Gear icon in the top navigation bar.

  3. Under Configurations, select Django administration.

  4. On Admin page, under Constance, click Config.

  5. In the Value field, enter your new site title.

  6. Click Save.


Edit Site Title
Image credit: G3W-SUITE


When the page reloads, the website title displayed in the browser tab will update automatically.


Old vs. New Site Title
Image credit: G3W-SUITE


Step 2: Update Landing Page Background

  1. Go to the G3W-SUITE Administration Panel.

  2. Click the Gear icon in the top navigation bar.

  3. Under File Manager, select Files.

  4. Navigate to custom_static/images/home.


    custom_static/images/home folder
    Image credit: G3W-SUITE


  5. Edit the images.json to update metadata about the image (e.g. author name, URL).

  6. Name your new image landing.jpeg and upload it.


images.json


📝
The image name in images.json must exactly match the name of your background image.


If no images.json file is present, G3W-SUITE will automatically use the first image in the directory as the landing-page background.

After uploading, your new background image and author credits should appear on the landing page. If the landing page doesn’t display your updated image:

  1. Right-click the page and select Open DevTools / Inspect Element.

  2. In the top-bar, open the Network tab.

  3. Check Disable cache and reload the page.

  4. Uncheck Disable cache and close DevTools.


Disable cache


Your G3W-SUITE landing page will now display your new background image, complete with author credit.


New Landing Page
Image credit: G3W-SUITE


Step 3: Update Logos

  1. Go to the G3W-SUITE Administration Panel.

  2. Click the Gear icon in the top navigation bar.

  3. Under File Manager, select Files.

  4. Navigate to the custom_static folder.

  5. Replace the following files with your custom versions (keeping the same filenames):

File Usage
favicon.ico Shown as favicon on the browser tab.
logo_main.png Used when the left sidebar on the admin page is expanded.
logo_reduced.png Used when the left sidebar on the admin page is collapsed.
logo_login.png Used when logging in to the admin page directly (e.g. from the URL) instead of using the landing page.


💡
Maintain the original image dimensions for best visual results. File names must remain identical to ensure the UI displays correctly.


custom_static folder
Image credit: G3W-SUITE


custom_static folder
Image credit: G3W-SUITE


Step 4: Customise Website Styles and Colours

  1. Go to the G3W-SUITE Administration Panel.

  2. Click the Gear icon in the top navigation bar.

  3. Under File Manager, select Files.

  4. Navigate to custom_static/css.

  5. Download custom.css, edit it locally, and upload your updated version.


💡
If you need the original version of these files, you can download them from: https://github.com/kartoza/g3w-admin/tree/GeoHosting/g3w-admin/core/static/custom_static/css


custom_static/css
Image credit: G3W-SUITE