Create an ANGEL theme: Understanding the file structure
Pondered on Monday March 5, 2007
Does your school hate the theme selection in ANGEL? Worse yet do your instructors use the Anatomy theme so students have to read pages of material with silhouetted skeletons in the background? Fortunately you can create your own ANGEL themes. All you need is a designer who is not intimidated by multiple CSS files or confusing file architecture.
General Orientation to ANGEL Themes
All ANGEL theme files are found in the Administrator Console. Luckily they are grouped together in one component so you do not have to dig for the files.
An ANGEL theme is made up of a single CSS file located in Theme Stylesheets, a global CSS file stored in Theme Graphics and five CSS files (plus 20-26 gifs) stored in an individual theme folder in Theme Graphics. Got that? Maybe not so lets take a closer look.
Theme Stylesheets folder
The Theme Stylesheets folder stores a CSS file for each theme. Once this file is created the style will show up in the Theme Selector utility throughout ANGEL. If I am not ready to implement a theme I will remove this file from the system temporarily. This is a quick and convenient way to remove any theme from the system. The CSS file is named for the theme:
Art.css
Berry.css
Criminal_Justice.css
Each stylesheet imports two stylesheets (stored in Theme Graphics) _global.css and theme.css. The first 70 lines of the CSS file are set up to interface with, I believe, the Theme Wizard editing feature. This code is commented out.
Theme Graphics folder
The Theme Graphics folder contains the bulk of files that create a theme. Take a look at the directory structure. Most themes are stored in the themes folder. A number of themes, like Gradebook and Ivy are stored outside the folder. I am not sure why it was done this way but for the purpose of creating new themes work within the themes folder.
Each individual theme folder (named for the theme) contains the following five CSS files.
- banner.css
- color.css
- nugget.css
- subject.css
- theme.css
Typically you do not need to alter these files. The folder also contains all of the supporting graphic files.
The key to designing a theme is to pick a theme that most closely resembles the colors and graphics that you want to reproduce. From there you can alter the colors and graphics. My next ANGEL theme post will outline the steps to creating a new theme.