From d7fe5d268d48f788b72c44032189f99ce1591719 Mon Sep 17 00:00:00 2001 From: albertlast Date: Sun, 23 Aug 2026 23:05:14 +0200 Subject: [PATCH] Gives the profile its own stylesheet index.css carried a "profile section" of about three hundred lines that every page in the forum downloaded. This moves the part of it that only the profile draws into a profile.css, loaded from SMF\Actions\Profile\Main beside the profile.js it already loads there. Only part of it moved, and which part is the whole question. That section is not profile-scoped despite its heading: the post list it holds is the same one the moderation centre, personal messages, recent posts and search all render, the board picker is shared with search, and the paid subscription, theme picker and theme settings blocks belong to the admin centre. It also opens with a bare `dl { overflow: auto; }`, which is a global rule that happens to sit under the heading. Moving the section wholesale would have unstyled all of those. So every selector was resolved against the templates that actually emit it, matching class and id attributes rather than bare words, and a rule moved only when the leftmost element of every one of its branches is something no template but the profile emits. Thirty-five rules moved on that test and thirty stayed. Two rules went out entirely rather than moving: .sizefix and .topic .mod_icons name classes that nothing in Themes/ or Sources/ emits at all. Verified against a running forum: the computed colours, box metrics, display, float, margins, padding, font size and alignment of every element on twenty-two pages - all eleven profile areas, plus the five that share those selectors, the two admin pages that own the blocks left behind, the reminder, the memberlist, the stats and the board index - before and after. 7260 elements, no differences. Signed-off-by: Mathias Alberts Signed-off-by: albertlast --- Sources/Actions/Profile/Main.php | 1 + Themes/default/css/index.css | 169 ------------------------- Themes/default/css/profile.css | 203 +++++++++++++++++++++++++++++++ 3 files changed, 204 insertions(+), 169 deletions(-) create mode 100644 Themes/default/css/profile.css diff --git a/Sources/Actions/Profile/Main.php b/Sources/Actions/Profile/Main.php index dcebc03b17..a83fbd3cdb 100644 --- a/Sources/Actions/Profile/Main.php +++ b/Sources/Actions/Profile/Main.php @@ -675,6 +675,7 @@ public function execute(): void Utils::$context['template_layers'][] = 'profile'; + Theme::loadCSSFile('profile.css', ['minimize' => true, 'order_pos' => 2], 'smf_profile'); Theme::loadJavaScriptFile('profile.js', ['defer' => false, 'minimize' => true], 'smf_profile'); // Right - are we saving - if so let's save the old data first. diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 1bb917ffce..2f2e70e177 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -2489,137 +2489,11 @@ dl { overflow: auto; } -/* The basic user info on the left */ -#basicinfo { - width: 20%; - float: left; -} -#detailedinfo { - width: 79.5%; - float: right; -} -#basicinfo > * { - margin-bottom: 3px; -} -#basicinfo h4 { - font-size: 1.4em; - font-weight: normal; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - word-wrap: break-word; /* IE fallback */ - overflow-wrap: break-word; -} -#basicinfo h4 span.position { - font-size: 0.8em; - display: block; -} #basicinfo img.avatar, dl.settings img.avatar { display: block; max-width: 160px; height: auto !important; } -#basicinfo ul { - list-style-type: none; -} -#basicinfo .icon_fields li { - display: block; - float: left; - margin-right: 5px; - height: 20px; -} -#basicinfo #userstatus { - display: block; - clear: both; -} -#basicinfo #userstatus img { - vertical-align: middle; -} -#detailedinfo dl, #tracking dl { - clear: right; - overflow: auto; - margin: 0 0 18px 0; - padding: 0 0 15px 0; - border-bottom: 1px #ccc solid; -} -#detailedinfo dt, #tracking dt { - width: 35%; - margin: 0 0 3px 0; - font-weight: bold; - color: var(--profile-dt-color); -} -#detailedinfo dd, #tracking dd { - width: 65%; - float: left; - margin: 0 0 3px 0; -} -#detailedinfo dl.settings:last-of-type { - border-bottom: 0; -} -#detailedinfo dt.clear { - width: 100%; -} -#personal_picture { - display: block; - margin-bottom: 4px; -} -#avatar_server_stored div { - float: left; -} -#avatar_upload { - overflow: auto; -} -#smileypr { - margin-left: 10px; -} -.edit_avatar_img { - margin: 0 0 1em; -} - -/* Activity by time */ -#activitytime { - margin: 6px 0; -} -.activity_stats { - margin: 10px 0; -} -.activity_stats li { - width: 4.16%; - float: left; - text-align: center; -} -.activity_stats li span { - display: block; - border: 1px solid var(--activitystats-border-color); - border-left: none; - border-right: none; - background: var(--activitystats-bg); -} -.activity_stats li.last span { - border-right: none; -} -.activity_stats li .generic_bar { - height: 100px; - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin: 0 auto; -} -.activity_stats li .generic_bar span { - position: absolute; - top: -1000em; - left: -1000em; -} - -.profile_pie { - background: url(../images/stats_pie.png); - background-size: auto 20px; - float: left; - height: 20px; - width: 20px; - margin: 0 12px 0 0; - text-indent: -1000em; -} /* View posts */ .topic .time { @@ -2659,10 +2533,6 @@ dl { height: auto !important; height: 80px; } -.topic .mod_icons { - text-align: right; - margin-right: 12px; -} #creator dt { width: 40%; @@ -2674,10 +2544,6 @@ dl { .centericon { vertical-align: middle; } -.sizefix { - width: 16px; - height: 16px; -} /* The board picker's title bar is one element now, the summary of a details. /* It carries both bar classes, and .titlebg comes later in this file with a @@ -2745,41 +2611,6 @@ dl { background: var(--picktheme-selected-bg); } -/* Signature preview */ - -#preview_signature, #preview_signature_display { - width: 100%; - overflow: hidden; -} - -/* Issue a warning */ -#warn_body { - width: 100%; - font-size: 0.9em; -} -#warn_temp { - font-size: smaller; -} - -/* Warning level bar */ -.warning_level { - text-align: center; - font-weight: bold; - max-width: 250px; -} -.warning_level.none .bar { - background-color: var(--warninglevel-bg_none); -} -.warning_level.watched .bar { - background-color: var(--warninglevel-bg_watched); -} -.warning_level.moderated .bar { - background-color: var(--warninglevel-bg_moderated); -} -.warning_level.muted .bar { - background-color: var(--warninglevel-bg_muted); -} - /* Styles for the statistics center. ------------------------------------------------- */ #statistics .roundframe { diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css new file mode 100644 index 0000000000..c54074e9dd --- /dev/null +++ b/Themes/default/css/profile.css @@ -0,0 +1,203 @@ +/* Styles for the profile. +/* +/* Loaded by SMF\Actions\Profile\Main only when a profile is being shown, so +/* nothing here reaches any other page and none of it needs to. +/* +/* What lives here is what only the profile draws. Plenty of the profile's +/* appearance still comes from index.css, because the profile shares it: the +/* post list it renders is the same one the moderation centre, personal +/* messages, recent posts and search render, the board picker is shared with +/* search, and the paid subscription, theme picker and theme settings blocks +/* belong to the admin centre rather than to a member looking at their own +/* page. Those stay where every page can see them. */ + +/* The basic user info on the left */ +#basicinfo { + width: 20%; + float: left; +} + +#detailedinfo { + width: 79.5%; + float: right; +} + +#basicinfo > * { + margin-bottom: 3px; +} + +#basicinfo h4 { + font-size: 1.4em; + font-weight: normal; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + word-wrap: break-word; /* IE fallback */ + overflow-wrap: break-word; +} + +#basicinfo h4 span.position { + font-size: 0.8em; + display: block; +} + +#basicinfo ul { + list-style-type: none; +} + +#basicinfo .icon_fields li { + display: block; + float: left; + margin-right: 5px; + height: 20px; +} + +#basicinfo #userstatus { + display: block; + clear: both; +} + +#basicinfo #userstatus img { + vertical-align: middle; +} + +#detailedinfo dl, #tracking dl { + clear: right; + overflow: auto; + margin: 0 0 18px 0; + padding: 0 0 15px 0; + border-bottom: 1px #ccc solid; +} + +#detailedinfo dt, #tracking dt { + width: 35%; + margin: 0 0 3px 0; + font-weight: bold; + color: var(--profile-dt-color); +} + +#detailedinfo dd, #tracking dd { + width: 65%; + float: left; + margin: 0 0 3px 0; +} + +#detailedinfo dl.settings:last-of-type { + border-bottom: 0; +} + +#detailedinfo dt.clear { + width: 100%; +} + +#personal_picture { + display: block; + margin-bottom: 4px; +} + +#avatar_server_stored div { + float: left; +} + +#avatar_upload { + overflow: auto; +} + +#smileypr { + margin-left: 10px; +} + +.edit_avatar_img { + margin: 0 0 1em; +} + +/* Activity by time */ +#activitytime { + margin: 6px 0; +} + +.activity_stats { + margin: 10px 0; +} + +.activity_stats li { + width: 4.16%; + float: left; + text-align: center; +} + +.activity_stats li span { + display: block; + border: 1px solid var(--activitystats-border-color); + border-left: none; + border-right: none; + background: var(--activitystats-bg); +} + +.activity_stats li.last span { + border-right: none; +} + +.activity_stats li .generic_bar { + height: 100px; + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin: 0 auto; +} + +.activity_stats li .generic_bar span { + position: absolute; + top: -1000em; + left: -1000em; +} + +.profile_pie { + background: url(../images/stats_pie.png); + background-size: auto 20px; + float: left; + height: 20px; + width: 20px; + margin: 0 12px 0 0; + text-indent: -1000em; +} + +/* Signature preview */ + +#preview_signature, #preview_signature_display { + width: 100%; + overflow: hidden; +} + +/* Issue a warning */ +#warn_body { + width: 100%; + font-size: 0.9em; +} + +#warn_temp { + font-size: smaller; +} + +/* Warning level bar */ +.warning_level { + text-align: center; + font-weight: bold; + max-width: 250px; +} + +.warning_level.none .bar { + background-color: var(--warninglevel-bg_none); +} + +.warning_level.watched .bar { + background-color: var(--warninglevel-bg_watched); +} + +.warning_level.moderated .bar { + background-color: var(--warninglevel-bg_moderated); +} + +.warning_level.muted .bar { + background-color: var(--warninglevel-bg_muted); +}