Help talk:TemplateStyles

I recently tweaked a stylesheet that's referenced on two different pages:

https://harvestella.wikitide.org/wiki/Template:Infobox/Dungeon (specific template built on Lua infobox)

and

https://harvestella.wikitide.org/wiki/Template:Infobox/doc (to apply styling to examples in the documentation page for the Infobox meta-template)

The first page already reflects the updates, as seen in the final HTML for that page, which includes both <link> and <style> tags referring to Revision 6349 (the most recent one I just made).

<style data-mw-deduplicate="TemplateStyles:'''6349'''">.mw-parser-output img{max-width:100%;height:auto}.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent;text-align:center}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}body.skin-minerva .mw-parser-output .infobox-header,body.skin-minerva .mw-parser-output .infobox-subheader,body.skin-minerva .mw-parser-output .infobox-above,body.skin-minerva .mw-parser-output .infobox-title,body.skin-minerva .mw-parser-output .infobox-image,body.skin-minerva .mw-parser-output .infobox-full-data,body.skin-minerva .mw-parser-output .infobox-below{text-align:center}</style>
 
 <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:'''r6349'''">

But the latter page, while still having a <link> tag referring to Revision 6349, is still generating a <style> tag for Revision 6103 (which doesn't even match a revision version number on my wiki? It jumps from 6101 to 6126):

<link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:'''r6349'''">
   
<style data-mw-deduplicate="TemplateStyles:'''r6103'''">.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}body.skin-minerva .mw-parser-output .infobox-header,body.skin-minerva .mw-parser-output .infobox-subheader,body.skin-minerva .mw-parser-output .infobox-above,body.skin-minerva .mw-parser-output .infobox-title,body.skin-minerva .mw-parser-output .infobox-image,body.skin-minerva .mw-parser-output .infobox-full-data,body.skin-minerva .mw-parser-output .infobox-below{text-align:center}</style>

I've used the "Purge" option to refresh both of the above pages (Infobox/Dungeon and Infobox/doc) as well as the main Infobox page.

What could be going on here, that it would work on one page and not the other, and that the page where it isn't working definitely appears to see that a new revision exists, but is just not using it? Could it be somehow connected to the fact that it's a documentation subpage, some bit of code is causing it to be overruled where it wouldn't be on a main template page?

Solved my own problem, so sharing here in case anyone else runs into it in the future:

My problem was that I had originally created Template:Infobox/styles.css when using a pre-Lua version of Infoboxes. The Lua Module:Infobox references Module:Infobox/styles.css in the module code, so it was trumping the inclusion of on the base Infobox template and only being honored on templates built on the base template, and only when those templates called the stylesheet from the Template namespace individually.

I migrated the styles from the stylesheet in the Template namespace to the one in the Module namespace, and created a redirect pointing the old one to the new one avoid future confusion along these lines.

When I try to use variables (e.g. var(--text-color)) that are defined in my Common.css inside a /style.css for my Template for font colors, font families, etc., I get an error saying "Invalid or unsupported value for property font-family at line 12 character 18." Any solution for this?

Not yet, short of inlining the definition in the TemplateStyles page or not using TemplateStyles. See phab:T320322.

Seems like Extension:TemplateStylesExtender (linked from the Extension:TemplateStyles) would be the solution, if the only problem is that the basic TemplateStyles doesn't support CSS variables.

I wanted to add the following template style to a page of our new MediaWiki:

Template:Div col

So I added the following line to the beginning of the page in source code mode:

``

However, that only caused that line to be displayed on the page in plain text, and the Div Col tags were displayed as links to nonexisting pages.

I have also tried ``, but to no avail either.

How do I correctly use template styles?

Did you place that within <noinclude> or out of <onlyinclude> tags?

Nope. Why would I do that? It's pretty much just a blank page where I'm trying to get this to work. Is there an example page/wiki somewhere that I can try to copy to see if it works?

Did you install the extension? Without the extension being installed, the parser tag won’t work…

I tryed to change my page "Template:Ahnentafel/styles.css" from "wikitext" to "sanitized_css" via "Spezial:ChangeContentModel". But now there is an text: [f45af79187c45d67cf8831aa] 2019-09-20 08:37:36: Fatal exception of type "Error"

What do I wrong? I installed and activated the Extensions CSS, TemplateStyles and Scribunto.

You should start by finding the error in your logs (look for that "f45af79187c45d67cf8831aa" identifier). If nothing else, you could then post it here (including the backtrace) so we can see what exactly the error was.

Wikipedia uses the 1000 px as a breakpoint for desktops. Does that apply for laptops as well?

Extension:TemplateStyles as well as Help:TemplateStyles is a bit vague as to how exactly the templatestyles tag should be added. So far, I have just prepended it to the template's wikitext, but as can be seen in sv:Special:Diff/42452572, this does not always work. Is there any foolproof way to add the templatestyles tag to a template?

That should work just fine (did you mean to write Mall:Audio/styles.css instead of Audio/styles.css?) but ideally you should scope the styles to the template, ie. write something like

<div class="my-template">
<templatestyles src="Template:MyTemplate/style.css" />
...
</div>

.my-template {
    ...
}

(Note, the position of the tag doesn't matter, it could be outside of the div. The point is to make sure the styles do not have effect outside of the template.)

The namespace prefix is optional, so that's not the problem. If you look at my contributions in the template namespace on svwiki (https://sv.wikipedia.org/w/index.php?title=Special%3ABidrag&target=Nirmos&namespace=10) you can see that I've successfully added templatestyles tags to several templates. In this case, however, the template starts with wikitext syntax for a table, that needs to start on its own line, and apparently does not tolerate a templatestyles tag before it.

And sure, you could say that it needs to be wrapped in a div, but then the user has to know that, and it would need to be documented. Moreover, some templates do not have divs as their outermost structure. For example, infoboxes, navboxes and amboxes (the Big Three in the template world) all have table as their outermost element.

The div is not the point, the class could just as well be on the <table> element. The point is that styles should not leak out of the template, otherwise you'll be facing a maintenance nightmare.

FWIW, I tried to do the same but with table tags in HTML instead of wikitext, but still got the same problem.

So the problem is how to use a templatestyles tag without making the parser wrap it into an empty paragraph?

I guess you could go with

{|
...
|}<templatestyles />

although it's a bit ugly to put the style tag after the content it is styling, but the table would have to be really huge to cause a FOUC...

Using HTML table tags would work fine, but then that makes the code much harder to read.

So the problem is how to use a templatestyles tag without making the parser wrap it into an empty paragraph?

That's an issue with the Parser, IMO. Or maybe RemexHtml, since currently HTML Tidy is handling it. Filed as phab:T186965.

Using HTML table tags instead of wikitext does not solve the problem as I said above, but placing the templatestyles tag after the table actually does! Still, do you not agree that this should be solved properly? Otherwise, when TemplateStyles is deployed widely, people will almost definitely add templatestyles tags to infobox/navbox/ambox and break an enormous amount of pages.

Correcting myself: I said above that converting from wikitext table syntax to HTML table tags did not solve the problem. It does. I have created a minimal test case at sv:Användare:Nirmos/sandlåda where I've tested various combinations. So there are two workarounds. Still, I don't like any of them. Converting from wikitext table syntax to HTML table tags can be a lot of work, can break things, and have nothing to do with the migration of styles. Placing the templatestyles tag after the template is unintuitive, can create a FOUC, and is not according to docs.

There is an example on the subject that is identical to what you want to do. It seems that you expect it to work like the (no)include tags, and those explicitly behave as if they are not there at all. Visually, there doesn't seem to be any difference anyway.

Hi. I don't understand. Is there a chance that TemplateStyles tag has nothing to do with templates? Because I tried to add the tag in mainspace, and it works. Thank you.

Yes, currently the only link to templates is the fact that it must be added to the template namespace (although it can be configured differently - Extension:TemplateStyles). It also seems that originally the templatestyles tag could only be added to the template namespace, as it would have no effect anywhere else. That's where it got its name from, aside from its primary usage planned in templates rather than pages.

Perhaps eventually they could all be moved to a dedicated namespace, e.g. Styles:Mainpage.css . In fact it is already possible,because any community can ask for an extra namespace, and those with the rights to change the content model can add as many styles there as they want.

It might be a good idea to read up on the background history of the tool (Requests for comment/Allow styling in templates).

Thank you for your answer. You just said "as it would have no effect anywhere else". Why do you think so? It's definetely wrong. Usage in other namespaces makes it more powerful dozens of times.

> It's definetely wrong. Usage in other namespaces makes it more powerful dozens of times.

You misunderstood. The tag could only be added to the template namespace. The template in which it was added could be transcluded everywhere, and its styles would apply to content in the template.

At some point they removed that limitation, and now the tag can be added everywhere. You can see the huge discussion about it here (https://phabricator.wikimedia.org/T483) and inhttps://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)/Archive_145#Template_styles

I also tried it at the time, so it was definitely working like that before they changed it.

So, what do you think, it helps in other namespaces or not?

It is certainly helpful to use in other namespaces. although it needs to be used cautiously. People might start adding it to signatures, and other unnecessary places. It will be really chaotic because sitewide css allows users to add frivolous features like blinking stuff, marquee, spinning things random transitions, and much more.

I'm not sure if any of those animations are whitelisted though.

Yes, it can be a problem. But the question is: Can I be sure it will work for mainspace forever or long enough? Because is so, it's much easy to use, and I can ask the commubity to deploy it now.

The whole purpose of the extension is to reduce the need of inline styling in the main namespace (and templates), so as long as that goal doesn't change it will continue to work there.

Whether it will work forever, or long enough is something only the developers (or their bosses) can answer.

It's not just inline. It actually resques RTL wiki from a huge problem we had before. And usage in mainspace will allow all the users make it easily, not just some that work with templates. How can I ask them, please?

One of their potential goals is to completely get rid of inline styling (https://phabricator.wikimedia.org/T37704

My guess is that they will keep it. Performance in some pages is pretty horrible because of an exaggerated number of html tags, and the inline styling added for them.

Anyway, phabricator would probably be the right place to ask about whether adding these tags directly to the namespaces is a feature or a bug, and whether it will remain if it is a feature.

Don't sure it's a good idea. How can I ask in phabricator? You mean some old task?

Just to be clear, my guess is that they'll keep templatestyles, and completely kill off inline styles.

Although the process of disabling inline styling will probably take many years.

Either a new task or maybe https://phabricator.wikimedia.org/T483. Since it is an RFC, and it still hasn't been closed, the final configuration for the implementation is probably still being discussed.

Thank you very much for your help.

You're welcome.

At some point use of the tag outside of templates might become forbidden. Ideally the CSS should be scoped to the template the tag is used in, and not affect other parts of the article, but that was implausible with current technology.

Thank you, Tgr (WMF). Could you tell me, please how vandal actions are prevented until then? As black background color, white font color or 15% font size? Maybe only autopatrolled users can edit sanitized css or something?

They aren't; vandalism enabled by TemplateStyles is not particularly worse than plain inline styles vandalism. (Which is to say, you can already do pretty nasty things via inline syles.) That can be changed if it proves to be a problem. See also the FAQ answer.

(For context, the project focused on technical issues so far and had no product owner. Soon it will get one, so it's possible some decisions or priorities will be reevaluated.)

Thank you, Tgr. It looks as bad news. ערן, what do you think?

I agree with the last answer of Tgr, that vandalism by TemplateStyles is not worse than plain inline vandalism.

Ok, you are the boss.

I have no plans and know of no plans to remove the ability to use <templatestyles> outside of templates. I can't promise the Editing Contributors team might not try to do that in the future though. They've already reserved the right to make the styles not apply to any content outside of the template that actually contains the tag.

For vandalism of stylesheets themselves, the primary mechanism is to protect the stylesheets as you'd protect any template. It would probably be possible to set a default protection level for everything that uses the content model, but since most problematic things that can be done with TemplateStyles can be done with inline CSS too that doesn't seem like something that needs attention right now.

For vandalism by including a stylesheet onto a page, again, since most problematic things that can be done with TemplateStyles can be done with inline CSS too that doesn't seem like something that needs attention right now.

Thank for your answer, Anomie, but there are two huge differences between inline vandalism and stylesheet. One: The last does not appear in watchlist of users that watch the page, not the stylesheet. Two: if user that watches some page see anonime user changed something in line 55 of page, and they does not know css, they can see the line 55 result and check if it looks reasonable. If they even knew about stylesheet edit, they can't know where they should look in the page without some css master help. So I thought that only autopatrolled should edit sanitized css, it will resolve these problems. Am I wrong?

Your "One" applies equally well to template vandalism, and communities already deal with that. They should deal with TemplateStyles stylesheets in the same manner.

Your "Two" doesn't make sense. They can see the diff of the TemplateStyles stylesheet as easily as they can see the diff of a wikitext page. In neither case does MediaWiki say "line 55" and expect the user to figure out which line that is. Unless you're trying to say that they'd have to understand CSS well enough to figure out what a change to the stylesheet is going to do to the page as a whole? But even then, a change in a complex module or template is unlikely to be clear to someone unfamiliar with Lua or complex wikitext in the same way.

Well. Anomie: We deal with template vandalism by protecting templates that used in 10,000 articles for example. Here it will be used in one article.\ About two: neither. The css font-size:35% added to text can be checked immediately. When it added to class name, you should understand how to find where this class is used - how to find affected places in the article.

Hello. I'd like to create a small demo for TemplateStyles for our wiki users, when I solving some problems that are very painful to us and do not matter to other wikis. When I saw today that the extension is already deployed to mediawiki, I came here to write it, starting from stupid example and extending it, but it does not work. As I can see, because ns-2 does not create sanitized css files. What can I do? Use another namespace to play with? Ask an admin to use special:changecontentmodel (I even don't know if it will work)? What is the content of $wgTemplateStylesNamespaces on MediaWiki at all? Thank you.

Special:ChangeContentModel is the method to create sanitized CSS pages in cases where that doesn't happen automatically.

As the subject page notes this only works on the template namespace. Unless  you can change the content model of a page.

You might want to use the beta wikis to experiment  rather than create unnecessary template css here.

See examples on the page.

Thank you for your answer. Beta wiki is not a good choice, because it is not a part of global accounts, and I need that anyone could login from theirs account. Am I allowed to create a template for my purposes in Template namespace? Or: You said "unless". Am I allowed to ask an admin to convert one page in user namespace to be sanitized css, to work with it? Thank you.

test.wikipedia is part of the global account system and should have it.

As far as creating test template CSS here. Sure, it should be allowed. Much like how test lua modules are created as a subpage of a sandbox module. If in doubt one can ask in the central discussion area of this wiki.

For Admins, as long as it is within your user subpage it is likely that they won't mind. The problem of course is that both css and sanitized css pages end with CSS but behave differently.

You might want to use the beta wikis to experiment  rather than create unnecessary templates here CSS but behave differently.

Oops, last section was pasted incorrectly.

Didn't know about testwiki global. Moved there. Thank you.

The tag should be placed before the content that is styled, e.g. at the top of the template

Does that mean the template should also be added/moved to the top of the articles where it is used in case it contains styles used in more than a single section of the article?

should only be used to style content that's contained or enclosed in the same template. If that's the case, it doesn't really matter where you place the template, as the tag will always precede the styled content.

If a template is supposed to affect content outside of the template itself, it should probably appear before that content. But ideally most templates will style only their own content so such placement doesn't matter.

Note that the Editing Contributors team has reserved the right to force templates to style only their own content in the future. Actually doing that would require some other significant changes to how templates work (e.g. T114445).

There's also some interesting points about Template fragments,, this feature and the future desires of VE of course.

If you look at templates that only output: <code>--data-sort-value="sortkey" |</code> to apply sorting to a table cell... That's just.. interesting.

The caveats section clearly notes that users shouldn't expect that a template allows its styles to propagate outside it. But a simple syntax that may be used instead is basically using the tag directly in an article, e.g.:

My article text goes here

Considering that most pages can essentially be used as a templates (except those with special content models), the distinction doesn't seem clear cut.

While some editors and wikis would probably be against such "ugly" markup there may be legitimate uses in non-mainspace pages or even in a main page for example.