« A SCORM-compatible learning module template: Part 4 of 6 | Main | A SCORM-compatible learning module template: Part 6 of 6 »

May 12, 2007

A SCORM-compatible learning module template: Part 5 of 6

Part 1: Features, Outline your Module
Part 2: Creating the Navigation
Part 3: Other Configuration Elements
Part 4: Start Building Your Pages
Part 5: Modifying the CSS Styles
Part 6: Branching Behavior

Modifying the CSS styles

The css styles are defined in several sheets. Any of the styles can be overridden by adding a new definition for the selector to /css-local/userStyles.js or to individual pages or even individual elements on a page. YOU WILL NOT BE ABLE TO change any of the files inside the css/ folder but you can add your own overrides to userStyles.css.

If you need special text styles or need to control the positioning of content-specific elements, add those to the userStyles file.

css/allBrowsers.css contains most of the styles used. These include the pseudo-class selectors, and the styles that define the structure of the page, including most of the navBar.

A few Internet Explorer-specific styles are included in includes/headContent.htm, using a conditional comment to hide them from all other browsers. These were unavoidable, since IE still has some unique differences. These override their counterparts in allBrowsers.css.

css/print.css removes the Navbar when printing to make the document fit the page better.

css/header.css contains styles for header and footer.

css/stylesMac.css is not being used at this time.

css/styles800x600 is experimental for use with smaller screens or low resolution monitors, but is not really working well yet.


How to override a style

Let's say you wanted to change the style of all h4 elements to dark blue. In userStyles.css, add the following:

h4 {
color: #003366
}

That's all there is to it! Of course you can also create your own styles as well. userStyles.css is already included in the headContent file so it will automatically be picked up if there is anything in it.




Part 1: Features, Outline your Module

Part 2: Creating the Navigation

Part 3: Other Configuration Elements

Part 4: Start Building Your Pages

Part 5: Modifying the CSS Styles

Part 6: Branching Behavior


For more articles on scorm, web development, powerpoint and other topics, see The Designspace

Posted by emeiselm at May 12, 2007 11:35 AM

Comments

Login to leave a comment. Create a new account.