In this final part, the custom theme information is added into the JavaScript files used by the Application Designer to display the theme options. Entries for a default theme will be copied and the new theme information will be entered in its place.
1.
On the web front end server, navigate to the
following directory:
C:\Program Files\Common Files\Microsoft
Shared\Web Server
Extensions\14\TEMPLATE\LAYOUTS\AppDesigner\Content-Cache\Apps\ApplicationDesigner\4.0.11\js
2. Once within the directory, edit the file entitled DesignCanvas.js.
3.
Search for the text “this.availableThemes” within the DesignCanvas.js
file. The result will be the location where the theme listing is
stored. The line begins with:
this.availableThemes =
ko.observableArray(
and the information that follows is for each of the
themes.
4.
Add the new theme into the listing. The format of the themes is as
follows:
{ "themeFolder": "<<theme directory>>", "title":
"<<theme name>>" }
•Scroll to the end of the this.availableThemes line. The line ends with ]);.
•Copy the theme setting for the Redmond theme.
•Add a comma and a space after the Redmond theme.
•Paste in the theme that was copied.
•Replace the themeFolder value with the name of the directory in step 14.
•Replace the title value with the name of the theme.
5. Close the DesignCanvas.js file, saving its changes.
At this point, the new theme has been created, uploaded into the site, and added to the Themes menus. To select the theme, access the Options Widget section and choose it from the Themes drop-down menu.
If the resulting theme isn’t correct, make changes to it via the ThemeRoller. Download the changed theme, ensuring it has the same name as the original custom theme. Repeat Parts II and III from the above steps to rename the jquery-ui.css file and to upload the updated theme into the site. As long as the theme’s folder name has not been changed, Part IV can be skipped.