FrogLearn - Custom theme design

From Frog Knowledge Base
Jump to: navigation, search

As of the July/August release of FrogLearn, it is possible for selected schools to be create their own themes and arrange for Frog to upload these.

There are some important things to be aware of:

1). At present, this feature is by invitation only - this is to allow us to test this with a small number of schools before widescale rollout.

2). Custom themes are NOT supported by Frogtrade. Assistance with themes via the Service Desk is limited to uploading, overwriting or downloading themes - we cannot offer any help or troubleshooting on these themes.

3). Once the themes are deployed, should any issues be discovered on the site, we will change the theme for a Frogtrade-created site. If this resolves the issue you will be notified and required to troubleshoot your code.

4). Community support for the themes can be found at Frog Forum theme topics. Please note you will need to log in or register to the forum to use this functionality.

5). The Frog Design Team can offer a theme validation and consultation service for any themes you have built - this allows you to have your theme fully tested, any issues with it reported on and design suggestions provided. Please contact for further information. Please note that this is chargeable service.

February Release Changes

Following the February release any themes using the attribute "fixed" to set their background images may find that these images no longer display in Chrome. We recommend removing the "fixed" attribute which should allow the images to display cross browser. If you wish to send an updated .ejs file to we will be able to update this for you.


Since the New Bronte release School specific themes may need to be updated by the school to support the enhancement of portrait view

When a theme is deleted by Frog, it can cause data loss if still in use on sites. Please be 100% sure that the theme has not been used on a site before contacting us requesting it is deleted.

Useful URLs:

For additional info on the FrogLearn UI and design, please visit:

The offline theme builder can be downloaded from here: - PLEASE NOTE: As of 25/07/2013 we have discovered an issue with the offline theme builder which means that it is not detecting issues with classes that become a problem once the theme is made live in FrogLearn. We have raised this to the development team involved and they are currently working on this. As such, please bear in mind that even if the them displays without issues in the Offline Theme Builder, you may discover issues when applied to a live environment. This page will be updated with further information as soon as we have it.

Useful Hints

  • Photoshop likes to capitalise files which means that the file names may no longer match the names you have entered into the code. For example, the file name in the code might be logo-schoolname.png but Photoshop will automatically name this logo-Schoolname.png. This will result in the image not being displayed. In this case the file must be renamed and the theme rezipped.
  • Remember to make your class names individual to your themes - this must be changed from the frog13 default!
  • Remember to include a screenshot.png file within your zip, this is the image that will be used in the theme list to display a preview of your theme.