Certica Products

Managing Stylesheets

Updated Apr 06, 2021

A Stylesheet in ItemLogic is a CSS (Cascading Style Sheet). A CSS helps define font, size, color, spacing, border and location of HTML information on a web page. It is a good idea to have some familiarity with cascading style sheets, in general, before venturing to use them in ItemLogic. However, this document provides you with some examples to get you started.

Using stylesheets, publishers can extend the look and feel of their content beyond the range of styles natively supported by ItemLogic. Stylesheets are also a great way to enforce consistent formatting preferences across entire banks of assessment content. By creating a stylesheet, you define HTML styles that either:

  • Add new styles to use in your items or passages, or
  • Override the formatting for built-in styles.

Example

For example, you can create a stylesheet that defines a new style called "Author" that makes the text 12pt. in size, Arial font, bold, centered, and red. The stylesheet would contain lines such as the following:

1  .passage_author
2  {
3  font-size:12pt;
4  font-family:Arial;
5  font-weight:bold;
6  text-align:center;
7  color:#8B0000;
8  } /* editor:Author;p;passage_author */

(Details about the syntax are provided in the section below titled, "Creating a New Stylesheet.")

With these lines in a stylesheet, you'll have “Author” as a new style available in the Styles drop-down menu within the item and passage text editors. In the image below, you can see the Styles drop-down menu, as it appears in the top part of the passage editor. 

When you apply a style to selected text, the text takes on whatever font formatting you specified in the stylesheet. For this example, if you apply the "Author" style to text, the text becomes 12pt. in size, Arial font, bold, centered, and red.

Creating a New Stylesheet

To create a new stylesheet:

  1. Click the navigation bar Globe icon, and choose a workspace.
  2. Select the Stylesheets panel on the left.
  3. From the Actions menu, choose New Stylesheet.

Provide a Title and Description for the Stylesheet.

Click Create Stylesheet. The stylesheet is listed.

Click on the Stylesheet.

From the Edit menu, choose Edit Stylesheet.

Enter as many lines of CSS code as desired for styling. Most CSS styling is supported. Use the syntax as outlined in the following example, which defines a new class/style for passage subtitles:

Line 1 Uses the syntax .[name], where name is the name of the class/style. (In this example, the new class/style is called “passage_subtitle”.)
Line 2   Begins the declaration block.
Lines 3 - 6 Declarations for four properties/values for the class. (The text font should be 12pt, Times font, bold, and center-aligned.)
Line 7  Closes the declaration block with } and is followed by a space .
Then information for the ItemLogic editor is provided, using the following syntax:
} /* editor:[name];[element];[name of the class] */
Where:
/* marks the beginning and is followed by a space
name is a name for the item or passage editor to use in the Styles drop-down menu
element is the type of element tag to affect (e.g., div, p, span, etc.)
name of the class is the class name as defined in Line 1;
*/ marks the end and is preceded by a space
  1. Add any additional lines to create new styles or make changes to built-in styles. See “Built-In Styles” (below) for a list of the available built-in styles and what they control, as well as an example.
  2. Click Submit when you are finished editing the stylesheet.

Enabling and Activating the Stylesheet

To make the stylesheet available for use in any Item Bank:

  1. Click the navigation bar Globe icon, and choose a workspace.
  2. Select the Stylesheets panel.
  3. To make stylesheet apply to all item banks, click the box for "Active."
  4. Click “Enabled.” 
  5. Click Save.

Next, activate the stylesheet for any item banks with which you want to use it. 

To activate the stylesheet for an item bank:

  1. Select a specific item bank from your dashboard or click on the top navigation bar Item Bank icon, and choose an item bank.
  2. Select the Stylesheets panel from the left.
  3. Click “Active.” 

Item or passage authors can now use the styles defined in the stylesheet. Authors and editors can edit passages or items and select styles from either the Normal drop-down menu (for built-in styles) or the Styles drop-down menu (for new styles).

Note: Additional built-in styling is accessible by the Formatting tab of the passage text editor. See Formatting Passage Text more information on those styles, and refer to "Extended Formatting for Passage Text" (below) for details on controlling those with a stylesheet.

Built-In Styles

Some paragraph tags are built-in to the passage editor:

Name Code
Heading 1 h1
Heading 2 h2
Heading 3 h3
Heading 4 h4
Heading 5 h5
Heading 6 h6
formatted pre
address address
Normal (DIV) div

These are available using the formatting drop-down menu in the text editor:

To control a paragraph tag with the stylesheet, reference it using its "code" and provide font specifications. Here is an example for formatting “Heading 1”:

h1
{
font-weight:bold;
text-align:left;
font-family:calibri;
color:#01426A;
font-size:22pt;
}

Display of Items

To control the appearance of "Normal" item text in item preview, reference the class item. For example:

.item
{
font-size:12pt;
font-family: Times;
font-weight: normal;
}

Extended Passage Formatting Options

If your group has access to extended formatting options (see Formatting Passage Text), you may control the built-in formatting tags referenced by those options (Poetry, Reference: Inline, Reference: Block, Footnote, Footnotes).

Code Formatting Name Controls
ilogic-poetry_number Poetry Poetry stanza numbers
ilogic-poetry_line Poetry Poetry line
ilogic-poetry_stanza Poetry Poetry stanza lines
ilogic-inline_label Reference: Inline Number labels
ilogic-inline_text Reference: Inline Text within block
Ilogic-block_label Reference: Block Paragraph
ilogic-block_text Reference: Block Text within the paragraph
ilogic-footnote_number Footnote Superscripted footnote number within text
ilogic-footnote_word Footnote Footnote word within text
ilogic-footnote_block Footnotes Footnote paragraph at end of page
ilogic-footnote_block_number Footnotes Superscripted footnote reference number
ilogic-footnote_block_definition Footnotes Footnote definition text
ilogic-footnote_block_word Footnotes Footnote referenced word

Sample Stylesheet

Refer to the sample stylesheet below for ideas on customizing styles for the extended formatting options.  

.ilogic-footnote_number
{
font-weight:bold;
font-size:14pt;
}
.ilogic-footnote_word
{
font-style:italic;
font-color:red;
}
.ilogic-footnote_block
{
font-size:10pt;
}
.ilogic-footnote_block_word
{
font-style:italic;
font-weight:bold;
}
.ilogic-footnote_block_number
{
font-weight:bold;
}
.ilogic-footnote_block_definition
{
font-style:normal;
}
.ilogic-poetry_number
{
width:2em;
}
.ilogic-poetry_line
{
font-size:20pt;
}
.ilogic-poetry_stanza
{
margin-right:6em;
}
.ilogic-inline_label
{
font-weight:bold;
font-size:14pt;
}
.ilogic-inline_text
{
font-size:12pt;
}
.ilogic-block_label
{
vertical-align: top;
width: .25in;
}
.ilogic-block_text
{
text-indent: 0.25in;
margin-top:0em;
margin-bottom:1em;
}

 Deleting a Stylesheet

To completely remove a stylesheet:

  1. Click the navigation bar Globe icon, and choose a workspace.
  2. Select the Stylesheets panel.
  3. Click the selection box on the left side of the stylesheet to remove. 
  4. From the Actions menu, choose Remove Selected. A message asks you if you are sure you wan to remove the selected stylesheets. 
  5. Click Delete. The stylesheet is deleted.

Deactiving a Stylesheet

If a stylesheet is active, it is being used for all item banks within the workspace. However, If you don't want to use the stylesheet for all item banks, you can "deactivate" it. To deactivate a stylesheet for a workspace:

  1. Click the navigation bar Globe icon, and choose a workspace.
  2. Select the Stylesheets panel.
  3. Click the selection box on the left side of the stylesheet to deactivate.
  4. From the Actions menu, choose Deactivate Selected. The check mark disappears from the "Active" column.
  5. Click Save.

Disabling a Stylesheet

If a stylesheet is enabled, it is available to be used in any item banks within the workspace. If you don't want a stylesheet to be used for any item bank and you don't want to delete it, you can "disable" the stylesheet. To do so:

  1. Click the navigation bar Globe icon, and choose a workspace.
  2. Select the Stylesheets panel.
  3. Click the selection box on the left side of the stylesheet to disable.
  4. From the Actions menu, choose Disable Selected. The check mark disappears from the "Enabled" column.
  5. Click Save.
Previous Article Creating Custom Tags
Next Article Managing Committees