MediaWiki talk:Common.css

Templates' CSS

Latest comment: 19 September 201817 comments5 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)Reply[reply]

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)Reply[reply]

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)Reply[reply]

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)Reply[reply]

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:

This article or section needs expansion.

Reason: demo (Discuss in MediaWiki talk:Common.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)Reply[reply]

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)Reply[reply]

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)Reply[reply]

Proposal

Table templates

Template	New <includeonly> content
Deprecating Template:META Table cell
Template:C	`class="centered-cell"\|{{{1}}}`
Template:-	`data-sort-value=4 class="centered-cell"\|–`
Template:R	`data-sort-value=1 class="centered-cell colored-cell-red"\|{{{1}}}`
Template:B	`data-sort-value=5 class="centered-cell colored-cell-blue"\|{{{1}}}`
Template:G	`data-sort-value=4 class="centered-cell colored-cell-green"\|{{{1}}}`
Template:O	`data-sort-value=2 class="centered-cell colored-cell-orange"\|{{{1}}}`
Template:Y	`data-sort-value=3 class="centered-cell colored-cell-yellow"\|{{{1}}}`
Template:V	`data-sort-value=6 class="centered-cell colored-cell-violet"\|{{{1}}}`
Template:Grey	`class="centered-cell colored-cell-grey"\|{{{1}}}`
Template:Ya & Template:Na
Template:Ya	`class="centered-cell"\|<span class="template-ya-char" title=Ya>✔</span>`
Template:Na	`class="centered-cell"\|<span class="template-na-char" title=Na>✘</span>`

Svito recently added data-sort-value attributes to most table cell templates, I am unsure if they are desirable.

New CSS:

.centered-cell { vertical-align: middle; text-align: center; }

.colored-cell-red { background-color: #faa; }
.colored-cell-blue { background-color: #def; }
.colored-cell-green { background-color: #afa; }
.colored-cell-orange { background-color: #fda; }
.colored-cell-yellow { background-color: #ffa; }
.colored-cell-violet { background-color: #dcf; }
.colored-cell-grey { background-color: #ddd; }

.template-ya-char { color: #181; }
.template-na-char { color: #d33; }

--Larivact (talk) 04:47, 17 September 2018 (UTC)Reply[reply]

I'm sure about data-sort-value attributes. Try click on columns to sort these:

English	Portugese	Russian	With data-sort-value	Other column	desired order
Yes	Sim	Да	Yes	1	1
No	Não	Нет	No	5	3
Optional	Opcional	Опционально	Optional	4	2
Partial	Parcial	Частично	Partial	3	2
–	–	–	–	2	1

It so happens that letters in many languages sort them almost right but there are still some issues: dashed entries will always be sorted as first (or last in Russian) when they should have no prevalence over Yes, Partial would be sorted before Optional when they should be equal. If you sort by Other column and then any of columns to the left you can see the difference. There is no point in having sorting enabled if sorting is not consistent and if supposedly equal values in one column sort values in columns that should normally keep their order intact.

-- Svito (talk) 20:12, 17 September 2018 (UTC)Reply[reply]

Alright, I see. But why is Template:Grey 4 when it is commonly used to disable cells? Shouldn't it have the highest value? --Larivact (talk) 05:20, 18 September 2018 (UTC)Reply[reply]

For sortable tables it is used for name column in Category:Boot loaders and AUR helpers. I removed the key for now because at least it sorts them by alphabet without it, with key grey entries would have no alphabetical sorting with eachother, when uncolored cells would. -- Svito (talk) 13:46, 18 September 2018 (UTC)Reply[reply]

I would hold off adding classes for Template:Ya and Template:Na, which are only used on Disk encryption#Comparison table. See User:Svito/Disk encryption that splits that table into multiple smaller but more readable tables (at least in my opinion). -- Svito (talk) 19:48, 18 September 2018 (UTC)Reply[reply]

I find the current large comparison table in Disk encryption#Comparison table way more readable than eight separate tables. The large table allows for a better overview and makes it easy to compare software across multiple categories without loosing track of the software row. --Larivact (talk) 18:10, 19 September 2018 (UTC)Reply[reply]

Fine then. (｡•́︿•̀｡) -- Svito (talk) 20:27, 19 September 2018 (UTC)Reply[reply]

Navigation templates

    div.archwiki-template-box.archwiki-template-box-navigation {
        background-color: #f9faff;
        border-color: #d7dfe3;
        text-align: center; }

-- Svito (talk) 00:20, 19 September 2018 (UTC)Reply[reply]

List of templates with CSS

Free editing, no signatures required.

Template:META Table cell
Template:Laptops table header
Template:hc
Template:ic
Template:Laptops navigation
Template:List of applications navigation (and translations, also with "Applications" in place of "applications")
Template:Merge
Template:Move
Template:META Box
Template:META Error
Template:META Related articles start
Template:Related
Template:Related2
Template:META Unexplained Status Template
Template:Package guidelines and translations
Template:Template and translations
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.

Hope this will be helpful to someone :D — blackx (talk|contribs) 06:54, 5 February 2015 (UTC)Reply[reply]

Well done! Sooner or later we'll get to do this job too ;) — Kynikos (talk) 08:54, 5 February 2015 (UTC)Reply[reply]

Responsive "Related" templates

Latest comment: 18 September 20239 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)Reply[reply]

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)Reply[reply]

I've added a style, let's wait for some feedback before closing this. — Lahwaacz (talk) 12:20, 10 September 2023 (UTC)Reply[reply]

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)Reply[reply]

.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)Reply[reply]

👍 It works now. -- nl6720 (talk) 09:25, 16 September 2023 (UTC)Reply[reply]

IMO we should keep the links bold otherwise they don't stand out enough. -- nl6720 (talk) 09:25, 16 September 2023 (UTC)Reply[reply]

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)Reply[reply]

Nah, I'm fine with keeping it as is. -- nl6720 (talk) 09:48, 18 September 2023 (UTC)Reply[reply]

Note, Tip and Warning template CSS

Latest comment: 20 December 20172 comments2 people in discussion

Currently users can't style Note, Tip and Warning templates since they use Template:META Box which uses inline CSS instead of CSS classes. –Larivact (talk) 12:45, 19 December 2017 (UTC)Reply[reply]

Thanks Larivact, I've added some classes[6], but only the English templates are using them at the moment. Let's leave this talk as a reminder. Once all the translations are updated, the then unused META templates will need to be deleted. -- Kynikos (talk) 15:33, 20 December 2017 (UTC)Reply[reply]

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)Reply[reply]

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)Reply[reply]

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)Reply[reply]

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)Reply[reply]

Remove styles that change the position of category links

Latest comment: Sunday at 16:414 comments3 people in discussion

The rules below /* move category links to the top */ in MediaWiki:Common.css from [7] got too complicated lately: they are hard to maintain for Vector 2022 and actually do not work for the Timeless skin at all.

Therefore, I propose to remove these style overrides and use the default position and style of the category links. They will be placed below the content in Vector and Vector 2022, and may be below/left of/right of the content in Timeless, depending on the screen width.

— Lahwaacz (talk) 18:23, 7 April 2024 (UTC)Reply[reply]

I have no strong opinions on this, do we want to update Help:Style#Categories to have the content match the rendered page though?

-- Erus Iluvatar (talk) 22:50, 7 April 2024 (UTC)Reply[reply]

Help:Style#Categories talks about the wikicode, we should update Help:Category instead. — Lahwaacz (talk) 21:39, 9 April 2024 (UTC)Reply[reply]

While I like the category links being on top, if it's a maintenance burden, I don't mind reverting to the default. -- nl6720 (talk) 16:41, 14 April 2024 (UTC)Reply[reply]