This is a very very rough draft. As of right now (June 6th), it's some rough notes on what the process is like right now.

First, make sure you have a copy of Drive installed (see installer and git repo instructions) (todo: put Google doc up and link it here).

After that, there are two starting points for theming.

  • Are you using a pre-built theme? If so, go to the next section (Adapting a Pre-Built Theme)
  • Are you building a bespoke theme? Skip to the "Src Package" section

 

This process might differ slightly depending on the project and the theme.

  1. Add CSS and JS files, and their sources, into assets/theme
  2. Link these assets in _base.twig
  3. In _layout_page.twig, add the navbar and footer
  4. Make sure content.twig, the generic default page, extends _layout_page.twig
  5. In the theme, look for a page that could be used as a generic content page. Add its header to the header block in content.twig. Add whatever wrappers you need to to the content block.
  6. See the file in the documentation folder for skinning blocks if you need a block that requires a little more than hacking a template selector into the block class input.
  7. If you are using Vue components in the src package, change their templates to match the theme.

Adapting a Pre-Built Theme

Before following these steps, make sure you have the theme file package downloaded. If you're adding the zip file to the project repository, a good place might be somewhere in assets.

Step 1: Assets

Unzip the package if needed. Look for a folder containing css, js, and anything else that belongs to the front-end (in themeforest themes, this is usually somewhere in the HTML folder).

Copy these into assets/theme while keeping the same structure. If you have a directory like this:

  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/css

Then they should like this when you're done:

  • project_root/assets/theme/css

Example 1: Torbara's Team Template

Package

  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/css/
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/css-min/
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/js/
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/js-min/
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/less/
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/less-variables/
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/bower.json
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/Gruntfile
  • themeforest-19724560-team-soccer-football-hockey-basketball-esport-gaming-sport-club-html-template/team/HTML/team_1.0.4/team/package.json

Project

 

Example 2: themezaa's Pofo Template

Package

 

Project

 

Getting and naming content indexes through the API

When using the API, indexes are named after who has permission to read them. These names are taken from the top-level lists in api/v1/config.php.

Public
Can be read by everyone
Account
Can only be read by users and admins
Admin
Can only be read by admins

More notes that'll eventually be organized

When using Vue components in the src package, don't wrap the page in the #appContainer element. This disables other scripts, especially from third-party themes. While it's possible to go through the theme js and re-initialize everything, it's not economical.