Create an ANGEL theme: Steps to creation and academic branding
Pondered on Monday March 12, 2007
To create a new ANGEL theme:
- Go to Admin
- Click on Theme Graphics
- Click on the themes folder
- Duplicate a theme folder that is most like the theme you want to create by clicking Copy underneath the folder name
- Rename the folder (i.e. CLS Cells)
- Click Save
- Go to Admin
- Click on Theme Stylesheets
- Duplicate a stylesheet by clicking Copy underneath the file name
- Rename the stylesheet to the same name as you chose for step 5
- Edit the stylesheet to point to the folder that contains your graphic, global stylesheet and CSS files
THEME_CSS=/AngelThemes/Themes/CLS Cells/theme.css (Line 4)import url(”/AngelThemes/_global-sah.css”); (Line 73)import url(”/AngelThemes/Themes/CLS Cells/theme.css”); (@ Line 75)
The Importance of the _global Stylesheet
I created an alternative _global stylesheet called _global-sah.css to do one thing, allow the School of Allied Health’s department graphic in the upper left corner to be 100% opaque.
The original _global stylesheet has the following defined style at line 93:
BODY.section_banner #subject_left { position:absolute;left:0px;top:0px;width:99%;height:55px;background:none transparent no-repeat left top;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50; }
In the _global-sah file this is updated to leave out the filter style:
BODY.section_banner #subject_left { position:absolute;left:0px;top:0px;width:99%;height:55px;background:none transparent no-repeat left top;}
All style changes are commented and if you create custom work or change files provide some notation for designers who will come after you. I provide comments at the top of the file and right above the changes made.
Theme Graphics
To customize a theme plan to edit the graphics that exist in your newly created folder in Theme Graphics>themes. If you copied a theme that is missing a graphic you may copy the graphic from another theme. In example each subject.css file will call a main background image but not all Themes use the graphic. The CSS is standard from theme to theme while those themes not using the graphic simply leave the graphic out of the directory.
In order to duplicate the branding create or edit subj-left-sm.gif. The height on this image is 28 pixels. The width will vary but don’t make it wider than the tab width.
The image on the right, subj-right-sm.gif, should be 55 pixels high. The width is 325 pixels.
You may get creative with all the elements that make up a theme. Just be sure to test your settings as you work. Make a change then test. This is especially true of editing the multiple CSS files.
The _print.css file (located in Theme Graphics) may need to be updated on your system to create a print friendly page. The default _print.css file defines very few elements.