Built In Styles

There are a number of styles built-in to qdex that you can utilise to alter the way that your content is displayed. Some of the styles require you to specify the style attribute of an element that you want to alter, whereas some are built-in as snippets.

Visibility Styles

Use the visibility styles collapsed and hidden to selectively show/hide content from your apps. Great for question and answer type modules, or for altering the content showed based on button press.

The collapsed style removes the entire element from the app, shifting the surrounding content to fill in the space. The hidden style covers the element, leaving a large space where the hidden content once was.

In the below example, both stacks are not visible on page load (one is hidden, the other collapsed). On button press, both stacks become visible.

<stack name="hiddenStack" style="hidden">
  <p>This stack is <i>hidden</i></p>
  <p>This stack is <i>hidden</i></p>
</stack>

<stack name="collapsedStack" style="collapsed">
  <p>This stack is <i>collapsed</i></p>
  <p>This stack is <i>collapsed</i></p>
</stack>

<button content="Show Both Stacks">
  <onClick>
    hiddenStack.Style.Visibility = "visible"
    collapsedStack.Style.Visibility = "visible"
  </onClick>
</button>

Horizontal Alignment

Change the horizontal alignment of any element (stacks, buttons, images, etc.) by using the left, center, and right styles.

<button content="Click Me" style="right">
  <onClick>
    ...
  </onClick>
</button>

You can use two or more styles at a time by listing them consecutively in the style attribute.

<image src="resources/logo.png" style="small left" />

Text Alignment

Alter how your text (i.e. paragraphs, labels) is aligned by using the centerText and rightText styles. By default, text is left-aligned.

<p>This text is left-aligned by default</p>

<p style="centerText">This text is centered</p>

<p style="rightText">This text is right-aligned</p>

Emphasize a Section

Use the highlightBox style to emphasize a section or group of ideas.

<stack style="highlightBox">
  <p>
    For eight hundred years have I trained Jedi. My own counsel will I keep on who is to be trained. A Jedi must have the deepest commitment, the most serious mind.
  </p>
</stack>

Emphasize an Equation

Use the emphasizeMath style to highlight important equations in your apps.

<stack style="emphasizeMath">
  <equation>
    $  x = a_0 + \cfrac{1}{a_1
    + \cfrac{1}{a_2
    + \cfrac{1}{a_3 + \cfrac{1}{a_4} } } } $
  </equation>
</stack>

Border

Add a border to text, images, equations, etc. using nested stacks and the borderOutside and borderInside styles.

<stack style="borderOutside">
  <stack style="borderInside">
    <p>For eight hundred years have I trained Jedi. My own counsel will I keep on who is to be trained. A Jedi must have the deepest commitment, the most serious mind.</p>
  </stack>
</stack>

Line Across Page

Add a line horizontally across the page to separate ideas. Just use a paragraph with the line style.

<p style="line">_</p>

Change the line color by updating the foreground and background colors in the line style before inserting your line.

<style name="line">
  <background color="gainsboro" />
  <foreground color="gainsboro" />
</style>

Definition

Use the definition and definitionWord styles to format important concepts in your app.

<p style="definitionWord">
  App
</p>
<p style="definition">
  A self-contained program or piece of software designed to fulfill a particular purpose; an application, especially as downloaded by a user to a mobile device.
</p>

Quote

Use the quote snippet to add a styled quote to your app. The snippet shortcut is qquote.

If you would like to change the colour of the quotation mark to be more consistent with your institution's colours, update the quotationSymbol style before you insert the quote snippet.

<style name="quotationSymbol">
  <foreground color="midnightBlue" />
</style>