Picture of Jason Wilson
Adding new theme to Authoring Tool
by Jason Wilson - Thursday, 21 January 2021, 5:13 AM
 

Hi guys, I've been following the instructions in the link below to add a new theme:

https://github.com/adaptlearning/adapt_authoring/wiki/Modifying-the-Vanilla-Theme

The idea being to have a play around with themes before getting stuck into creating one specific to my company.

Unfortunately it looks like these instructions have not been updated recently, as I'm getting errors (and other references to files locations etc. also appear outdated).

Following the above instructions, the first error I get is:

Error: There is a plugin already installed with a target attribute of '_vanilla'.

When I look in the bower.json file, I see the following:

"targetAttribute": "_vanilla"

No problem, I think - I'll just change it to "myNewTheme" (like the rest of the instructions).

Unfortunately when I do this and try to upload the theme again I get the following error:

"An error occurred while getting schemas."

Something is obviously failing somewhere, and am hoping someone can shed some light on it?

Full bower.json contents below for reference:

{
"name": "adapt-myNewTheme",
"version": "0.0.2",
"framework": ">=5.3",
"homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla",
"issues": "https://github.com/adaptlearning/adapt_framework/issues/new",
"theme": "myNewTheme",
"displayName": "myNewTheme",
"description": "A core bundled theme",
"main": "js/theme.js",
"keywords": [
"adapt-plugin",
"adapt-theme"
],
"license": "GPL-3.0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"targetAttribute": "_myNewTheme"
}

 

Any help would be greatly appreciated.

Thanks!

PS: There is also a .bower.json file (note the dot at the front) in the folder - does this need to be edited as well?

Picture of Henrik Aabom
Re: Adding new theme to Authoring Tool
by Henrik Aabom - Thursday, 21 January 2021, 7:14 AM
 

Hi Jason Wilson

When we create a new theme, we follow these steps. Maybe they can be of help to you :)

Adapt Theme - setup

How to setup a new theme from the adapt-contrib-vanilla theme bundled with Adapt 5+ framework.
https://github.com/adaptlearning/adapt-contrib-vanilla

bower.json

These settings needs to be changed:

  • name (ex: “company-theme”)
  • version (ex: “0.0.1”)
  • homepage (ex: “http://www.company.com”)
  • issues (ex: “http://www.company.com”)
  • theme (ex:  companytheme”)
  • displayName (ex: “Company Theme”)
  • description (ex: “This is a theme for Company.”)
  • targetAttribute (ex: “_companytheme”)

When changing “targetAttribute”, remember to switch out all occurrences of “_vanilla” inside the properties.schema file, with what is present in the “targetAttribute” property (ex: “_companytheme”).

theme.js

Inside this file \js\theme.js, remember to switch out all occurrences of “_vanilla”, with what is present in the “targetAttribute” property of the bower.json (ex: “_companytheme”). As of this writing only one occurrence exists, here:

var theme = model.get('_vanilla');

properties.schema

Remember to switch out all occurrences of “_vanilla”, with what is present in the “targetAttribute” property of the bower.json.
For instance:

"contentobject": { "type": "object", "properties": { "_vanilla": { ... } } }

In here it is possible to set all preset colors like this (hex colors only):

"font-color": { "title": "Font colour", "type": "string", "inputType": "ColourPicker", "default": "#CD5C5C", "help": "Global body font colour" },

If no default color is desired, set default property to an empty string: “”.