VOOZH about

URL: https://wiki.archlinux.org/title/MediaWiki_talk:Common.css

⇱ MediaWiki talk:Common.css - ArchWiki


Jump to content
From ArchWiki
Latest comment: 3 July 2024 by Nl6720 in topic Responsive "Related" templates

Templates' CSS

Latest comment: 5 March 20169 comments3 people in discussion

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.php entry point to include this stylesheet? Currently I'm downloading only [2], which apparently does not include it. Firebug reports that all the resources leading to load.php include also skin=archlinux and common.css obviously works in the browser, so I have no idea...
I'd prefer to use load.php instead 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)
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:

👁 Image
This article or section needs expansion.👁 Image

Reason: demo (Discuss in #)


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.

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.

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

Latest comment: 3 July 202410 comments3 people in discussion

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 > p in div.archwiki-template-meta-related-articles-start > p.client-darkmode? -- nl6720 (talk) 06:09, 11 September 2023 (UTC)
.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)
👍 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

Latest comment: 10 September 20234 comments2 people in discussion

I find table row headers more readable when left-aligned.

Default styling
Foo Bar Baz Foo
Alfa Tango 1 2 3
Bravo 1 2 3
Charlie Romeo 1 2 3
Left-aligned row headers
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
-- Lahwaacz (talk) 13:24, 16 September 2018 (UTC)
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 even tbody 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)