A SCORM-ready template: Part 5 - Modifying the CSS styles
May 12, 2007
Tutorials | Elearning | Javascript | SCORM | Web Building

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.

Ads by Google

Posted by ellen at May 12, 2007 07:04 PM

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.

Ads by Google

Ads by Google

 RSS   |   Contact Me

Ads by Google