Simple Pages and Content Classes

The theme designs the pages of the Simple Pages plugin, and gives you content classes: ready-made designs for parts of a page, such as a lead paragraph, a callout, a pull quote or a call to action, that you apply with a class in the page's HTML. They work in Simple Pages, in the text of exhibit blocks and in the home page's welcome text.

How Simple Pages look#

• A page with a parent shows breadcrumbs (Home / Parent / Page) above its title.
• A section menu appears beside a page that has child pages, or a parent: the section's top page and its published pages, nested as in Simple Pages (their Parent and Order), with the current page marked. On phones the menu comes before the text.
• Any other page is a reading page: one centered column at reading width, with slightly larger text. Galleries and card grids in it take the page's full width.
• A page chosen as the home page (Appearance › Navigation › Select a Homepage) shows its text across the page, without a title, breadcrumbs or menu. See Home page.

Shortcodes work in every page, and in exhibit text and the welcome text: see Shortcodes at the end of this page.

Before you start: the editor and the HTML filter#

Two things in Omeka change the HTML you write:

• The rich-text editor. On a Simple Page, untick Use HTML editor? for pages built with content classes, and write the HTML in the plain text box: the editor rewrites HTML when it saves, and can drop or rearrange the markup a content class needs. Where there is no such choice (exhibit text, the welcome text), click the editor's Source code button and paste the HTML there.
• Omeka's HTML filter. With Settings › Security › Enable HTML Filtering on (the default), Omeka keeps only the elements and attributes listed under Allowed HTML Elements and Allowed HTML Attributes when you save. The default lists keep div, p, span, headings, lists, links, blockquote, strong and em with their class: every content class below works with them, except the banner and the pictures with captions, which need images and <figure>. The filter also knows only HTML 4, so it removes <figure>, <figcaption>, <nav>, <section>, <time> and attributes such as aria-label even when you add them to the lists. The BlockSuite plugin fixes this: its option Keep page markup when Omeka filters HTML (on by default, under Plugins › BlockSuite › Configure) teaches the filter these HTML5 elements and attributes and adds them, with img, img.src and img.alt, to the allowed lists, so every example on this page survives the filter. Without BlockSuite, add img to Allowed HTML Elements and img.src, img.alt to Allowed HTML Attributes for the banner, write pictures with captions with div and p instead of figure and figcaption, or use the [file] shortcode for pictures.

The filter also applies to the theme's text settings on Configure Theme.

Content classes#

Each example can be pasted as it is; change the text and addresses. Paths such as /items/browse are on your own site; if Omeka lives in a folder (https://example.org/archive/), start them with the folder (/archive/items/browse).

Lead paragraph: v-lead#

The opening paragraph of a page, in larger type. Use one per page, at the top.

<div class="v-lead">
  <p>For fifty-six winters, Tincup Mountain was where Harlow went when it snowed.</p>
</div>

Callout: v-callout#

A short note set apart in a tinted box: a closure, a content warning, a tip. Keep it to a few sentences.

<div class="v-callout">
  <p><strong>The reading room is closed for the holidays.</strong> It reopens on January 6.</p>
</div>

Pull quote: v-pullquote#

A quotation in large type, from an interview, a letter or a visitor. When the quote has more than one paragraph, the last one is set small, as the attribution.

<div class="v-pullquote">
  <blockquote>
    <p>“My mother sewed leather onto the palms of my mittens, and I was the envy of the whole hill.”</p>
    <p>Dot Kimura, ski school director</p>
  </blockquote>
</div>

Two columns: v-columns#

Text in two columns on wide screens and one on phones: a timeline of dates, short facts, a list of contacts. A heading always stays with the text after it.

<div class="v-columns">
  <h3>1938</h3>
  <p>The Harlow Ski Club opens a rope tow on December 18.</p>
  <h3>1952</h3>
  <p>The Tincup Lodge opens, and the Tin Lizzie T-bar starts running.</p>
  <h3>1963</h3>
  <p>The Silver Spoon double chair is dedicated.</p>
</div>

Card: v-card-box#

A framed box for something that stands on its own: opening hours, how to visit, a summary.

<div class="v-card-box">
  <h3>Visiting the archive</h3>
  <p>The reading room is open Tuesday to Friday, 10 am to 4 pm. Ask at the front desk.</p>
</div>

Call to action: v-cta#

A centered heading, a sentence and buttons. The links in a paragraph of their own become buttons: the first one solid, the next ones outlined. Use it at the end of a page, to say where to go next.

<div class="v-cta">
  <h2>Hear the people who ran the hill</h2>
  <p>Three oral histories, recorded between 2004 and 2019.</p>
  <p><a href="/voices">Listen to their stories</a> <a href="/dates">Dates to remember</a></p>
</div>

Put the buttons' links in their own paragraph: a link inside the sentence would become a button too.

Divider: v-divider#

A small ornament between parts of a page, drawn in the theme's style, or an extra space.

<div class="v-divider v-divider--ornament"><span></span></div>

<div class="v-divider v-divider--space"></div>

Link cards: v-toc-cards#

A list of links shown as cards: the pages of a section, the parts of a long story, the collections to explore.

<div class="v-toc-cards">
  <ul>
    <li><a href="/rope-tow-years">The Rope Tow Years, 1938–1951</a></li>
    <li><a href="/lodge-and-lizzie">The Lodge and the Lizzie, 1952–1962</a></li>
    <li><a href="/silver-spoon">The Silver Spoon, 1963–1969</a></li>
  </ul>
</div>

With BlockSuite's Keep page markup option on (see above), write <nav class="v-toc-cards" aria-label="In this section"> instead of the div: screen readers then announce the list as a named menu. Without it, the HTML filter removes nav and aria-label.

Banner: v-hero#

A picture with a large heading, text and a button on it, with a dark scrim under the words so they stay readable. Use it at the top of a page, such as a Simple Page used as the home page. Needs img in the HTML filter's allowed lists (BlockSuite's option adds it; see above).

<div class="v-hero">
  <img class="v-hero__image" src="/files/fullsize/your-image.jpg" alt="">
  <div class="v-hero__content">
    <h2 class="v-hero__title">Fifty-six winters on one small hill</h2>
    <p class="v-hero__text">Posters, trail maps and lift tickets from Tincup Mountain, 1938–1994.</p>
    <p><a class="v-button" href="/items/browse">Explore the collection</a></p>
  </div>
</div>

The picture is decoration here (alt=""): say what matters in the heading and text. To find an image's address, open the file's page and copy the address of its image.

Pictures with captions: v-figures#

Pictures with captions in a grid: one picture fills the width, two sit side by side, more form a grid in the shape of the theme's cards. Needs img, figure and figcaption to get through the HTML filter: BlockSuite's Keep page markup option takes care of it (see above).

<div class="v-figures">
  <figure>
    <img src="/files/fullsize/first-image.jpg" alt="The Silver Spoon chair on opening day, skiers lined up at the bottom.">
    <figcaption><a href="/items/show/19">Silver Spoon double chair</a>, 1963</figcaption>
  </figure>
  <figure>
    <img src="/files/fullsize/second-image.jpg" alt="Night skiers under the lights on Lindqvist Run.">
    <figcaption><a href="/items/show/24">Night skiing</a>, 1970</figcaption>
  </figure>
</div>

Describe each picture in its alt text; the caption says what it is and links to its item.

Card grid: v-cards#

A grid for the cards that shortcodes print, such as [items] or [featured_collections]. Without it, the cards of a shortcode sit side by side in rows; with it, they fill the page's width like a browse page.

<div class="v-cards">[items num=8 sort=added order=d]</div>

Colored panels: section-*#

A panel in one of the theme's colors, for a call to action or a group of links. Text, links and buttons inside take colors that read on it.

<div class="section-primary section-contained">
  <div class="v-cta">
    <h2>Got a box of photos in the garage?</h2>
    <p>Lend it to us: we scan everything and give it back the same week.</p>
    <p><a href="/lend">How lending works</a></p>
  </div>
</div>

Add section-contained for padding and rounded corners.

Shortcodes#

Shortcodes show records from your collection as the theme's cards. Put each on a line of its own, or inside a v-cards grid.

Plugins add their own: Shortcode Carousel's [carousel], [featured_carousel] and [recent_carousel], Geolocation's [geolocation] map, and BlockSuite's [bs_search], [bs_stats], [bs_cta], [bs_items], [bs_timeline] and [bs_divider]. See Plugin integrations for how the theme shows them.

<h2>New in the collection</h2>
<div class="v-cards">[recent_items num=4]</div>
<p><a href="/items/browse">Browse all items</a></p>