CTFd themes are made up of 3 main components:
- Jinja Templates
- Cascading Style Sheets (CSS)
Folders and Files
While the only two folders which are absolutely required by a CTFd theme are
templates, in general themes should be broken down into the following structure:
Note that we are not including other files such as configuration files, instructions, node_modules, etc. since they are only used to build our theme structure.
assets directory generally contains the uncompiled, unminified source of any JS or CSS files.
You may commonly see a structure such as:
static directory will contain the compiled and minified JS and CSS files that will be served by CTFd to the user's browser. The structure for this is roughly:
The manifest.json and manifest-css.json files should be automatically generated by the JS/CSS build system. In the following sections it is documented how to generate these files using Vite.
templates directory will contain the Jinja HTML templates that are rendered by CTFd and served to the user. Templates must have a very specific structure which is documented in the templates section.
package.json is documented by npm. In most cases this should be generated for you when you create your project.
vite.config.js is the configuration file for the Vite build system used. The configuration for
vite.config.js is outlined further in the Build System section.