Ridge Theme¶

Ridge is a theme for organisations that publish more than they sell: rescue teams, charities, clubs and community groups. The home page leads with a photograph and the organisation's own news, its blogs read as a feed, a log and a timeline, and supporters' messages sit on a thank-you wall. The shop, basket and checkout still work, in the same colours.

It is built on top of Nova (Ridge → Nova → Bootstrap template fallback), like Atelier and Pop, so every page works as soon as a site switches to it.

Site admins pick it under Admin → Shop Settings → Theme (Choosing a Theme); platform staff can also set it per site in System → Tenants → {site} → Theme (theme name Ridge).

Design principles¶

Principle	What it means on the page
Two colours, two jobs	Red is for acting: the call-to-action button, the "Latest" tag, the appeal band. Deep purple is the organisation itself: the top strip, the log band, the footer.
Condensed capitals for headings	Barlow Condensed in capitals for headings and figures, Public Sans for reading, IBM Plex Mono for dates and post references. All three are self-hosted.
The blog is the content	Three layouts for the latest-posts extension (cards, log, timeline) so one site's callouts, news and project updates each read differently.
Nothing until it is set	The header button, the tagline and the announcement strip show only once the site has written them.

What Ridge redesigns¶

Area	Highlights
Header	A thin purple strip with the site's announcement on the left and Sign in / Basket on the right, then a sticky white bar: logo and name (with an optional tagline), the menu with drop-down panels, a search link and the call-to-action button. Below 960px the menu moves into a drawer.
Content pages	`page`, `page-9-3` and `page-3-9` layouts at a 1240px width. Bootstrap cards that a site's HTML fragments put in a sidebar get Ridge's corners and buttons.
Blog	A masthead with the post's photograph under a purple wash (or a quiet tinted band without one) and a blog index of rows with date, title, description and picture. A post reads in a single column, or beside a sidebar when it has sidebar content (see below).
Latest posts	Story cards by default; log and timeline layouts per extension instance (see below).
Donations	The donation display extension as notes: the message of support, then the donor, the amount and any Gift Aid. A wall across a full-width page, a stack in a sidebar. The scrolling ticker mode still works.
Footer	Purple, with the logo, name and tagline beside the site's own footer content, then the legal lines.
Order page	Nova's order page in the organisation's purple, with the order number and date in mono capitals and the Tracking panel tinted (see On the customer's order page).

Shop, product, search, basket, checkout and account pages keep Nova's templates inside Ridge's header and footer. They take Ridge's palette, fonts and corners because Ridge re-points Nova's design tokens. Nova's standalone sign-in pages use Nova's own auth-head.

Latest posts: three layouts¶

The Latest Blog Posts extension renders story cards in Ridge. Two more layouts are chosen per extension instance with its pageTemplateOverride setting. Both are platform layouts that every Nova-based theme has (Content Management); Ridge draws them in its own look:

`pageTemplateOverride`	Layout	Suits
(empty)	Cards: picture, date, title, the start of the description	News
`extensions/blogLatestPosts/incidentLog`	A purple band: the newest post as a large picture card, the rest as rows of reference, title and date	Callouts, incidents, matches, anything numbered
`extensions/blogLatestPosts/timeline`	A dated vertical timeline, newest first, with the newest post's picture beside it when Show Images is on	Building projects, appeals, progress updates

The log layout reads a reference from the start of a post title: in 2026-83: Thorpe Cloud – Unwell walker the reference is 2026-83, the title Thorpe Cloud and the line under it Unwell walker. A title without a colon is shown whole with no reference, and one without a dash has no second line. The split is done in Java (PostTitle, on each post as titleParts); nothing else depends on the pattern.

On a page whose main section is not set to container, the log band runs edge to edge. Inside a contained section or a sidebar layout it becomes a rounded panel.

Blog posts with a sidebar¶

The blog post template has two layouts and picks one by itself:

Nothing in the post's rightSection: the article in a centred 880px reading column, with the masthead title lined up on it.
Anything in the rightSection: the article beside a sidebar (two-thirds / one-third from 1024px, stacked below that). The sidebar's last block stays in view while the article scrolls, so put the call to action last.

To give every post in a blog a sidebar, add the extensions to the rightSection of the blog's post stereotype rather than to each post. The related-posts extension shows as compact rows (picture beside date and title) in a sidebar. Nova and the classic Bootstrap theme switch layout the same way.

Settings and site text¶

The header and footer take their site-specific parts from Admin → Settings → Storefront, the same settings every theme reads (resolved for each page by StorefrontChromeInterceptor):

Setting	Where it shows in Ridge
Show Announcement Band / Announcement (`storefront-announcement-enabled`, `storefront-announcement`)	The purple strip above the header. HTML allowed; wrap a number in `<span class="rg-dial">999</span>` to mark it. With no announcement set, the older `nav.banner.message` Site Text is used.
Header Button Text / Link (`storefront-header-cta-label`, `storefront-header-cta-url`)	The red button in the header bar and the drawer. Hidden until both are set; the link must be a site path or an `http(s)`/`mailto:`/`tel:` link.
Tagline (`storefront-tagline`)	A short line under the site name in the header and footer.

The footer shows the logo, the site name and the tagline. A site that hides its name beside the logo in the header (Settings → Theme → Hide the site name next to the logo, hideSiteNameInNav) hides it in the footer too, as long as it has a logo; the logo then carries the name as its alt text.

Ridge's wording uses the platform's shared keys (nav.*, blog.*, basket.*, donation.display.*), overridable per site in Admin → Shop Settings → Site Text (/admin/shopSettings/text). The footer's legal lines are Site Text too:

Key	Default	Where it shows
`footer.disclaimer`	(empty)	First legal line in the footer: charity and company numbers, registered office.
`footer.footerText`		Second legal line.

Content blocks¶

Ridge has no blocks of its own to hand-write: it styles the platform's content extensions, so a site's content keeps working if it changes theme.

Block	Extension	In Ridge
Home page hero	`hero`, Gradient Overlay preset, with the optional `eyebrow`, `secondaryCta` and `stats` slots (Hero optional slots)	The photo under a purple wash, a red accent bar, the eyebrow with a pulsing red dot, condensed capitals and the stats strip
Appeal band	`callToAction`, style Band	Red, full width, with a hill silhouette and light buttons
Call-to-action strip	`callToAction`, style Strip	A white card, purple heading, buttons on the right
Sidebar panel	`callToAction`, style Panel	A purple card with full-width buttons
Stat card	`callToAction`, style Stat (the eyebrow is its label, the Figure its value)	A purple card with the figure in condensed capitals
Footer link columns	`menuGeneratorExtension` in the `footer` slot, Layout: Footer columns, with a footer menu's ID	Headings in small capitals over the links

Ridge draws the call to action from its own template (ridge/extensions/callToAction/main.html, the rg-appeal, rg-cta, rg-panel and rg-stat blocks in ridge.css) and restyles Nova's hero and footer-columns markup in ridge.css. The red accent words of the original hand-written hero (<em>) aren't available: a hero title is a single heading.

For developers¶

Templates: web-mvc/src/main/resources/templates/ridge/. Styles and behaviour: resources/settBuilder/themes/ridge/css/ridge.css and js/ridge.js, linked from Ridge's fragment/head.html after Nova's bdgr.css (and before the Design Brief's theme.css).
Ridge's ThemeContext points cssPath/jsPath/imagePath at Nova's folders, so Nova templates and extension scripts keep working; see Theme Resolution. It is registered by system update 103 and the initialisation data.
Icons for the chrome are in fragment/ridge-icons.html, not icons.html, so Nova templates that include fragment/icons still find every Nova icon.
Ridge's menu carries the standard data-menu-* attributes, so the admin-built menu's client-side cache is Nova's (nova/js/extensions/menuGeneratorExtension/menu.js, loaded with the extension for every theme); data-menu-theme="ridge" names Ridge's markup (Nova's says nova), so a stored copy only ever comes back into the template that made it, whatever theme the site is set to. The donation display's Rotating mode (one note swapped in at a time, pausing on hover) is the shared nova/js/donation-ticker.js, for every Nova-based theme; Ridge uses it for its Scrolling Carousel mode too, where Nova keeps its sliding carousel. ridge.js only adds the drop-downs, the drawer and the header shadow.
The log and timeline layouts are Nova's (nova/extensions/blogLatestPosts/incidentLog, timeline), overridden in ridge/ for Ridge's look. The log reads each post's titleParts (PostTitle, split in Java), not the raw title.
Fonts come from the @fontsource/barlow-condensed, @fontsource-variable/public-sans and @fontsource/ibm-plex-mono packages via web-mvc/scripts/copy-versioned-deps.js.
Render tests: RidgeContentRenderTest (the three latest-posts layouts, the blog list and the donation notes), BlogPostSidebarRenderTest (the post layout with and without a sidebar); Ridge is also in the theme lists of NoIndexTest, SiteStructuredDataHeadRenderTest and BlogTemplatesMicrodataTest.