[GUIDE] Change Zammad notification logo (phoenix) by building a Zammad package

Development
, ,
1

This guide explains how to change the Zammad logo and create a Zammad package on a GNU/Linux OS for Zammad 6.x.x.

Part 1: Changing the Zammad Logo

Prerequisites:

  • git
  • pnpm; Install it with:
    $ curl -fsSL https://get.pnpm.io/install.sh | sh -

Steps to Change the Logo

  1. Clone the Zammad Repository:

    $ git clone https://github.com/zammad/zammad.git

  2. Navigate to the Logo Directory:

    $ cd zammad/public/assets/images/icons

  3. Replace the Logo:

    • Substitute the existing logo.svg file with your logo.
    • Ensure the new logo:
      • Is an .svg file.
      • Is named logo.svg.
      • Has approximate dimensions of 42px by 36px with 96 DPI (exact size is not critical, but it should be relatively small to save disk space).

  4. Build the Assets:

    • Navigate back one directory to zammad/public/assets/images:
      $ cd ..
    • Run the following commands to rebuild the assets:
      $ pnpm install
$ pnpm exec gulp build

    After these steps, the icons.svg file in the public/assets/images directory will be updated with your new logo.

Part 2: Creating a Zammad Package with the New Logo

Prerequisites:

  • Install the required Ruby version for Zammad as specified in the Gemfile.
  • Install RVM.
  • Install the correct Ruby version (e.g., 3.2.4) with:
    $ rvm install 3.2.4
  • Follow the remaining setup steps as described in this repository.

Steps to Create the Package

  1. Set Up a New Project:

    • Create a directory for your project and initialize it as a Git repository:
      $ mkdir CompanyName-NewLogo
$ cd CompanyName-NewLogo
$ git init

  2. Add a Template for a New Zammad Package Module:

    $ git zammad-new-szpm

  3. Create the Directory for the Logo:

    • Create the directory where the logo will be stored:
      $ mkdir -p public/assets/images/
    • Copy the updated icons.svg file into this directory.

  4. Update the File List:

    $ git zammad-update-szpm

    The example-new_project.szpm file should now look similar to this:

    {
  "name": "CompanyName-NewLogo",
  "version": "1.0.0",
  "vendor": "Example GmbH",
  "license": "MIT",
  "url": "http://example.com/",
  "files": [
    {
      "location": "public/assets/images/icons.svg",
      "permission": 644
    }
  ]
}

    Take the time to personalize the name, version, vendor and url fields of the example-new_project.szpm file

  5. Create the Zammad Package:

    git zammad-create-zpm 1.0.0

  6. Install the Package in Zammad:

    • Upload your newly created company_name-new_logo-1.0.0.zpm file to Zammad via the Packages section.
    • After installing, updating, or uninstalling packages, execute the following commands on your server:
      $ zammad run rake zammad:package:post_install
$ systemctl restart zammad

Enjoy your new logo in Zammad!

Best,
Skip

4 Likes