Extension talk:TemplateStyles

ExtensionDistributor issues, tracked in T363063

Since User:Clump just chose to delete the feedback:

That "4 year old report" has the exact error message I got when I tried to use this extension ("Class 'Wikimedia\CSS\Parser\Parser' not found"). I downloaded the version for 1.41 from the extension page, and that version is obviously missing the software, which the extension page says "should not happen anymore".

So something should be done here, and that something is certainly not simply deleting feedback and talking about some obscure "support desk" in the edit summary, which most users will never see. Most unhelpful behavior here by User:Clump.

Putting a comment in the middle of the documentation is not "feedback". Thanks for taking the time to do it the proper way. Filed as T363063.

I'm using a docker image of 1.40.x and a VM running 1.35.x, and whenever I try to put a wiki table inside a Colored box template, all I get is colored box with one curly opening bracket. That's it. I'll share my code below:

{{Colored box|title = General Documents|content=
{| class="wikitable"
|+ Department Specific Documents
|-
! Name !! Maintainer !! Link
|-
|  Orientation
| 
| [[Onboarding]]
|-
|Design Blueprint
|The Office
|[[Design Blueprint]]
|-
|Orientation
|Other
|[[Other Onboarding]]
|}
}}

This requires the TemplateData & TemplateStyles Extension to be loaded, and the Coloredbox template.

See Help:Extension:ParserFunctions#Escaping_pipe_characters_in_tables.

Thank you! I'll check that out.

Is there a way to allow display: contents; or display: subgrid; per wiki?Alexander Mashin ^talk 08:40, 21 September 2023 (UTC)

Not without adding it to the validation rules. Feel free to file a bug for css-sanitizer.

Hi everyone.

First of all, thanks for your future answers. This problem keeped me awake for an entire ngiht. I've been using MediaWiki for a couple hours only, and i figure it out how to use Infobox. But I got a problem with Templatestyles, on my Infobox.

La page Modèle:Infobox/Pictogramme/persofiction.css doit avoir un modèle de contenu « CSS nettoyé » pour TemplateStyles (le modèle actuel est « wikitexte »).

Translation time : It is says, that persofiction.css, must be "css cleaned" (don't know what thats means). And when i "clean" it (i delete what's inside), the message, is that persofiction.css in not existing.

Here what I type in persofiction.css :

.entete.persofiction { background-image: url("//upload.wikimedia.org/wikipedia/commons/3/37/Picto_infobox_masks.png"); } /* persofiction */

I really need to understand what's going on over here, because, it makes me crazy.

Thanks all.

Modèle:Infobox/Pictogramme/persofiction.css has the wrong content model, it should be sanitized CSS. Probably a wiki configuration problem (the page should have been created with that model in the first place), but for this specific page you can change it via page information (on the sidebar menu) -> change content model.

Ok, so i did what you said. I fund the way to change, but i got an error when i try.

[36e331be38efefa4915a14c8] 2020-04-27 22:13:15: Erreur fatale de type « Error ».

I'm not sure what I've done wrong when I've install Mediawiki. Is that something to do with cache ? Or with the GNU diff ? That was the two only things that were missing. I have to precise that i'm working with Wamp on Windows, because I don't want my wiki to be seen by a bot. Not sure that help

Hard to tell without knowing what the error is. See Manual:How to debug.

HirderWiki, I hope you figured out your problem. If it's any consolation, I've experienced both of the things you describe, although, as Tgr said, it's hard to surmise exactly what your "fatal error" pertains to unless you enable, for example $wgShowExceptionDetails, or send the debug messages to a log file.

I have experienced some odd behavior regarding content models since upgrading wikis to 1.35.x, which could be similar to the problem you're having with TemplateStyles. In my case, "Page information" (in the "toolbox" section of the sidebar with the Vector skin) shows the correct content model, but I still get errors about content models when I try to #invoke modules, or I don't get the fancy CodeEditor editor when I try to edit pages with a CSS content model. Setting the affected page's content model—from "Page information" in the sidebar—to something like "plain text" and then back again to its original content model like "Scribunto" or "Sanitized CSS" seems to fix this problem for me.

A side note «CSS nettoyé» translates to "Sanitized CSS" in the English localization and it's just the designation that CSS pages to be used with Extension:TemplateStyles receive. It's not meant to imply that you need to do anything to "clean" it. If you're trying to use a page with TemplateStyles and it has the wrong content model, change it to «CSS nettoyé» as I described above.

@Ernstkm content model storage was revamped in 1.32, see Requests for comment/Content model storage, T182682 and populateContentTables.php.

Useful context, thanks!

Hi I have a question, will this extension work for Mediawiki 1.35 versions?

@Quarnds I updated the information box on the extension page to better reflect what's supported by current and previous versions of the extension. Please start a new thread for a new question in the future, though.

Okay thanks, <3

Update is coming (I forgot I had writing this).

So, nothing have change. I still have problem, and I don't know how to fix it. Even, when I put $wgShowExceptionDetails (for other reason), I don't see a clear error.

But what I can tell you, it's that, I had found a solution (I don't how), and my Infobox worked fine, until I upgraded to 1.35.7. I had to reinstall TemplateStyles, and I still have these problem.

And to be honest, the solution brought here, doesn't help at all. I didn't find "Page Information", or something like that.

Here's what I got on the top of my Infobox. . So i decided to check my Infobox Model page, and the same errors appears on my exemple uses on the documentation page.

So, I checked Modèle:Infobox V3/Début that is on the top of my Infobox, and ... Boom. Same errors again (La page Modèle:Méta documentation de modèle/styles.css doit avoir un modèle de contenu « CSS nettoyé » pour TemplateStyles (le modèle actuel est « wikicode »). Erreur de script : le module « Documentation » n’existe pas.).

Do I have to install something ? or to reinstall something ?

Is Modèle the Scribunto namespace? This is probably T200914 then (which was fixed in 1.33 but that will only affect pages created after the upgrade).

Scribunto is the name of an extension that is in the MediaWiki based installed extension since version 1.30 I guess.

I don't know. For a comparaison, Modèle is like this one https://en.wikipedia.org/wiki/Infobox. It is the same process.

background-clip:text is not supported by Chrome

It seems that background-clip:text cannot pass the sanitizer ?

I discovered that background-clip:text is not supported by Chrome

The Wiki I edit is on MW 1.31.7 with plans to update to 1.35 in mid-year. Our sanitization interpreter seems to be rather out-of-date: transform:translateX(x); is marked illegal – there is a workaround with translate(x,0), so we can still make do with it.

My main problem comes from transform:translate(x1,y1) translate(x2,y2); being marked illegal – In fact, it appears that any combination of multiple transform functions inside the same transform property is considered illegal.

I hope this can be (or is already, considering our geriatric MW version) addressed in a newer version of TemplateStyles; in the mean time, I wonder if there is any workarounds I can try?

My particular use case...

I am trying to create a CSS animation where a longer string of internal link scrolls from the first letter to the last inside a narrower container. If I boil down the HTML and CSS a bit, they would look like:

<div class='outer-container'>
...
  <span class='container long-text-scroll'>
    [[Link|A long string of descriptions]]
  </span>
</div>

/*.outer-container has position:relative*/
...
.container {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 60px;
    height: 16px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes long-text-scroll {
     0% {opacity:1;transform:translate(0,0);}
    75% {opacity:1;transform:translate(-100%,0) translate(60px,0);}
    85% {opacity:1;transform:translate(-100%,0) translate(60px,0);}
    87% {opacity:0;transform:translate(-100%,0) translate(60px,0);}
    88% {opacity:0;transform:translate(0,0);}
    90% {opacity:1;transform:translate(0,0);}
    99% {opacity:0;transform:translate(-100%,0) rotate(45deg);}
}

.outer-container .long-text-scroll>a {
    position: absolute;
    top: 0;
    left: 0;
    animation-name: long-text-scroll;
    animation-duration: 6s;
    animation-timing-function: cubic-bezier(0.15, 0, 0.85, 1);
    animation-iteration-count: infinite;
}

This style is applied to multiple instances of texts where they are longer than 60px. I believe that for the first-to-last-letter effect, I must use multiple translate functions in the same transform function: the -100% to align the end of text to the left edge, the +60px to move the end back to the right edge. The animation keyframe can only be defined in a style sheet, so I can't use inline definitions; Perhaps I can ask my SysOp to use widget, but that is not ideal.

Thanks in advance for any suggestions.

Old-style quick and dirty way: create a CSS class inside your common.css and then use it.

The CSS sanitizer is largely stuck in the state in which it was created, I doubt updating the extension would change anything. If you feel adventurous, you can update the rules yourself (see Extension:TemplateStylesExtender for an example; it can be done without changing extension code). Otherwise, as Valerio says, you'll have to define the rule elsewhere.

I decided to try out the newest copy of TemplateStyles as of yesterday on my local testing MediaWiki instance, and what I have up there triggers no warning, and I saved it as sanitized CSS with no complaint from the server. Though I am not familiar with php syntaxes, StylePropertySanitizer.php seems to contain entries that addresses my issue (combining multiple transform functions inside the same transform property).

Meanwhile, the wiki site I edit won't even let me use percentages in translate()... I will just assume that this is caused by a really out-of-date TemplateStyles build and pepper the SysOp about updates then.

I don't have the privilege to edit site-wide common.css, and using it seems to be a bit overkill as the animation will probably affect only one or two pages – especially when the planned update should do the trick.

Anyways, thank you Tgr and Valerio for the help!

There was a big update three years ago which included transforms. I thought that was pre 1.31 but apparently not... apologies for the misleading advice.

so, building some html construct, i tried to add to templatestyles something line this:

.skin-minerva .myclass_X { display: none; }

however, this does not work, since the extension adds another class .mw-parser-output, and since the skin class belongs to the body, no element matches

.mw-parser-output .skin-minerva .myclass_X { display: none; }

i think the extension should treat classes that looks like skin-XXXX nicer, and parse

.skin-minerva .mw-parser-output .myclass_X { display: none; }

instead, so i can choose to be "skin sensitive".

peace.

See the FAQ.

Thanks. My bad. Peace.

Can I target the .mw-parser-output div itself?

As a note, I filed a task for this a few years down the road from this discussion at phab:T271588.

Not with TemplateStyles. The div exists to limit the scope of the TemplateStyles CSS, not to be a target for TemplateStyles itself.

Hi,

I exported the 'Template:Mainpage/styles.css' from Wikipedia. But when I try to include the css via it shows me not the formated text I'd expected, at least nothing formatted. If I corrupt the line (e.g. src="Template:Mainpage/styles") I get an error.
Direct including via …</templatestyles> is not possible anymore, so I'm not sure how to find the failure. Did I forget something?
Mainpage/styles.css is classifed as sanitized css.

Possibly some of the main page formatting on Wikipedia is via MediaWiki:Common.css and similar, and not TemplateStyles?

I don't know which Wikipedia page you're taking from, but en.WP's TemplateStyles page is at w:Wikipedia:Main Page/styles.css which is a) in the Wikipedia namespace and b) accordingly may need to have its content model changed to sanitized-css from wikitext.

Where are the numbers defined that correspond to the different namespaces (2: User, 8: Mediawiki etc.)?

Manual:Namespace#Built-in_namespaces

Typically there will be a constant like NS_TEMPLATE that you can use.