How to Create or Install a New Theme

By default, FlightPath will be installed using the "FP6 Clean" theme (or "Classic" for FlightPath 5 and below), located at /themes/ in your FlightPath installation directory.

Eventually, you will probably want to customize your FlightPath experience, to re-theme FP to whatever aligns with your school's branding.

 

How to create a new theme:

You might be tempted to just make changes directly to the "fp6_clean" theme, but this would be a mistake, because as soon as you update FlightPath, all of your changes would be lost. 

FlightPath 6 makes it easy to start a new theme, using the core "fp6_clean" theme as a starting point.  The following steps will set up a new custom theme, and you may edit the "custom.css" file for all of your changes.

  1. Examine the directory /themes/how_to_customize.  In there is a README.txt file which explains these steps.
  2. Copy the directory /themes/how_to_customize/custom_fp6_clean to your custom theme location:
    1. /custom/themes/custom_fp6_clean
  3. Enable (see below) the theme, and edit the theme's php and custom.css files as you see fit.  Icons and other images are kept in the theme's /images/ directory. 
    1. To change the icons, for example, you may add new icons, or replace existing icons with the same filenames.  Icons should be near 19x19 in size, as FP will scale to that size in HTML.

 

To enable a new theme:

  • These instructions work for your custom themes, as well as themes you may download.
  • Visit the Admin Console of your site, and go to System settings (admin/config/system-settings)
  • You will see the new theme as an option to select under "Themes".  Make sure the theme has a .info file named the same name as its custom directory.  Ex:  my_theme.info.  If you used the "custom_fp6_clean" theme, this will work as expected.
  • If there is a problem and you suddenly cannot access your site, you can change back to the core FP6 Clean theme by directly modifying the database
    • In the variables table, set the value of the "theme" variable to exactly this: s:14:"themes/fp6_clean";