Module talk:Sidebar

Text and/or other creative content from this version of Module:Sidebar was copied or moved into incubator:Module:Wp/nod/Sidebar with this edit. The former page's history now serves to provide attribution for that content in the latter page, and it must not be deleted as long as the latter page exists.

To-do list for Module:Sidebar: /Archive 5#Nomobile use #Make tables into divs instead /Archive 5#Width auto and similar sidebars

Archives

Archive 1 Archive 2 Archive 3 Archive 4 Archive 5 Archive 6

This page has archives. Sections older than 90 days may be automatically archived by Lowercase sigmabot III when more than 4 sections are present.

__DTSUBSCRIBEBUTTONDESKTOP__{"headingLevel":2,"name":"h-Jon_(WMF)-20240802182200","type":"heading","level":0,"id":"h-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css.-20240802182200","replies":["c-Jon_(WMF)-20240802182200-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css."],"text":"Urgent: Please fix this template for printed content Module:Sidebar\/styles.css.","linkableTitle":"Urgent: Please fix this template for printed content Module:Sidebar\/styles.css."}-->

Urgent: Please fix this template for printed content Module:Sidebar/styles.css.

__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-Jon_(WMF)-20240802182200","type":"heading","level":0,"id":"h-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css.-20240802182200","replies":["c-Jon_(WMF)-20240802182200-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css."]}}-->

__DTLATESTCOMMENTTHREAD__{"id":"c-Jon_(WMF)-20240802182200-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css.","timestamp":"20240802182200"}__-->__DTCOMMENTCOUNT__1__-->__DTAUTHORCOUNT__1__-->

__DTSUBSCRIBEBUTTONMOBILE__{"headingLevel":2,"name":"h-Jon_(WMF)-20240802182200","type":"heading","level":0,"id":"h-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css.-20240802182200","replies":["c-Jon_(WMF)-20240802182200-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css."],"text":"Urgent: Please fix this template for printed content Module:Sidebar\/styles.css.","linkableTitle":"Urgent: Please fix this template for printed content Module:Sidebar\/styles.css."}-->

Firstly, apologies for writing in English if this is not your first language (this is an automated message).

This template has been detected as one of 436 pages using styles that break the page when printed when the user is using dark mode. The fix is very straightforward - all your styles relating to dark mode must be scoped to. Since there is a high risk of this templates being copied to other wikis it is important this notice is acted on ASAP.

To fix this:

1. Update `@media (prefers-color-scheme: dark` to `@media screen and (prefers-color-scheme: dark`
2. Wrap any styles relating to `html.skin-theme-clientpref-night` in `@media screen`

If this message has not been acted on in 7 days, this will be fixed by an automated script. Thank you for your help fixing this important issue.

For any questions feel free to ask them at phab:T369874.

Jon (WMF) (talk) 18:22, 2 August 2024 (UTC) on behalf of the web team.[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20240802182200","author":"Jon (WMF)","type":"comment","level":1,"id":"c-Jon_(WMF)-20240802182200-Urgent:_Please_fix_this_template_for_printed_content_Module:Sidebar\/styles.css.","replies":[]}}-->

__DTSUBSCRIBEBUTTONDESKTOP__{"headingLevel":2,"name":"h-MKFI-20241015131800","type":"heading","level":0,"id":"h-Missing_CSS_variable?-20241015131800","replies":["c-MKFI-20241015131800-Missing_CSS_variable?"],"text":"Missing CSS variable?","linkableTitle":"Missing CSS variable?"}-->

Missing CSS variable?

__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-MKFI-20241015131800","type":"heading","level":0,"id":"h-Missing_CSS_variable?-20241015131800","replies":["c-MKFI-20241015131800-Missing_CSS_variable?"]}}-->

__DTLATESTCOMMENTTHREAD__{"id":"c-MKFI-20241020083300-Jdlrobson-20241019162100","timestamp":"20241020083300"}__-->__DTCOMMENTCOUNT__6__-->__DTAUTHORCOUNT__2__-->

__DTSUBSCRIBEBUTTONMOBILE__{"headingLevel":2,"name":"h-MKFI-20241015131800","type":"heading","level":0,"id":"h-Missing_CSS_variable?-20241015131800","replies":["c-MKFI-20241015131800-Missing_CSS_variable?"],"text":"Missing CSS variable?","linkableTitle":"Missing CSS variable?"}-->

On row 385 there is the line :cssText('color: var(--color-base)'), but the --color-base CSS variable doesn't seem to be defined anywhere? MKFI (talk) 13:18, 15 October 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241015131800","author":"MKFI","type":"comment","level":1,"id":"c-MKFI-20241015131800-Missing_CSS_variable?","replies":["c-MKFI-20241017112000-MKFI-20241015131800"]}}-->

@Jdlrobson: I see that you added this. Where is the CSS variable defined? And why is this an inline style declaration instead of a class? Now dependent templates have problems changing text colors without using !important CSS declarations. MKFI (talk) 11:20, 17 October 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241017112000","author":"MKFI","type":"comment","level":2,"id":"c-MKFI-20241017112000-MKFI-20241015131800","replies":["c-Jdlrobson-20241018180000-MKFI-20241017112000"]}}-->

The variable is defined in the mediawiki design system. It is active on the default skins of Vector 2022 and Minerva and is essential to make this template work in dark mode. It is not defined on opt in skins such as Monobook and Vector and there it will be ignored (we can add a fallback if that is useful and less confusing).

this link should have lots of helpful context. Let me know if you have any follow up questions. 🐸 Jdlrobson (talk) 18:00, 18 October 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241018180000","author":"Jdlrobson","type":"comment","level":3,"id":"c-Jdlrobson-20241018180000-MKFI-20241017112000","replies":["c-MKFI-20241019081000-Jdlrobson-20241018180000"]}}-->

@Jdlrobson: this module is used a base for multiple other templates. Your change overrides derived template style declarations and caused for example Template:Zoroastrianism sidebar to display black-on-red text which made it difficult to read instead of white-on-red as it should. This module has a stylesheet. Does the color variable really need to be an inline style declaration instead of a line in .sidebar-list-title class? MKFI (talk) 08:10, 19 October 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241019081000","author":"MKFI","type":"comment","level":4,"id":"c-MKFI-20241019081000-Jdlrobson-20241018180000","replies":["c-Jdlrobson-20241019162100-MKFI-20241019081000"]}}-->

Presumably it could be added via a class. When dark mode was rolled out, for templates I was less familiar with I usually went with the most straightforward solution. I see this one uses Module:Sidebar/styles.css ?

You should be able to see the exact issue it fixes (unreadable black text on a black background) by visiting https://en.wikipedia.org/wiki/Template:Sidebar/testcases?useskin=vector-2022&vectornightmode=1

and undoing that inline style using this code:

$('.sidebar-list-title[style]').each((a,i)=>i.setAttribute('style',i.getAttribute('style').replace('color: var(--color-base)', '')))

So you could likely move it to CSS, test if the issue is resolved and then undo my change. 🐸 Jdlrobson (talk) 16:21, 19 October 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241019162100","author":"Jdlrobson","type":"comment","level":5,"id":"c-Jdlrobson-20241019162100-MKFI-20241019081000","replies":["c-MKFI-20241020083300-Jdlrobson-20241019162100"]}}-->

@Jdlrobson: I can't do the change myself - the module and stylesheet are both template-protected. MKFI (talk) 08:33, 20 October 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241020083300","author":"MKFI","type":"comment","level":6,"id":"c-MKFI-20241020083300-Jdlrobson-20241019162100","replies":[]}}-->

__DTSUBSCRIBEBUTTONDESKTOP__{"headingLevel":2,"name":"h-172.97.141.219-20241130103900","type":"heading","level":0,"id":"h-Templatestyles_parameter-20241130103900","replies":["c-172.97.141.219-20241130103900-Templatestyles_parameter"],"text":"Templatestyles parameter","linkableTitle":"Templatestyles parameter"}-->

Templatestyles parameter

__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-172.97.141.219-20241130103900","type":"heading","level":0,"id":"h-Templatestyles_parameter-20241130103900","replies":["c-172.97.141.219-20241130103900-Templatestyles_parameter"]}}-->

__DTLATESTCOMMENTTHREAD__{"id":"c-Izno-20241201060300-172.97.141.219-20241130103900","timestamp":"20241201060300"}__-->__DTCOMMENTCOUNT__2__-->__DTAUTHORCOUNT__2__-->

__DTSUBSCRIBEBUTTONMOBILE__{"headingLevel":2,"name":"h-172.97.141.219-20241130103900","type":"heading","level":0,"id":"h-Templatestyles_parameter-20241130103900","replies":["c-172.97.141.219-20241130103900-Templatestyles_parameter"],"text":"Templatestyles parameter","linkableTitle":"Templatestyles parameter"}-->

@Izno: Are there still benefits of the caller templates using the numerous parameters |templatestyles=, |child templatestyles=, and |grandchild templatestyles= over a simple <templatestyles> in each? 172.97.141.219 (talk) 10:39, 30 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241130103900","author":"172.97.141.219","type":"comment","level":1,"id":"c-172.97.141.219-20241130103900-Templatestyles_parameter","replies":["c-Izno-20241201060300-172.97.141.219-20241130103900"]}}-->

Yes. Using the dedicated parameter allows you to use the cascading part of CSS, namely that the CSS in the child will apply after, not before the core TemplateStyles. This avoids the case where the child's styles are potentially overridden by styles of the same specificity in the core styles. You should generally always use these parameters. Izno (talk) 06:03, 1 December 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241201060300","author":"Izno","type":"comment","level":2,"id":"c-Izno-20241201060300-172.97.141.219-20241130103900","replies":[]}}-->

__DTSUBSCRIBEBUTTONDESKTOP__{"headingLevel":2,"name":"h-\u672c\u65e5\u6674\u5929-20241224154200","type":"heading","level":0,"id":"h-Treating_Module:Navbar\/styles.css-20241224154200","replies":["c-\u672c\u65e5\u6674\u5929-20241224154200-Treating_Module:Navbar\/styles.css"],"text":"Treating Module:Navbar\/styles.css","linkableTitle":"Treating Module:Navbar\/styles.css"}-->

Treating Module:Navbar/styles.css

__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-\u672c\u65e5\u6674\u5929-20241224154200","type":"heading","level":0,"id":"h-Treating_Module:Navbar\/styles.css-20241224154200","replies":["c-\u672c\u65e5\u6674\u5929-20241224154200-Treating_Module:Navbar\/styles.css"]}}-->

__DTLATESTCOMMENTTHREAD__{"id":"c-\u672c\u65e5\u6674\u5929-20241227081900-Izno-20241224173200","timestamp":"20241227081900"}__-->__DTCOMMENTCOUNT__3__-->__DTAUTHORCOUNT__2__-->

__DTSUBSCRIBEBUTTONMOBILE__{"headingLevel":2,"name":"h-\u672c\u65e5\u6674\u5929-20241224154200","type":"heading","level":0,"id":"h-Treating_Module:Navbar\/styles.css-20241224154200","replies":["c-\u672c\u65e5\u6674\u5929-20241224154200-Treating_Module:Navbar\/styles.css"],"text":"Treating Module:Navbar\/styles.css","linkableTitle":"Treating Module:Navbar\/styles.css"}-->

@Izno: Is it right not to treat Module:Navbar/styles.css in add_list_styles() whether sidebar has a navbar or not? If an article page transcludes a sidebar (with a navbar) and another navbar in this order, the styles doesn't seem to be applied on mobile view. 本日晴天 (talk) 15:42, 24 December 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241224154200","author":"\u672c\u65e5\u6674\u5929","type":"comment","level":1,"id":"c-\u672c\u65e5\u6674\u5929-20241224154200-Treating_Module:Navbar\/styles.css","replies":["c-Izno-20241224173200-\u672c\u65e5\u6674\u5929-20241224154200"]}}-->

add_list_styles is just for the two kinds of lists and is about the classes that have been added since eternity in the several templates (infobox also). Both navbox and sidebar have instead move_hiding_templatestyles which will take care of embedded TemplateStyles tags. Izno (talk) 17:32, 24 December 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241224173200","author":"Izno","type":"comment","level":2,"id":"c-Izno-20241224173200-\u672c\u65e5\u6674\u5929-20241224154200","replies":["c-\u672c\u65e5\u6674\u5929-20241227081900-Izno-20241224173200"]}}-->

Okay, but on some pages (ex. Finder_(software)) on mobile view, navbars are actually displayed in unintended styles because Module:Navbar/styles.css isn't used. How about modifying this module like this and output an additional templatestyles tag if navbar is used? 本日晴天 (talk) 08:19, 27 December 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241227081900","author":"\u672c\u65e5\u6674\u5929","type":"comment","level":3,"id":"c-\u672c\u65e5\u6674\u5929-20241227081900-Izno-20241224173200","replies":[]}}-->