The Layout tab of the style cuts the page into sections, top to bottom. You switch them on, give them a module position and a width on the grid. This is where the structure of the site is decided; the rest is only content dropped inside.
The General group
It applies to the whole page.
Maximum site width. Left empty, Corpus's own value applies: 1140 px. A value such as 1320px widens the whole site.
Gutter and Grid gutter are two different spaces, and that is the first thing to grasp:
- the gutter separates the content from the edge of the window;
- the grid gutter separates the columns from one another.
Setting both to the same value is a choice, not an obligation.
Container. Yes: the section's content is constrained to the maximum width. No: it takes the full width of the window. This is what allows an edge-to-edge band of colour or a background image, with the text itself staying inside the reading column.
The seven sections
| Section | What it holds |
|---|---|
| Information bar | A thin band at the very top, two sides: social links, phone, opening hours. |
| Header | The logo on the left, a module position and the display button on the right. |
| Navigation | The main menu, and a search band under it. |
| Top sections | Four free rows, between the navigation and the content. |
| Content | The component, two rows of its own, and zero, one or two side columns. |
| Bottom sections | Four free rows, under the content. |
| Footer | One row, and the small print. |
Every section carries the same settings: enabled or not, Container (with the Use Global value that falls back to the general setting), a background image, and for the header and navigation, sticky at the top of the screen while scrolling.
The information bar
The thin band above the header. Two positions, topbar-left and topbar-right: social links on one side, phone, email or opening hours on the other. Fill them with Custom HTML modules.
Two positions rather than one: you decide what goes on each side, instead of depending on publishing order. An empty side does not shift the other one.
The bar only appears if one of the two sides has a published module.
It is thin by its margins, never by its text size. Corpus never goes below 16 px, here as everywhere: an unreadable phone number is not a styling detail. If the band looks tall, put less in it - do not shrink the legibility.
A paragraph in the header
A text module placed in Header 1 or Header 2 (the top row of the header, logo excluded) gets a header look by itself: a small paragraph in soft-coloured text. Links are not underlined there, and take the accent colour and the underline on hover. Icons take the accent colour. It is the place for a phone number, an email or an address.
Menus (lists) and search fields are left alone.
Hiding the left zone on phones is not done automatically: Corpus never removes information without you deciding it. To do it, enter desktop-only in the module's Module Class field (Advanced tab). It then disappears below 48 rem of width.
An area's theme and background
The information bar, the header, the navigation, the footer and the two content rows each carry two lists.
Area theme - Automatic, Always dark, Always light. "Always dark" forces dark colours on that area alone, whatever the rest of the site does and whatever the visitor chose. A dark information bar or a dark footer above light content are the two most common patterns on the web.
Everything follows: backgrounds, rules, frames, cards, down to form controls. And contrast stays guaranteed, since these are exactly the dark theme's colours, verified across all 360 hues.
Area background - Automatic, Neutral, Tinted. The same values as a band: the neutral background never moves, the tinted one derives from the site hue. The two lists combine: a navigation set to always dark and tinted takes the dark version of the tinted background.
Rows: position, width, class
A row - a top section, a bottom section, a column - is set with three fields:
Position. Which of the 21 module positions this row displays. The field offers the list; see The 21 positions.
Width. In twelfths of the grid. A module on 8 and the next on 4 share the row two thirds / one third. The auto value lets the space distribute itself.
The count must add up. Twelve twelfths per row. If you set
8and6, the second column wraps to the next line - that is not a fault, it is the grid doing what it was asked.
Classes. Three groups of choices, and they are radio buttons: a band has one background, one theme and one display mode.
- Background - Neutral (
section--alt) never moves whatever the site's hue; Tinted (section--teinte) derives from it. - Theme - Always dark or Always light, as for the areas described above.
- Display: Hidden on phones (
desktop-only) or Phones only (mobile-only). See The positions, § Hiding content on phones, and read the caveat there before using it.
The three groups are independent and combine freely. The class name appears as a tooltip when you hover its label.
Building a landing page
A landing page is a single page you go through by scrolling: several stacked sections, and a navigation that follows. Corpus builds it from its ordinary module bands - there are no special positions to learn.
The three settings
- On the menu item, Page Display tab, Page Class field: write
landing. That word is what triggers the anchor navigation. A landing page is decided page by page, never for the whole site.
- Name your bands. Theme Customizer, Layout tab, each band has an Id field. That is what becomes the anchor:
our-missionsgives#our-missions.
- Give each band a title - the Title field just below. That title becomes the link's wording in the navigation.
What you get
A column of dots against the right edge of the screen, one per section. The dot for the section you are in is filled and larger; on hover or from the keyboard, the section name unfolds beside it.
It disappears below 62 rem wide: on a phone the margin no longer exists and the navigation would sit on top of the content. You go through the page by scrolling, which is the natural gesture on that format.
A band with no title is ignored. This is not an oversight: the title is the link's wording. Without it a screen reader would announce "link, hash top-a", which tells nobody anything. The template does not invent a name out of nothing.
A section shorter than a tenth of the screen never activates. Tracking happens on the middle band of the screen; a very short band can cross it without ever occupying it. This is a known limitation.
A page made of bands only. You can switch off the Content section in the style used by the landing page: the bands then carry all the content. Corpus places them, from the first top section to the last bottom section, in the main region of the page. The "Skip to main content" link leads there, and Joomla's messages show above the first band.
The stamps that go with it
The Hero family in the stamp list holds five page openings: visual on the left, on the right, centred with or without a visual, and text with a side column. The Grille, Images, FAQ and Appel families supply the rest of the sections. See Writing in Corpus, § The blocks.
The Content section, its rows and its columns
Two side columns, each with its position, its side and its width. They vanish on their own when no module is published in them: an empty column takes no space, the content widens.
The side is read against the content: column 1 sits on the left, column 2 on the right, and either one moves across without the other following. Nothing stops you putting both on the same side, which used to be the only choice available.
On a small screen the columns stack below the content whatever their side: a phone has no left, and the article comes first.
That is why you should not reason in "screen width" when setting up a page. The component adapts to the room the columns leave it.
And two rows of its own: the content top row and bottom row, positions main-top and main-bottom. That is what sets them apart from a top or bottom section, and it is their whole point:
A section takes the full page width. A content row stays inside the component's column, above or below it, whatever side columns are published. An alert banner, a reminder, a sign-up form belong there and stay aligned with the article.
They carry their own title, its level and a description, like sections do. One detail that matters: this row lives inside the content, below the component's own title. An h2 is nearly always right there, and an h1 nearly always wrong - the component already produces one, and a page must have only one.
They switch off with the Content section: a row of the content does not exist without content.
These two positions are Cassiopeia's, in the same place and with the same meaning. A site migrating from Cassiopeia finds its modules there without republishing anything.
Modules in a column are framed
Both side columns render their modules with Corpus's frame. Top and bottom sections do not: their modules come out bare, and you choose their style in the module itself. See Content modules.
A module title can be an h1
In a module, the Header Tag field (Advanced tab) sets the level of the title. A module title set to h1 takes the size of an h1, as on a home page whose title is carried by a module. Levels h2 to h6 keep the size of an h4, so the side columns of existing sites do not change.
Use only one h1 per page. If the article title already carries one, keep h2 or higher for your modules.
A default-value trap
If your site was built with a version of Corpus earlier than 1.44, check the maximum width: the inherited value could be 1420px instead of the expected empty value. An already saved style keeps what it had; clearing the field brings it back in line.
Up to date for Corpus 2.1.704.