Templates' CSS
Reminder: for tidiness, the inline CSS used in existing templates should be moved to classes in this page. -- Kynikos (talk) 08:28, 27 December 2014 (UTC)
- Perhaps we should make sure that the templates don't look broken on page such as [1]? -- Lahwaacz (talk) 17:49, 3 March 2016 (UTC)
- Eheh if you disable the style sheets, you can't expect to see a lot of style left ;) Of course we can't float or hide anything without CSS or JavaScript, if we really wanted to fix that, probably our best bet would be to show the icons as background images through the CSS (with untracked direct urls instead of MW links!), so that they wouldn't appear in action=render documents. — Kynikos (talk) 08:15, 4 March 2016 (UTC)
- OK, I will ask a different question to solve a practical problem. Do you know how force the
load.phpentry point to include this stylesheet? Currently I'm downloading only [2], which apparently does not include it. Firebug reports that all the resources leading toload.phpinclude alsoskin=archlinuxandcommon.cssobviously works in the browser, so I have no idea... - I'd prefer to use
load.phpinstead of getting the raw content of this page, because that way it will be validated, minified etc. But of course if you have a better idea, I'm all ears. - -- Lahwaacz (talk) 12:44, 4 March 2016 (UTC)
- OK, I will ask a different question to solve a practical problem. Do you know how force the
- Uh, I see why you asked now, the module name should be simply "site" [3] ^^ (found with Firebug, not through MW docs, if they even exist)
- Anyway, to add another answer to your original question, it would be possible to restructure the Message templates to look like this without CSS:
- Then it would be possible, through CSS, to make that look like Message templates are looking now (in theory we could also include the <hr> elements themselves, and then hide them still through CSS).
- — Kynikos (talk) 14:04, 4 March 2016 (UTC)
- Thanks, I've added the "site" module to the URL in arch-wiki-docs so that issue should be solved. But still, making the templates not depend on CSS will probably help a lot when reading the wiki in a console browser. Including the <hr> tags would probably break the flow of text in an unintended way, because even the lines below section headings are CSS. -- Lahwaacz (talk) 14:50, 4 March 2016 (UTC)
- Ok, this should be implemented.[4][5]
- I haven't put the hr tags for the moment, but my opinion is that it's the unstyled status templates that break the flow in action=render documents, and using hr tags does look better to me (section headings are not underlined there).
- — Kynikos (talk) 04:02, 5 March 2016 (UTC)
List of templates with CSS
Free editing, no signatures required.
- Template:hc
- Template:ic
- Template:Merge
- Template:Move
- Template:META Error
- Template:META Unexplained Status Template
- Template:Unsigned
- Template:Unsigned (Русский)
List of template pages with "style=" entries
I've queried content of all templates (https://wiki.archlinux.org/api.php?action=query&prop=revisions&generator=allpages&gapnamespace=10&gapfilterredir=nonredirects&gaplimit=500&rvprop=content) and simply searched for "style=" attribute in text. Dependent templates like Template:R are not listed here.
- Template:Laptops table header
- Template:Hc
- Template:List of applications navigation (Italiano)
- Template:List of applications navigation (Česky)
- Template:List of applications navigation (正體中文)
- Template:List of applications navigation
- Template:List of applications navigation (Español)
- Template:List of applications navigation (Русский)
- Template:META Error
- Template:META Related articles start
- Template:META Table cell
- Template:META Unexplained Status Template
- Template:META Unexplained Status Template (Русский)
- Template:Merge
- Template:Move
- Template:Package guidelines (Italiano)
- Template:Package guidelines
- Template:Package guidelines (Русский)
- Template:Progressbar
- Template:Related
- Template:Related2
- Template:Template
- Template:Template (Esperanto)
- Template:Template (Ελληνικά)
- Template:Template (Русский)
- Template:Template (Українська)
- Template:TranslationStatus (العربية)
- Template:Unsigned
- Template:Unsigned (Русский)
Hope this will be helpful to someone :D — blackx (talk|contribs) 06:54, 5 February 2015 (UTC)
- Well done! Sooner or later we'll get to do this job too ;) — Kynikos (talk) 08:54, 5 February 2015 (UTC)
Responsive "Related" templates
Regarding the responsive style for the Main page, I'm wondering whether we should do something similar for Template:Related articles start etc? For example I find this to look much better in narrow window. -- Lahwaacz (talk) 16:10, 13 September 2017 (UTC)
- True, I guess any solution is better than the current state. I was thinking about something more similar to the categories box, see User:Kynikos/common.css, there's also a style for status templates. -- Kynikos (talk) 11:35, 16 September 2017 (UTC)
- I've added a style, let's wait for some feedback before closing this. — Lahwaacz (talk) 12:20, 10 September 2023 (UTC)
- The text "Related articles" is unreadable in dark mode because Template:META Related articles start adds the mw-no-invert class to the text. Perhaps instead of adding that class, MediaWiki:Common.css could duplicate the background and color from
div.archwiki-template-meta-related-articles-start > pindiv.archwiki-template-meta-related-articles-start > p.client-darkmode? -- nl6720 (talk) 06:09, 11 September 2023 (UTC)
- The text "Related articles" is unreadable in dark mode because Template:META Related articles start adds the mw-no-invert class to the text. Perhaps instead of adding that class, MediaWiki:Common.css could duplicate the background and color from
- .client-darkmode is added to the <html> element, so the correct selector is
.client-darkmode div.archwiki-template-meta-related-articles-start > p. It should be fixed now. — Lahwaacz (talk) 09:18, 16 September 2023 (UTC)
- .client-darkmode is added to the <html> element, so the correct selector is
- 👍 It works now. -- nl6720 (talk) 09:25, 16 September 2023 (UTC)
- IMO we should keep the links bold otherwise they don't stand out enough. -- nl6720 (talk) 09:25, 16 September 2023 (UTC)
- I'd prefer to have the same style as for the box of categories, but you can make a demo to change my mind. — Lahwaacz (talk) 09:42, 16 September 2023 (UTC)
- Nah, I'm fine with keeping it as is. -- nl6720 (talk) 09:48, 18 September 2023 (UTC)
- The link titles aren't wrapping. --nl6720 (talk) 07:40, 3 July 2024 (UTC)
Class to left-align table row headers
I find table row headers more readable when left-aligned.
| Foo | Bar | Baz | Foo |
|---|---|---|---|
| Alfa Tango | 1 | 2 | 3 |
| Bravo | 1 | 2 | 3 |
| Charlie Romeo | 1 | 2 | 3 |
| Foo | Bar | Baz | Foo |
|---|---|---|---|
| Alfa Tango | 1 | 2 | 3 |
| Bravo | 1 | 2 | 3 |
| Charlie Romeo | 1 | 2 | 3 |
I therefore propose the introduction of the following CSS class:
table.left-align-row-headers tr:not(:first-of-type) th { text-align: left; }
--Larivact (talk) 10:58, 16 September 2018 (UTC)
- That wouldn't work with tables without the header row, resulting in something like this:
Alfa Tango 1 2 3 Bravo 1 2 3 Charlie Romeo 1 2 3
- Good catch, this should do the trick and also support multiple header rows.
table.left-align-row-headers th:first-child:only-of-type { text-align: left; }- --Larivact (talk) 15:14, 16 September 2018 (UTC)
- I would even set
tbody th:first-child:only-of-type { text-align: left; }globally, maybe eventbody th { text-align: left; }. The problem is that MediaWiki sometimes creates a <thead> element for the column-headers, but somethimes it does not... — Lahwaacz (talk) 13:03, 10 September 2023 (UTC)
- I would even set
