[Logo for Hugo OldNew Mashup Theme Homepage]
OldNew Mashup

Reference Guide

Reference guide for using OldNew Mashup theme

Table of Contents

Front Matter

The following items in the front matter metdata are handled specially by this theme (in addition to the params further below which are for theming / layout):

titleUsed as the tab title (title in ‘head’ section in the html), as well as the H1 heading that is displayed in the page body as the page title.
dateBesides the usual Hugo usage, this is used in the article header and is displayed below categories
copyrightDisplayed as the article copyright in the page footer
descriptionDisplayed below date as brief summary of the article
licensesa list (in YAML list format) of (copyright) license which apply to the article
categoriesa list of categories (taxonomy) to which the page belongs. Displayed below the article title (title metadata above)
tagsA list of tags (taxonomy) which the page has. Displayed after the end of the article.

In your site configuration file add JSON as an output type, and in set the site parameter enable_search = true.

E.g. for a config.toml you might have:

baseURL = 'https://example.com/'
languageCode = 'en-ca'
languageLang = 'en'
title = 'Site Title'
enableGitInfo = true
theme = 'new-oldnew-mashup'

  home = ["HTML", "JSON", "RSS"]

  enable_search = true

Enabling Licenses Taxonomy

In your site configuration file add the licenses taxonomy. E.g. for config.toml you might have:

baseURL = 'https://example.com/'
languageCode = 'en-ca'
languageLang = 'en'
title = 'Site Title'
enableGitInfo = true
theme = 'new-oldnew-mashup'

  category = "categories"
  tag = "tags"
  license = "licenses"

Site Params

Set these in your site configuration file in the params section. E.g. for a config.toml you might have:

baseURL = 'https://example.com/'
languageCode = 'en-ca'
languageLang = 'en'
title = 'Site Title'
enableGitInfo = true
theme = 'new-oldnew-mashup'

  siteid = 'Site Title/ID'
  licenses = ['CC-BY-4.0']
  copyright = '© 2018 Daniel F. Dickinson'
  default_background_color = '#aba'
  default_text_color = '#454'
  GitHubRepo = 'cshoredaniel/new-oldnew-mashup'

and so on.

Miscellaneous Site Parameters

siteidAppears in the site badge as the site identifier
licensesLicenses for the site as a whole (needs the matching taxonomy to exist for the colophon link); should be a list
copyrightThe copyright year and holder name
site_badge_graphicpath to graphic for the site badge
site_badge_graphic_alt_textALT text for graphic for the site badge
splash_images_bundlepath to a leaf bundle containing the splash screen images and descriptions (see below)
enable_searchsee above
time_typeslist of page ‘.Type’s that should be listed in time order

Site or Page Params

The following may be defined as Site Params (see above) — in that case the parameter becomes the site-wide default — or as a Page param (which applies only to a individual page).

nobaseurlDon’t use BaseURL even if one is set in the config
nofooterlinksDon’t display the footer links section
nocontactDon’t display contact footer link
nositemapDon’t display sitemap footer link
nofootertaxonomiesDon’t display taxonomyTerms (with links) in footer
noprivacyDon’t display privacy statement page link
noaccessibilityDon’t display accessibility statement page link
nofeedlinkDon’t display RSS feed for page
nogetsourceDon’t display ‘Get Source’ link to git repo
novalidatorDon’t display link to W3.org Unicorn validator for the current page
footersectionWhere to find pages linked from the footer (see below)
rssfeedlinktrue means include a link to RSS feeds for a list page when an RSS feed exists for that page
validatorlinktrue means include a link which applies the W3.org Unicorn validator to the page
nocolophonDon’t display the colophon (page information, e.g. license and document dates)
nolicenseDon’t display page license
nodocdateDon’t have document date box (and hoversite)
GitHubRepoIf present a link to the repository may appear in the footer
norbarDon’t display right sidebar
noptocDon’t display article Table of Contents
not_in_listsList (type) of lists / menus from which to exclude the current page (see below)

This theme will looks for the following pages at either /footersection/<page> or /siteentry/<page> (if footersection is not defined). If the page exists the footer will link the page.

accessibilityAccessibility Statement / Information
privacyPrivacy Statement / Information
contactSite Contact Form
sitemapHuman readable site map

Lists / Menus from which pages may be excluded

List / MenuDescription
sitesite menu (e.g. topbar menubar)
section-navsection menu (sidebar section navigation)
local-navlinear traversal bar (Prev|Up|Next)
sectioncurrently unused
sidebar-newsnews items section of sidebar
sidebar-recentrecently modified item section of sidebar
sidebar-eventsevents section of sidebar
sitemapHuman readable site map

Theme Styling Parameters

sans_font_stackDefault sans-serif font selection preferences
serif_mono_font_stackDefault serif font selection preferences
mono_font_stackDefault monospace font selection preferences
default_background_imageditto (default no image)
default_text_colordefault colour for any text not otherwise styled
default_link_colordefault colour for non-visited (new) links
default_visited_link_colordefault colour for visited links
default_hover_background_colordefault background colour for hovered over links
default_hover_colordefault text colour for hovered over links
default_pre_background_colordefault background for pre-formatted text boxes
default_pre_text_colordefault colour for any pre-formatted text not otherwise styled
default_pre_link_colordefault colour for pre-formatted non-visited (new) links
default_pre_visited_link_colordefault colour for pre-formatted visited links
default_pre_hover_colordefault preformatted text colour for hovered over links
default_inline_pre_background_colordefault background for inline pre-formatted text boxes
default_inline_pre_text_colordefault colour for any inline pre-formatted text not otherwise styled
default_inline_pre_link_colordefault colour for inline pre-formatted non-visited (new) links
default_inline_pre_visited_link_colordefault colour for inline pre-formatted visited links
default_inline_pre_hover_colordefault inline pre-formatted text colour for hovered over links
default_separator_colordefault colour for separating lines / borders
default_container_borderdefault border for ‘containers’ (e.g. boxes) not including colour. E.g. ‘4px solid’
default_container_border_colordefault colour for ‘containers’ (e.g. boxes) borders
default_container_background_colordefault background for ‘containers’ (e.g. boxes)
default_container_text_colordefault colour for any text in ‘containers’ (e.g. boxes)
default_container_row_background_colordefault background color for highlighted text in ‘containers’ (e.g. boxes)
sidebar_box_borderdefault border for sidebar boxes not including colour. E.g. ‘4px solid’
sidebar_box_border_colordefault colour for sidebar boxes borders
sidebar_box_background_colordefault background for sidebar boxes
sidebar_box_text_colordefault colour for any text in sidebar boxes
sidebar_box_row_background_colordefault background color for highlighted text in sidebar boxes
sidebar_menu_entry_row_background_colorbackground color for rows containing menu items in a sidebar box
toc_box_borderdefault border for table-of-contents boxes notable-of-contentst including colour. E.g. ‘4px solid’
toc_box_border_colordefault colour for table-of-contents boxes botable-of-contents
toc_box_background_colordefault background for table-of-contents boxes
toc_box_text_colordefault colour for any text in table-of-contents boxes
toc_box_row_background_colordefault background color for highlighted text in table-of-contents boxes
doc_date_borderdefault border for document date boxes notable-of-contentst including colour. E.g. ‘4px solid’
doc_date_border_colordefault colour for document date boxes botable-of-contents
doc_date_background_colorbackground colour for the document date information colophon hover block
doc_date_text_colordefault colour for any text in document date boxes
default_top_bar_background_colordefault background for top bar
default_top_bar_box_shadow_colordefault colour for top bar box shadow
default_top_bar_border_colordefault colour for top bar border
default_top_bar_hover_border_colordefault colour for top bar item being hovered over
default_top_bar_hover_box_shadow_colordefault box shadow colour for top bar item that is hovered over
site_badge_graphic_background_colorbackground colour for site badge graphic row
menubar_box_shadow_colorcolour for menubar box shadow
menubar_top_level_border_colorcolour for top-level menubar border
menubar_submenu-background_colorbackground colour for menubar submenu
local_nav_text_colorlocal navbar colour for any text not otherwise styled
local_nav_link_colorlocal navbar colour for non-visited (new) links
local_nav_hover_background_colorlocal navbar background colour for hovered over links
local_nav_hover_colorlocal navbar text colour for hovered over links
homepage_title_text_colorhomepage title colour for any text not otherwise styled
splash_screenshot_frame_bordercolour of simulated photograph border
splash_screenshot_image_borderinner border color for homepage ‘splash’ screenshots
splash_screenshot_outside_borderborder colour for the outside of hompage ‘splash’ screenshots
splash_screenshot_box_shadowbox shadow colour for homepage ‘splash’ screenshots
search_results_text_colorsearch results colour for any text not otherwise styled
search_results_link_colorsearch results colour for non-visited (new) links
search_results_visted_colorsearch results colour for visited links
search_results_hover_colorsearch results text colour for hovered over links
default_table_borderdefault border for tables not including colour. E.g. ‘4px solid’
default_table_border_colordefault colour for tables’ borders
default_table_background_colordefault background for tables
default_table_text_colordefault colour for any text in tables
default_table_even_row_background_colordefault background color for even rows in tables
default_table_heading_background_colordefault background color for heading row(s) in tables

These pages are a longer lists on a regular page of the sidebar items such as ‘Recent Changes’, ‘News’, and ‘Events’.

These have a few elements to make their magic.

  • A shortcode called summary-list-expansion which takes two parameters. The first parameter is the type of page (that it matches pages .Type) or “recent” (meaning all regular pages may match). The second (optional) parameter is the number of pages to display in the summary list (e.g. you can show the first 5 or 25 instead of the default 15).
  • The creation of a content page that uses the shortcode. For example:
 ## The 30 most recently published events
 {{\< summary-list-expansion "events" 30 \>}}
  • In the sidebar there is a conditional that checks for the site for the following parameters:
recent_changesCheck for the existance of the page with this path (e.g. /siteentry/recent-changes and display from all regular pages
recent_newsLikewise but only for “news” pages
recent_eventsLikewise but only for “events” pages
  • If page exists at the specified path, then the header (e.g. “News”) in the sidebar links to the page at the specified path.

Generic Styles Available

Class NameDescription
clearCauses HTML following to be rendered on the next line (never beside) the element with this class
labelElement is intended as a label for following text (but is not necessarily in a form, so not label element
rollup-hoversiteWhen this a block named with this class is hovered over, rollup-element gets display: block instead of display: none
rollup-elementIs hidden (display:none) by default, but when a rollup-hoversite classed element is hovered over it is displayed (as block)
semiblockFor paragraphs that need an initial indent
semiblockwrapperFor a wrapper around paragraphs that need an initial indent on every paragraph
start-para-picFor a an image intended to be at the start of a paragraph of text (but done as a div because p elements can’t contain block-level elements)

Splash Screen bundle

  • Needs to be a content bundle

Sample _index.md for splash_images_bundle

title: Splash Images Resources
  - src: splash-demo-image1.jpg
      dlinkfile: /siteentry/splash-images/rock-garden-description
      alt: \[Photo of a rock garden in bloom, slightly rotated left with a whie border\]
  - src: splash-demo-image2.jpg
      dlinkfile: /siteentry/splash-images/grain-elevator-mural-description
      alt: \[Photo of a large outdoor mural on a grain elevator, seen through trees and hydro wires\]
  - src: splash-demo-image3.jpg
      dlinkfile: /siteentry/splash-images/thecshore-homepage-description
      alt: \[The C Shore Website Screenshot\]
  - src: splash-demo-image4.jpg
      dlinkfile: /siteentry/splash-images/thecshore-about-page-description
      alt: \[The C Shore About Page Screenshot\]
  • Notice the resources map
    • Contains a src which is an image in the splash_images_bundle
    • Contains a params map which contains:
      • dlinkfile: URL of the description of the image (for accessibility).
      • alt: ALT text for the image (also for accessibility).

Sample Landing (Home) Page metadata

title: "Landing page tab title"
date: 2018-01-06T14:23:41-05:00
copyright: © 2019 Daniel Dickinson
  - CC-BY-4.0
author: Somebody Someone
description: Description of the site
categories: [hugo, theme, html, css, test]
aside: >
  An aside. Having an aside is optional. Handy for a  quirky comment on a personal site.
asidefooter: >
  Footer to the main body of the this page (above the footer that appears on every page).
oneliner: A short oneliner for the site
subliner: And a longer sub-oneliner for the site.
  • The special bits are aside, asidefooter, oneliner, and suboneliner .

See Also