Extension talk:CSS

Doesn't work with Cite extension

There seems to be a bug with this extension when cite.php is also used. The style sheet referenced appears to be ignored. Could anyone point towards how this might be corrected? --Philipjoslin 10:01, 6 December 2007 (UTC)

Is the site you have it on public so I can have a look at what's happening? is there errors or anything? --Nad 21:34, 8 December 2007 (UTC)

I have Cite and CSS installed and CSS does not work. The Wiki I am using is not public, sorry. --EToreo 20:53, 19 December 2007 (UTC)

Will this work for longer CSS coding?

I have a page that requires CSS in it. The CSS coding is much longer than that shown on the example page. When I created a page called Syn'sTemplateDesignPageCSS.css and inserted the CSS coding, then added the tag to the page to call the CSS, it didn't work. 75.167.200.148 01:02, 5 March 2008 (UTC)

Problem installing?

I've installed the CSS extension as per the instructions on the website, but it doesn't appear to be running. All I get for my sheet is a massive mess. Can someone please help me out? My contact e-mail is z@demon-sushi.com. --Cinnemalt 12:50, 27 March 2009 (EST)

Hi, I have got a problem whereas the extension does not appear to work. I have followed the instructions (i.e. placed the files in the extensions/ dir and added the include command in the LocalSettins.php file) but all I have when I try inline CSS definition is the actual definition appearing as text within my wiki page. Any idea what is going on? Thanks. diferdin 10:20, 26 March 2010 (GMT)

Current Version Compatability?

I'm trying to use the CSS extension with Apache 2.2, PHP 5.3.2RC2 and MediaWiki 1.15.1. Whenever I enable the CSS extension, I receive an error message of Warning: Parameter 1 to Language::getMagic() expected to be a reference, value given in C:\Web\Docs\wiki\includes\StubObject.php on line 58

Is this just because the CSS extension is not compatible with PHP 5.3.2RC2?

I have the same issue. Any advice?

My development machine is: MySQL 5.1.39, PHP 5.3.2, and am using MWiki 1.14 and 1.15, and the extension does not work on this setup (single AMD 64 bit). My production machine is MySQL 5.0.77, PHP 5.1.6, and MWiki 1.14 (dual xeon 32 bit). The extension does work on this setup. On the devel machine I can see the hook being set, but it looks like it is never called. Maybe some kind of incompatibility with Parser.php?? Anyone else have this situation?? Thanks Tsx11 14:06, 24 July 2010 (UTC)

• Same issue after upgrading Debian lenny (oldstable) to Debian squezze (stable):

Mediawiki-Debian-Version: 1:1.15.5-2 PHP5-Debian-Version: 5.3.3-7

Can not upgrade mediawiki to a version > 1.5 within Debian, because unstable (sid) is version 1:1.15.5-3 at the moment

Any advice to fix / work around this? --> The snapshot of version r60464 of the CSS extension for MediaWiki 1.16.x is working fine on Debian for me.

---

Same problem: version 1.15, server changed from PHP5.2 to PHP5.3, #css no longer worked. What shall I do? Look for another extension? --Bescheid 17:10, 24 March 2011 (UTC)

This doesn't look like a problem in Extension:CSS itself, but is rather due to changes in PHP from 5.2 to 5.3 affecting how some parts of MediaWiki work. Internals changes in PHP's handling of reference variables cause some old code patterns (which were often STRICTLY NECESSARY in the PHP 4.x days) to move from being harmless but unnecessary to either not working, or working but throwing an error message which itself causes problems.

The correct fix is to either:

1. Upgrade MediaWiki to a version that works with PHP 5.3 (try 1.16 or 1.17 release candidate?)
2. Downgrade PHP to a version that works with MediaWiki 1.15

If you can't do either of those, then you can attempt to copy over all the various PHP 5.3 compatibility fixes into your old version, starting with removing the '&' reference marker on the parameter on Language::getMagic() (in languages/Language.php). However you will likely encounter other similar problems. --brion 17:35, 24 March 2011 (UTC)

css absolute path

"Note that the file must be an absolute path with a leading slash to distinguish it from an article title.

{{#css:/skins/MyStyles.css}} "

It seems that I need to specify the whole path, in my case http://localhost:8080/mediawiki/skins/mytable.css

for the extension to work. Or I am missing something.

I also have tried with $wgCSSPath = true (or false) in the LocalSettings.php, thinking it would recognize that the path of the .css would be given relative to the wgScriptPath, but nothing worked. I would appreciate if you could help. Thanks.

Extension check $wgCSSPath that it is false or <PATH> .

If $wgCSSPath is false , it will use $wgStylePath (default is "/{yourwiki}/skins" ) as baseurl instead .

Finally , it also simplely check parameter start from "/" to determined css-path or parser-function .

So you just put your css file in /{yourwiki}/skins , and use syntax like {{#css:/MyStyles.css}} , it will be work find .

--li9ht (talk) 17:48, 27 December 2017 (UTC)

How to get a background image

Hi, this is probably more of a css question, but I can't figure out how to get a background image on a page. Could someone give a code example for that? Thanks! --AdSvS (talk) 09:28, 9 May 2012 (UTC)

I had a problem that sounds like it could be this. You have to set the CSS for that within the page itself. For some reason it doesn't load from another page used for storing the CSS code. Инкуиситор Саша Ехренстеин аус дем Стурмкриг Сектор (Talk) (Contributions) 04:41, 25 October 2012 (UTC)

"cssExtensionDataURIFallback is not a function" error

Hello! Today I've done update the CSS Extension to 3.1 version, and on each page that contains the {{#css: ... }} code I get the following error message in the Firebug console:

Timestamp: 2012-09-14 10:25:56
Error: TypeError: $("link[href^=\"data:text/css;charset=UTF-8;base64,--8<--"]").cssExtensionDataURIFallback is not a function
Source File: http://myserver/wiki/TestPage
Line: 37

Where 37th line is:

35 <!-- Begin Extension:CSS --><link rel="stylesheet" href="data:text/css;charset=UTF-8;base64,--8<--" /><script>jQuery( function( $ ) {
36 	$( 'link[href^="data:text/css;charset=UTF-8;base64,I2Nzcy1leHRlbnNpb24tY2FuYXJ5LTI5YWVjYnti"]' )
37 		.cssExtensionDataURIFallback( 'css-extension-canary-29aecb', '29aecb' );
38 } );</script><!-- End Extension:CSS -->

My configuration:

• MediaWiki 1.19.0
• PHP 5.3.3
• CSS Version 3.1, 2012-01-15

--Scottie33 (talk) 08:48, 14 September 2012 (UTC)

I'm also getting that error at Korean Uncyclopedia. Our error and source is same.

Our configuration is:

• MediaWiki 1.19.2 (r114701)
• PHP 5.3.10-1ubuntu3.4 (cgi-fcgi)
• MySQL 5.5.24-0ubuntu0.12.04.1
• CSS (ver 3.1, 2012-01-15) (r115734)

Maybe this version had improvement but that source didn't optimized. -- Quirax (talk) 22:56, 30 September 2012 (UTC)

When your mediawiki:common.js does not work, check this error. -- Quirax (talk) 22:59, 30 September 2012 (UTC)

I have the same configuration, and same error also.--Hypergrove (talk) 05:13, 21 January 2013 (UTC)

Problem with div#content not working in off-page CSS pages

When attempting to change the background or text using div#content on a page for CSS and then putting the parser tag to use the CSS from that page in an article, it doesn't work. The only way to get it to work is to include it in the page itself. Инкуиситор Саша Ехренстеин аус дем Стурмкриг Сектор (Talk) (Contributions) 04:46, 25 October 2012 (UTC)

Issues calling css within tags

not sure how you can call the css in a page =S have this at the top:

 {{#css:
  box {
    border: 0px solid;
    font-size: 20pt;
    color: red;
    box-shadow: 0px 0px 5px green;
  }
 }}
 

and then i use:

 <span id="box">
 some words
 </span>
 

but nothing happens... am i doing it wrong? i have no idea how to get the span to identify the parser-function

It's probably because "box" is not a proper selector in css. You should type "span#box {".

Incompatibility with Extension:CategoryTree

After an upgrade to 1.20, I found an incompatibility between Extension:CSS and Extension:CategoryTree. If there is a {{#css: ... }} function in a page, the tree from Extension:CategoryTree won't display. It worked whith Extension:CSS v 1.0.7 and a previous version of Extension:CategoryTree (not numered...).--Varlin (talk) 18:03, 28 December 2012 (UTC)

@functions

Does #css support @functions like @import? It's because one of my friends were trying to import a font with Google Fonts to use on his profile. His code was @import url(http://fonts.googleapis.com/css?family=Montez%7CAladin); but it does not seem to be working. Is there any reason why? :S Codyn329 (talk) 01:37, 18 February 2014 (UTC)

I've found what is most likely the issue: it's with MediaWiki's sanitizer, which is most-likely disallowing @import. Extension:CSS does use Sanitizer, though on-wiki CSS pages do not. One solution could be to call a CSS article as demonstrated on the documentation page. On the CSS article "User:Codyn329/fonts.css" for example, you could add the import, and then use the CSS parser function to import that CSS article: {{#css:User:Codyn329/fonts.css}} Hopefully that's helpful to you! --GeorgeBarnick (talk) 04:44, 18 February 2014 (UTC)

Awesome, thanks George ;) Codyn329 (talk) 00:03, 19 February 2014 (UTC)

Stop html page cache from working

I installed this extension for my MediaWiki 1.16 site. It stopped html page cache of the page using css code. It is a big problem for me, so I change to Extension:NewPageCSS which works fine with cache. NewPageCSS can add onpage CSS, but it cannot link to css file. --Superxain (talk) 10:43, 9 June 2014 (UTC)

Inline #CSS doesn't work

I have tried the inline CSS as explained in the example. When I have inline CSS and I try to save the page, it perform no operation leaving me with blank white page.

Could anyone help me, what is not exactly working in this case.

mediawiki italicize text does not work

It seems that, any page with #css will cause ''any text here'' to not work. The text simply disappears.

I am successfully using both #css and ''italics''.

Including other CSS files

Is including a css file from another css file supported ?

Consider:

Page
{{#css:Style.css}}

/* html markup using the css in both Style.css and Syntax.css */

Style.css
{{#css:Syntax.css}}

/* other css markup here */

Syntax.css

/* css markup */

If this IS supported, it should be mentioned on the main page. If its NOT supported, I hereby submit that as a future enhancement.

Changing the background image (of any component)

While this extension is mostly working fine for me, inline CSS does not seem to allow for background images to be changed. Instead, adding something like background-image: url('[insert here relative path]/Someimage.jpg'); causes all inline CSS to fail. I do know that there is a note about this on the extension page, but I can't make head or tail of this:

Using the parser function to use the CSS from another page does not work to change the color or background of the page, however, using the parser function on a single page by itself does allow the background to be changed. To overcome this problem, it is possible to load the CSS through transclusion, which does not cause the problem of failing to load the change to the page background.

Placing the CSS on a different page and transcluding that content, as that note seems to suggest, does not work. Any suggestions? Cavila 22:16, 12 May 2015 (UTC)

The quotes may be causing problems, try removing them, or use transclusion which is working on MW1.24 as you can see in this example. --Nad (talk) 10:45, 13 May 2015 (UTC)

Mmm, somehow that doesn't work either, at least not on MW 1.24.2 with the Chameleon skin installed. Transclusion normally works, even with "background-image" being set to "none", but as soon as a url is specified for the image file, it is not recognised/parsed and all other CSS added through the #css parser also fails. Maybe the sanitiser is a lot stricter now. Cavila 14:31, 13 May 2015 (UTC)

OrganicDesign is using an older version of the extension (4 years old), so I just tried one from 2011-10-21 and you can probably guess what happened: it worked! The code change responsible for this issue occurred in the middle of a series of security fixes, so that some sort of regression (or undocumented breaking change) seems to have slipped in. Cavila (MW 1.22, MySQL 5.5.37-0, Php 5.4.4-14 squeeze, SMW 1.9.2, SF 2.7) 19:17, 13 May 2015 (UTC)

That's great news Cavila! I've been struggling for months to find a way to use a per-page image background. Right now I wouldn't want to use an older version though since my wiki heavily depends on Extension:CSS, therefore I humbly ask devs to restore this lost functionality to the current version. Please guys! Consider this as an essential feature addition to this great extension. Thanks to all! --Ioannis Protonotarios 11:16, 26 May 2015 (UTC)

Anyone have an update? I found this article only after wasting several days searching & trying dozens of combinations & feeling decidedly stupid. This bug is killing me and greatly decreasing the value of an otherwise great extension! Many, many thanks in advance to whoever fixes it. Sean

Hi, I originally wrote the extension, but no longer have commit access to the wikimedia repo since the move to git, also the extension has changed a great deal since I made it. There are a couple of other solutions though, for example you can add CSS rules to MediaWiki:Common.css and use the body attributes to make the rules apply only to a specific page, or if you have raw html enabled you can add style tags into the article, you can use <nowiki><html><style>....</style></html> if your CSS rules need to include dynamic content like templates or parser-functions etc --Legaulph (talk) 14:28, 22 September 2016 (UTC)

One can also use the following extensions for per page background images: HTMLets or NamespaceHTML. With HTMLets you would post a separate file to HTMlets that you would include (see extension). NamespaceHTML is even better since you can have raw html in the Namespace of your choice (one hopefully not editable by the general public)and transinclude the page into the page you want the background image. Even better one can mix html and wiki syntax variables by using the tag function, which means one can have the background image be a variable set by the end user (if you wanted). Example on how to do it:

{{#tag:html| <style>
body  {
    background-image: url("{{filepath:{{{Photo Name}}} }}");
   
}
</style>
}}

Notice one must use the html with the tag function to allow the variable. The filepath gives the full path for the image to show correctly. Basically set this up in a page (either in template namespace if you only allow sysops to edit it, or in the Mediawiki namespace) and use that page as a template. If it was in the Mediawiki namespace the call would be like this:

{{Mediawiki:Background Image
|Photo Name=
}}

Hopefully this helps anyone looking to add background images per page. Christharp (talk) 21:41, 19 October 2016 (UTC)

MediaWiki 1.27 Uncaught ReferenceError: jQuery is not defined

Getting jQuery error Uncaught ReferenceError: jQuery is not defined <script>jQuery( function( $ ) { $( 'link[href^="data:text/css;charset=UTF-8;base64,I2Nzcy1leHRlbnNpb24tY2FuYXJ5LWU1NDExZHti"]' )

Tried following instuctions here Migration Guide

Anything new on this bug? Aiophe (talk)

see also this comment --Planetenxin (talk) 13:23, 22 February 2017 (UTC)

External CSS Article Not Working

I'm trying to style a wiki page located here but the @import for the Google Font, which is located in the CSS Article that's referenced on the wiki page via this CSS extension (view source to see it) is not working at all. I've tried troubleshooting it multiple ways, to no avail. Help? Littleandfierce (talk) 23:43, 1 March 2017 (UTC)

Can add to MediaWiki:Common.css?

How to make the style be applied globally by including in Common.css? Possible answer:

Add to MediaWiki:Common.css:

@import url("WIKI-URL/MyStyles.css?action=render");

If not, how to globally apply a css-type wiki-page?

Include URL in CSS when css page is protected

Hey there! Not a wiki pro so I hope this goes where it should. I'm trying to include a custom font. I converted it to base64 and include it in a page called test.css but it says "Insecure input".

I thought about it and it would be nice if the CSS file is protected (admin only can edit it) we should be able to include custom fonts and images.

Would that be possible? I didn't find an issue tracker or any other place to make this suggestion.

~~ Extarys Feb 15 2019 @ 20:35