Getting Started

Find help getting up and running with the PimaOnline ThemePack.

Quick Start

The easiest way to get started with our templates is to copy the code for the Starter Template and paste it into your course files.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/css/themes/cards/styles.css">
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/scripts2.js" defer></script>
<title>Course Introduction</title>
</head>
<body>
  <header class="header">
    <img src="https://via.placeholder.com/1920X600" alt="">
  <div class="text-container">
    <h1>Course Introduction</h1>
    <p>Effective writing is a vital skill...</p>
  </div>
  </header>
  <div id="content-wrapper">
    <div class="content-body">
      <h2>Welcome to [course name here]</h2>
      <p>This course will...</p>
    </div>
  </div>
  <footer>
    <div id="footer">
      <p class="text-center toggle-footnotes">[Show Footnotes]</p>
      <div class="footnotes">
        <p>Writing is not just about expressing ideas but also about shaping them in a way that resonates with readers...</p>
        <ul>
          <li>Understand the importance of...</li>
          <li>Practice clear and...</li>
        </ul>
      </div>
    </div>
  </footer>
</body>
</html>

Manual Setup

For a more custom approach, follow these steps to manually install the template system.

CSS

Include the stylesheet by copying the code below and adding it in <head> before all other stylesheets.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/css/themes/cards/styles.css">

JS

Include the scripts2.js file by adding the following code in <head> immediately after the stylesheets.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/scripts2.js" defer></script>

Community

The PimaOnline ThemePack is maintained by the PimaOnline Web Design department. Questions, bug reports, or suggestions may be forwarded appropriately.