Skip to content

[3.0] Theme split (wave 3, part 4) — Give the width-limited wrappers a shared class - #9372

Open
albertlast wants to merge 4 commits into
SimpleMachines:release-3.0from
albertlast:3.0/theme-content-wrapper
Open

[3.0] Theme split (wave 3, part 4) — Give the width-limited wrappers a shared class#9372
albertlast wants to merge 4 commits into
SimpleMachines:release-3.0from
albertlast:3.0/theme-content-wrapper

Conversation

@albertlast

Copy link
Copy Markdown
Collaborator

Description

Part 4 of wave 3 of the #7933 split. Stacked on #9371, #9370 and #9369 — the diff of this one is its last commit.

The rule that keeps the page centred named four wrappers in a single selector:

#top_section .inner_wrap, #wrapper, #header, #footer .inner_wrap {
	max-width: 1200px;
	margin: 0 auto;
	width: 90%;
}

Anything else wanting the same treatment had to be added to that list, and the same list is repeated in responsive.css for the narrow override. It becomes a .content-wrapper class instead, and the width becomes --wrapper-width. This is what the rest of the header work hangs off: once the wrappers are collapsed, the elements that need the width limit are not the ones named above.

Still no visual change. This is the second of the two structural steps, and the reparenting itself comes after it.

Three templates, not one

Themes/default/MaintenanceTemplate.php and the XSLT in Sources/Tasks/ExportProfileData.php each build their own markup but load this same index.css, so their #header, #wrapper and .inner_wrap elements were being centred by that selector too. They get the class as well; without it the upgrade and maintenance pages and every exported profile would lose the width limit and run the full width of the window.

The maintenance page's own #footer has no .inner_wrap and so was never centred by this rule. That is left as it is.

Verification

Board index captured on the parent branch and again here, at two viewport widths so that both sides of the 720px breakpoint are exercised — the wide one is where max-width: 1200px bites and the narrow one is where responsive.css overrides it to width: 100%. The whole DOM is walked, recording tag, getBoundingClientRect and 25 computed properties per element, with max-width among them since that is the property that would break if the class failed to apply:

index  (innerWidth 1401): .content-wrapper 0 -> 4    116 elements, 0 style/geometry differences
narrow (innerWidth  701): .content-wrapper 0 -> 4    116 elements, 0 style/geometry differences

compared 6960 values
style/geometry differences: 0

composer lint cannot run against the two files with classes in this environment — the custom SMF/section_comments fixer calls array_first(), which needs PHP 8.5, and the container is on 8.4. php -l passes on all three files and CI covers the rest.

Issues References (Fixes|Related|Closes)

Related to #7933.

The remaining theme parts are built on two nine-step ramps derived from a
single hue each, rather than on individually chosen colours. Adding them
ahead of those parts keeps each of them to the tokens it actually
introduces.

Nothing references the ramps yet and no existing token is repointed at
them, so this changes nothing that is rendered.

Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
The linktree becomes a nav landmark wrapping an ordered list, since the
trail is ordered, and carries schema.org BreadcrumbList microdata so a
search engine can read it. Layout moves from floats to flexbox, which
makes the two rtl.css rules for it redundant.

Keeps the HTML entity dividers rather than the icon font used on the
theme branch. Nothing in the default theme uses Font Awesome yet, and
the bundled local copy has no @font-face rule, so a forum with
fontawesome_source set to local would get no divider at all.

Keeps emitting the .last class as well, so anything styling it still
works, even though :last-child now covers it.

Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
The header, main menu, main content area and footer become header, nav,
main and footer instead of div. That gives assistive technology real
landmarks to navigate by, rather than a page that is one undifferentiated
region.

Every selector for these is by id, so nothing in the stylesheets or the
scripts has to change, and all four elements are block level already.

Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
The rule that keeps the page centred named four different wrappers in one
selector, so anything else that wanted the same treatment had to be added
to that list. It becomes a class instead, and the width becomes a token.

The maintenance and upgrade pages and the profile export each build their
own markup but load this stylesheet, so their wrappers get the class too.
Without it they would lose the width limit.

Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
@albertlast
albertlast force-pushed the 3.0/theme-content-wrapper branch from 490c726 to 4be2d75 Compare August 5, 2026 05:56
@albertlast albertlast mentioned this pull request Aug 5, 2026
@jdarwood007 jdarwood007 added this to the 3.0 Alpha 5 milestone Aug 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants