A SCORM-Ready Template Tutorial Series, Part 1: Setting up the module
<< Part 1E. Building Pages | Part 1G. Branching Behaviors >>

---

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 should not 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 includes/headContent.htm file so it will automatically be picked up if there is anything in it.

---

A SCORM-Ready Template Tutorial Series, Part 1: Setting up the module
<< Part 1E. Building Pages | Part 1G. Branching Behaviors >>

---