Modifying CSS Styles

You can modify the CSS3 styles included in the QNX CAR platform by using Compass and Sass.

Overview

If you want to customize the CSS files on your system, you can start by inspecting the HTML source for each application so you can see each CSS file that is being loaded. The Web Inspector tool is ideal for this. For details, see the "Analyzing page resources" section in the "Debugging Web Apps" chapter of the HTML5 Developer's Guide, which is in the documentation set for the QNX SDK for Apps and Media.

Note: The modification of CSS styles applies only to the reference applications.

You can directly access any CSS (.scss) files that reside on your target. For example, you'll find the base settings for the fonts and colors of the Midnight Blue HMI theme here:

/apps/common/themes/midnightblue/base.scss

Setting up Compass and Sass

To modify existing .scss files or to create .scss files of your own, we recommend using the following:
  • Compass—an open-source CSS authoring framework
  • Sass—a CSS extension language, which gets installed when you install Compass
Note: In order to install and use Compass, you need to have Ruby already installed on your host computer. If you don't have Ruby installed, you'll find an installer (for Windows) here:

http://rubyinstaller.org/

To install Compass on your Windows host:
  1. Run the following command in a Command Prompt window:

    gem install compass

    The above command will install the Sass extension language as well.

  2. To verify that compass is installed, run this command:

    compass version

  3. To add Compass project files to your working directory, run the following command:

    compass init

    Note: For more Compass commands, see the following:

    http://compass-style.org/help/tutorials/command-line/

In your working directory you should now see a file called config.rb, which you can use to configure the output for your project. For more information on configuring Compass, see the following:

http://compass-style.org/help/tutorials/configuration-reference/

Where to go for more information

The Compass site has a set of tutorials covering configuration, commands, best practices, and more:

http://compass-style.org/help/tutorials/

The Sass site includes a comprehensive set of reference documentation covering variables, mixins, and so on:

http://www.sass-lang.com/documentation/file.SASS_REFERENCE.html

The following post also has some useful information on Compass and Sass:

Syntactically Awesome Stylesheets: Using Compass in Sass