Skip to content

[3.0] Theme split (wave 3, part 7) — Rebuild the footer as a flex row #9375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
live627 merged 4 commits into from
Aug 8, 2026
Merged

[3.0] Theme split (wave 3, part 7) — Rebuild the footer as a flex row #9375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6fa05ff
Moves the top bar into the header as a user panel
albertlast Aug 5, 2026
a83d69f
Opens the user menus towards the start of the header
albertlast Aug 5, 2026
f6d3d31
Makes the main menu a band across the page
albertlast Aug 5, 2026
a91391b
Rebuilds the footer as a flex row
albertlast Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 14 additions & 20 deletions Sources/Tasks/ExportProfileData.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,52 +146,46 @@ class ExportProfileData extends BackgroundTask
</h1>
</div>
<div id="wrapper" class="content_wrapper">
<div id="upper_section">
<div id="inner_section">
<div id="inner_wrap">
<div class="user">
<time>
<xsl:attribute name="datetime">
<xsl:value-of select="@generated-date-UTC"/>
</xsl:attribute>
<xsl:value-of select="@generated-date-localized"/>
</time>
</div>
<hr class="clear"/>
</div>
<div id="inner_wrap">
<div class="user">
<time>
<xsl:attribute name="datetime">
<xsl:value-of select="@generated-date-UTC"/>
</xsl:attribute>
<xsl:value-of select="@generated-date-localized"/>
</time>
</div>
<hr class="clear"/>
</div>

<xsl:call-template name="content_section"/>

</div>
</div>
<div id="footer">
<div class="inner_wrap content_wrapper">
<div class="content_wrapper">
<ul>
<li class="floatright">
<li class="copyright">
<xsl:value-of select="$forum_copyright" disable-output-escaping="yes"/>
</li>
<li class="helplinks">
<a>
<xsl:attribute name="href">
<xsl:value-of select="concat($scripturl, '?action=help')"/>
</xsl:attribute>
<xsl:value-of select="$txt_help"/>
</a>
<xsl:text> | </xsl:text>
<a>
<xsl:attribute name="href">
<xsl:value-of select="concat($scripturl, '?action=help;sa=rules')"/>
</xsl:attribute>
<xsl:value-of select="$txt_terms_rules"/>
</a>
<xsl:text> | </xsl:text>
<a href="#top">
<xsl:value-of select="$txt_go_up"/>
<xsl:text> &#9650;</xsl:text>
</a>
</li>
<li class="copyright">
<xsl:value-of select="$forum_copyright" disable-output-escaping="yes"/>
</li>
</ul>
</div>
</div>
Expand Down
28 changes: 12 additions & 16 deletions Themes/default/MaintenanceTemplate.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,28 +61,24 @@ public static function header(): void
// Have we got a language drop down - if so do it on the first step only.
if (!empty(Maintenance::$languages) && \count(Maintenance::$languages) > 1 && Maintenance::getCurrentStep() == 0) {
echo '
<div id="upper_section">
<div id="inner_section">
<div id="inner_wrap">
<div class="news">
<form action="', Maintenance::getSelf(), '" method="get">
<label for="maintenance_language">', Lang::getTxt('maintenance_language', file: 'Maintenance'), ':</label>
<select id="maintenance_language" name="lang_file" onchange="location.href = \'', Maintenance::getSelf(), '?lang_file=\' + this.options[this.selectedIndex].value;">';
<div id="inner_wrap">
<div class="news">
<form action="', Maintenance::getSelf(), '" method="get">
<label for="maintenance_language">', Lang::getTxt('maintenance_language', file: 'Maintenance'), ':</label>
<select id="maintenance_language" name="lang_file" onchange="location.href = \'', Maintenance::getSelf(), '?lang_file=\' + this.options[this.selectedIndex].value;">';

foreach (Maintenance::$languages as $lang => $name) {
echo '
<option', isset($_SESSION['lang_file']) && $_SESSION['lang_file'] == $lang ? ' selected' : '', ' value="', $lang, '">', $name, '</option>';
<option', isset($_SESSION['lang_file']) && $_SESSION['lang_file'] == $lang ? ' selected' : '', ' value="', $lang, '">', $name, '</option>';
}

echo '
</select>
<noscript><input type="submit" value="', Lang::getTxt('action_set', file: 'Maintenance'), '" class="button"></noscript>
</form>
</div><!-- .news -->
<hr class="clear">
</div><!-- #inner_wrap -->
</div><!-- #inner_section -->
</div><!-- #upper_section -->';
</select>
<noscript><input type="submit" value="', Lang::getTxt('action_set', file: 'Maintenance'), '" class="button"></noscript>
</form>
</div><!-- .news -->
<hr class="clear">
</div><!-- #inner_wrap -->';
}

echo '
Expand Down
124 changes: 84 additions & 40 deletions Themes/default/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -909,7 +909,13 @@ a[class^="mobile_generic_menu_"] {
display: none;
}

/* A band of its own across the page, under the header. */
#main_menu {
background: var(--mainmenu-bg);
border-color: var(--mainmenu-border-color);
border-style: var(--mainmenu-border-style);
border-width: var(--mainmenu-border-width);
box-shadow: var(--mainmenu-box-shadow);
margin: 0 0 4px 0;
}

Expand Down Expand Up @@ -1217,27 +1223,17 @@ html[lang="el-GR"] .inline_mod_check {
}

/* The framing graphics */
/* The top bar. */
#top_section {
border-bottom: 1px solid #bbb;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
background: #fff;
clear: both;
}
#top_section::after {
content: "";
display: block;
clear: both;
}
#top_info {
padding: 5px 0;
line-height: 1.3em;
max-width: 100%;
}
/* These hang off #top_info, which is positioned. It sits at the end of the
/* header, so they have to open towards the start or they run off the edge
/* of the screen on a narrow window. */
#pm_menu, #alerts_menu, #profile_menu {
left: 0;
right: 0;
padding-right: 10px;
inset-inline: auto 0;
padding-inline-end: 10px;
}
#profile_menu_top > img.avatar {
height: 18px;
Expand All @@ -1259,17 +1255,39 @@ html[lang="el-GR"] .inline_mod_check {
#languages_form {
margin: 0 0 0 10px;
}
/* The logo and slogan. */
/* The header. Full width, with its contents lined up with the rest of the
/* page by the wrapper inside it. */
#header {
padding: 2px 2px 12px 2px;
background: var(--header-bg);
border-color: var(--header-border-color);
border-radius: var(--header-border-radius);
border-style: var(--header-border-style);
border-width: var(--header-border-width);
box-shadow: var(--header-box-shadow);
margin: 0;
min-height: var(--header-height);
padding: .5em .2em;
}
#header .content_wrapper {
align-items: center;
display: flex;
align-items: flex-end;
gap: .5em;
justify-content: space-between;
min-height: var(--header-height);
}
#header::after {
content: "";
display: block;
clear: both;
}
/* Everything about the current user sits at the end of the header, stacked. */
.user_panel {
align-content: space-between;
display: inline-grid;
flex: 1;
gap: .5em;
justify-content: flex-end;
}
/* The main title. */
h1.forumtitle {
font-size: 1.8em;
Expand Down Expand Up @@ -1298,25 +1316,15 @@ img#smflogo {
}
/*
/* The user info, news, etc.*/
#upper_section {
padding: 2px 2px 0 2px;
}
#inner_section {
padding: 12px 10px 2px 10px;
border-radius: 6px 6px 0 0;
}
#inner_section::after {
content: "";
display: block;
clear: both;
}
/* The upper_section, float the two each way */
/* The clock and the news line, one at each end. The padding was on the
/* section that used to wrap this. */
#inner_wrap {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #bbb;
margin-bottom: 12px;
padding: 12px 10px 2px 10px;
}
.user {
padding: 0 4px 8px 4px;
Expand Down Expand Up @@ -1373,7 +1381,7 @@ ul li.greeting {
border-width: var(--navigatesection-border-width);
box-shadow: var(--navigatesection-box-shadow);
margin-block: .5em .75em;
margin-inline: 0;
margin-inline: 10px;
padding: 0;
}
.navigate_section ol {
Expand Down Expand Up @@ -1469,15 +1477,51 @@ ul li.greeting {
/* Footer is now full-width by default. */
/* The footer with copyright links etc. */
#footer {
background: var(--footer-bg);
border-color: var(--footer-border-color);
border-style: var(--footer-border-style);
border-width: var(--footer-border-width);
box-shadow: var(--footer-box-shadow);
color: var(--footer-color);
flex: none;
font-size: var(--footer-font-size);
margin: 4em 0 0 0;
min-height: var(--footer-height);
padding: 10px 0;
background: #3e5a78;
border-top: 3px solid #b2b6bd;
flex: none;
}
#footer li, #footer p, #footer a {
font-size: 0.9em;
color: #fff;
#footer li, #footer p {
color: var(--footer-color);
}
#footer a {
color: var(--footer-link-color);
font-weight: var(--footer-link-font-weight);
text-decoration: var(--footer-link-text-decoration);
text-shadow: var(--footer-link-text-shadow);
}
#footer a:hover {
color: var(--footer-link-color_hover);
font-weight: var(--footer-link-font-weight_hover);
text-decoration: var(--footer-link-text-decoration_hover);
text-shadow: var(--footer-link-text-shadow_hover);
}
#footer a:focus {
color: var(--footer-link-color_focus);
font-weight: var(--footer-link-font-weight_focus);
text-decoration: var(--footer-link-text-decoration_focus);
text-shadow: var(--footer-link-text-shadow_focus);
}
/* Copyright at one end, help links at the other. */
#footer ul {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 1.25em .25em;
justify-content: space-between;
}
#footer li.helplinks {
display: flex;
flex-wrap: wrap;
gap: .75em;
}
#footer li.copyright {
display: block;
Expand Down Expand Up @@ -4159,9 +4203,9 @@ h3.profile_hd::before,
/* Background of buttons */
.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,
#top_section, .quickbuttons > li,
.quickbuttons > li,
.quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus,
.inline_mod_check, .popup_window, #inner_section, .post_options ul,
.inline_mod_check, .popup_window, .post_options ul,
.post_options ul a:hover, .post_options ul a:focus, .dropmenu .viewport .overview a:hover, .dropmenu .viewport .overview a:focus {
background: #fff; /* fallback for some browsers */
background-image: linear-gradient(#e2e9f3 0%, #fff 70%);
Expand Down
2 changes: 1 addition & 1 deletion Themes/default/css/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@
.content_wrapper {
width: 100%;
}
#upper_section, #inner_section, #content_section {
#content_section {
border-radius: 0;
}
#boardindex_table .stats {
Expand Down
6 changes: 0 additions & 6 deletions Themes/default/css/rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,6 @@ img#smflogo {
padding-left: 0;
text-align: left;
}
#upper_section .news {
float: right;
}
.navigate_section .unread_links {
float: left;
}

/* Profile drop it needs reverse on RTL */
#profile_menu_top > img.avatar {
Expand Down
40 changes: 40 additions & 0 deletions Themes/default/css/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,46 @@
/** Layout **/
--wrapper-width: 1200px;

/** Footer **/
--footer-bg: var(--primary-color-700);
--footer-border-color: transparent;
--footer-border-style: solid;
--footer-border-width: 0;
--footer-box-shadow: none;
--footer-color: hsl(0, 0%, 96%);
--footer-font-size: 0.85em;
--footer-height: 35px;

/** Footer Links **/
--footer-link-color: #fff;
--footer-link-color_focus: var(--footer-link-color_hover);
--footer-link-color_hover: #f8f8f8;
--footer-link-font-weight: 400;
--footer-link-font-weight_focus: var(--footer-link-font-weight_hover);
--footer-link-font-weight_hover: var(--footer-link-font-weight);
--footer-link-text-decoration: none;
--footer-link-text-decoration_focus: var(--footer-link-text-decoration_hover);
--footer-link-text-decoration_hover: underline;
--footer-link-text-shadow: none;
--footer-link-text-shadow_focus: none;
--footer-link-text-shadow_hover: none;

/** Main Menu **/
--mainmenu-bg: linear-gradient(#e2e9f3 0%, #fff 70%);
--mainmenu-border-color: #bbb;
--mainmenu-border-style: solid;
--mainmenu-border-width: 0 0 1px 0;
--mainmenu-box-shadow: none;

/** Header **/
--header-bg: #fff;
--header-border-color: transparent;
--header-border-radius: 0;
--header-border-style: solid;
--header-border-width: 0;
--header-box-shadow: none;
--header-height: 80px;

/** HTML **/
--html-bg: #3e5a78;

Expand Down
Loading
Loading