2. First Steps

When starting a new theme it is not necessary to create all files for a theme.

But you should do the following:

2.1. 1. Setup directories for your theme

Under the following directories setup a directory with your theme:

  • /opt/cantemo/portal/portal_themes/

  • /opt/cantemo/portal/portal_media/img

  • /opt/cantemo/portal/portal_media/js

Then under your directory in portal_themes/ add a subdirectory ‘templates’. For example if my theme was to be called ‘night’, the path would look like this:

/opt/cantemo/portal/portal_themes/night/templates/

At the moment these are empty directories, so they might not be pushed to certain version control systems.

2.2. 2. Setup LESS files

It is recommended that you copy our LESS files from the portal theme ‘Core’. These are located:

/opt/cantemo/portal/portal_media/less/

They all have an extension .less - Copy all of them. You can copy them in to the same directory, with a different name, or make a separate directory for theme under portal_media. Before modifying the files, add them in to version control. Then branch them off or tag them so that you know that they come from a certain revision.

2.3. 3. Setup LESS compiler.

If you plan on using LESS then you should setup your less compiler. Set it up to compile the LESS files that you created in step 2 to compile to a place in portal_media. This could be under the portal_media/css directory or another directory under portal_media.

2.4. 4. Setup Theme in Cantemo interface.

Setup a theme in the Cantemo Interface with a logo, and match the output of your less compiler to the CSS file string.

2.5. 5. Set your user to use the new theme.

Go into the settings for your user and choose the new theme. The new theme should be used from now on.

2.6. 6. Check that its working.

Now we just need to make sure that the theme can be changed

  1. Open the LESS file that has the variables at the top.

  2. Change a color such as the color of the font, or background color of the header.

  3. Compile with the LESS compiler (decent LESS compilers wait for changes in the file and automatically compress)

  4. Reload the web browser to see if the changes have taken effect.

2.7. Next steps

After you have done the above you should be ready to building your own theme. But it is recommended that you:

  • Read the Documentation on template inheritance and theme inheritance.

  • Read the Documentation on django-debug-toolbar

  • Read the Django documentation on template tags.

  • Read our documentation on our template tags.