Individual Screen Style Settings

If you wish to change the screen size or colours, please see the Styling Screens guide from Smart Sparrow.

Using a Cascading Style Sheet (CSS) with your Lesson

Smart Sparrow allows you to apply custom styling to your lessons using CSS. This requires you to have a CSS file stored somewhere outside the Smart Sparrow lesson to which the lesson can link. This file will store style information that can be read by the lesson in order to apply styling to desired elements.

If you are unfamiliar with CSS but wish to learn, you can find a detailed CSS guide at W3Schools.

Creating a CSS file

  1. On your computer, open Notepad (on Windows) or TextEdit (on MacOS). If you have a different program capable of editing CSS files (e.g. Dreamweaver), use that instead.
  2. Create a new file. Note that if you're using TextEdit on MacOS, you will need to change the file from Rich Text to Plain Text before saving (Format > Make Plain Text).
  3. Save this file as "style.css" to your computer (note that you will be changing the file extension to .css instead of .txt or .rtf)

A basic, Griffith-branded CSS file is available below to get you started.

Download Griffith-branded CSS file (staff only)

Storing your CSS file

As noted above, a CSS file needs to be stored somewhere and then linked to from the Smart Sparrow lesson. As most Smart Sparrow lessons will be associated with a Learning@Griffith site, the Learning@Griffith Content Collection is an ideal place to store such files. The Content Collection folder for an organisation site would be ideal because these sites persist across multiple trimesters (and years, even) unlike course sites that will eventually be archived or removed. The steps below describe how to upload your CSS file to the Content Collection.

  1. Browse to your course or (preferably) organisation site in Learning@Griffith
  2. Ensure Edit Mode is turned on
  3. Expand the Content Collection item in the left menu
  4. Click the first item that appears within the Content Collection sub-menu. This is usually the course/organisation code and links to the Content Collection folder for the current course/organisation
  5. Once inside the Content Collection folder for this course/organisation, choose Upload > Upload Files

    Upload button in Content Collection

  6. Click Browse My Computer
  7. Locate the style.css file you created above and select it, then choose Open
  8. Click Submit to upload the file
  9. Locate the uploaded file in the Content Collection file listing and hover your mouse over it. A chevron icon will appear next to it.

    Chevron icon next to file in Content Collection

  10. Click the chevron icon to expand the context menu
  11. Choose Permissions from the menu

    Content Collection file context menu

  12. When the Manage Permissions page opens, click Permit Anyone from the options near the top of the screen

    Permit Anyone option on a Content Collection file

  13. On the Add Public page, under Set Permissions, ensure the Read box is ticked and the others are unticked

    Set Permissions option on a Content Collection file

  14. Click Submit. This will allow the CSS file to be read by people and services external to Learning@Griffith. In this situation, we want to allow Smart Sparrow to see the CSS file.
  15. Return to the Content Collection folder that contains the CSS file and click the chevron icon next to the file again.
  16. From the context menu, choose 360° View
  17. Find the Permanent URL for this file. This will be a shorter URL with a code on the end in the format of xid-XXXXXXXX_X
  18. Copy and paste this Permanent URL into a file on your computer for later reference. It will be needed in the next set of steps below.

Linking to your CSS file from your Lesson

  1. Open your lesson in the Authoring Tool
  2. Open the Lesson tab

    Lesson Tab

  3. Open Lesson Appearance and paste the Permanent URL to your CSS file (from above) into the Custom CSS Url field

    Lesson Appearance Menu

Styling elements within your Lesson

Various elements within Smart Sparrow will accept a "CSS Class", for example:

  • Screens: via Screen > Screen Style > CSS Class
  • Layers: via Layer > Layer Style > CSS Class
  • Buttons: via Selection > CSS Class (when the button is selected)

Most other elements can have a CSS class applied to them by selecting them and entering a class into the "CSS Class" field under the "Selection" tab at the top of the screen.

The class name you apply to these fields needs to have a corresponding rule in your CSS file.

As an example, try the following:

  1. Go to the first screen in your lesson
  2. Open the Screen tab and choose Screen Style
  3. In the CSS Class field, enter "myscreen"
  4. Save your lesson in Smart Sparrow
  5. Open the CSS file you created earlier on your computer. You will need to open the local copy on your computer, then re-upload it to the Content Collection after changes are made.
  6. Enter the following into the file:
    .myscreen { background-color: red; }
  7. Save the file
  8. Return to the Content Collection folder in your Learning@Griffith site where the CSS file was uploaded
  9. Locate the CSS file and click the chevron icon next to it
  10. Select Overwrite File from the context menu
  11. Browse for the CSS file you just updated on your computer and click Submit. You have just replaced the old CSS file with the updated copy that contains the new "myscreen" style you set above.
  12. Return to your Smart Sparrow lesson and Preview the screen to which you applied the "myscreen" class. The background of the page should be red if the CSS class has applied correctly.

Use this method to apply styling to other elements, screens and layers in your lesson. Other style attributes