MediaWiki talk:Common.css
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.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 toload.php
include alsoskin=archlinux
andcommon.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)
- 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)
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)
- 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)
- 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)
- 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)
- 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)
- 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)
- Fine then. (。•́︿•̀。) -- Svito (talk) 20:27, 19 September 2018 (UTC)
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)
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.
- 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
- Template:List of applications navigation (Español)
- Template:List of applications navigation (Русский)
- Template:META Box
- 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 > p
indiv.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)
Note, Tip and Warning template CSS
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)
- 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)
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
"Redirected from" is no longer visible
This CSS:
/* hide stupid empty divs which cause large margin between the category links and content */ body:has(#catlinks:not(.catlinks-allhidden)) :is(#contentSub, #contentSub2, .vector-body-before-content) { display: none; }
hides <div id="contentSub">
which contains <span class="mw-redirectedfrom">
.
This is especially important for ArchWiki:Archive which relies on the "Redirected from" link.
— andreymal (talk) 00:19, 8 March 2024 (UTC)
- It also hides link to parent page (e.g. Power management/Suspend and hibernate) — andreymal (talk) 19:51, 9 March 2024 (UTC)
- I think I managed to have it exclude the two cases you found by adding
:not(.mw-redirectedfrom, .mw-content-subtitle)
. - Pinging @Lahwaacz as I'm not confident in my CSS abilities to make the change for everyone.
- -- Erus Iluvatar (talk) 14:27, 10 March 2024 (UTC)
- I'm actually trying to remove just the margins instead of hiding the divs. So if MediaWiki changes something in the future, the elements will always appear and we will just get a broken style in the worst case. But trying to style things consistently for two different skins is crazy. — Lahwaacz (talk) 14:32, 10 March 2024 (UTC)
- Looks like I commented right after you fixed it, thank you ! Erus Iluvatar (talk) 14:38, 10 March 2024 (UTC)
- I'm actually trying to remove just the margins instead of hiding the divs. So if MediaWiki changes something in the future, the elements will always appear and we will just get a broken style in the worst case. But trying to style things consistently for two different skins is crazy. — Lahwaacz (talk) 14:32, 10 March 2024 (UTC)