Skip to content

Adding extension SkinStyles

alistair3149 edited this page Oct 25, 2023 · 11 revisions

Please see here for current status of SkinStyles.

Step by step guide

  1. Go to the extension's repository
  2. Set the branch to REL1_39 (if none exists use master or main)
  3. Open extension.json (root directory)
  4. Copy the value of "name" and create a folder with that name under the skinStyles/extensions/ folder in Citizen's repo
  5. Find "ResourceModules" in extension.json
  6. For each of the ResourceModules that contains a "styles" object:
    1. Create a LESS file using the name of the ResourceModule (e.g. ext.tabberNeue.less) and place it inside the folder that you created
    2. Place and fill in the below documentation header on the top of the file (example):
      /*
       * Citizen
       *
       * SkinStyles for <EXTENSION NAME>
       * Module: <MODULE NAME>
       * Version: <BRANCH> <COMMIT>
       *
       * Date: <LAST UPDATED DATE, in YYYY-MM-DD>
      */
    3. Open the CSS/LESS files defined in the "styles" object in extension.json
    4. Copy the styles and only keep and add rules that you need (if there are multiple files, please prepend the styles with a comment containing the name of the file (example))
    5. Open skin.json in Citizen (root directory)
    6. Find ResourceModuleSkinStyles in skin.json
    7. Edit and add the line below (example):
      "+<MODULE NAME>": "<RELATIVE PATH TO LESS FILE>",
  7. Submit a Pull Request on GitHub

See Common conversion for tips on styles.