Extension talk:PageCSS

Quick correction to extension page

If anyone installs this and wants to use the two examples on the extension front page - one quick note: The line #firstHeading should actually be a class, not an ID. So, the entry should be:

 <css>
  .firstHeading .....
 </css>

This may be different for different versions of MediaWiki - but for 1.11.1 it is a class.

Thanks for the extension! Enjoy all!

Qaaz

Thanks

Thanks for this extension, better than the other. --Add 13:23, 29 December 2007 (UTC)

OhOh, I have a problem!!! the extension don't support pictures background. I explain my self:

I would change a background on user page,the user choose. But if I put that code it don't work(the background is an example)...

<code>
<css>
#perso { background:url(http://roleplay.gwiki.fr/w/skins/GWRPv2/Divers/acb90eb5.png);
  background-position:top;
  background-repeat: no-repeat;}
</css>
</code>

Could someone help me, please. thaks.--Add 23:26, 29 December 2007 (UTC)

The problem is that the Sanitizer::checkCss-function (a function that is used by this script) does not allow background-images for security reasons.

You could either edit the Code of PageCSS and get rid of this function (trust me, you do not want to do that), use "img" inside a div or other css/html constructs or define the background-image in the mediawiki:Common.css. -- Brean 23:18, 2 January 2009 (UTC)

Why would you not want remove this function, what are the possibilities that could occur? --205.232.42.46 14:54, 16 July 2009 (UTC)

Er, installation?

What do I need to do to install this? I'd like to be able to allow CSS for each user who wants to use it on the pages they create, but I don't know how to install this extension. 75.167.200.148 01:10, 5 March 2008 (UTC)

• download this folder svn:trunk/extensions/PageCSS into /path/of/your/wiki/extensions/
• Add to /path/of/your/wiki/LocalSettings.php

require_once('$IP/extensions/PageCSS/PageCSS.php');

• For more question / troubles just ask^^'

ItsMeIGuess 12:18, 5 March 2008 (UTC)

Thank you! I apologize for sounding like the total newb that I am to this, but I want to have the following CSS on one page:

body { 
cursor: default;  
margin: 0px; 
color: #93A9C0; 
background-color: #2E3A3C;
background-image: url('images/background.jpg');
background-repeat:repeat-x;
scrollbar-Base-Color:#62E3A3C;
scrollbar-DarkShadow-Color:#2E3A3C; 
scrollbar-Track-Color:#2E3A3C; 
scrollbar-Face-Color:#2E3A3C; 
scrollbar-Shadow-Color: #93A9C0; 
scrollbar-3dLight-Color:#93A9C0; 
scrollbar-Highlight-Color:#2E3A3C; 
scrollbar-Arrow-Color:#93A9C0;
}


A {cursor: crosshair; font-size: 11px;
}
a:link{color: #FFFFFF; text-decoration: none;
}

a:active{color: #FFFFFF; text-decoration: none;
}

a:visited{color: #FFFFFF; text-decoration: none;
}


a:hover{cursor: crosshair; color:#000000; background-color: #FFFFFF; text-decoration: underline; border: none;height:0px)   
}

a:hover img {border: 1px dotted #FFFFFF;
}

a:active img {border: 1px solid #93A9C0;
}

a:visited img {border: 1px solid #93A9C0;
}

a:link img {border: 1px solid #93A9C0;
}

table {font: 11px verdana, arial; color: #93A9C0}


.header {
	border: 2px solid #504F50;
	padding: 5px;
	font-size: 14px;
	color: #93A9C0; 
	font-family: verdana, tahoma;
	font-weight: bold;
	letter-spacing: 0px; 
	height: 30px;
	width: 400px;
	BACKGROUND-COLOR: #FFFFFF;
	background-image: url('images/header1.jpg');
	text-align:left; 
	
}
.header2 {
	padding:0px; 
	padding-left: 6px;
	padding-top: 0px;
	border: none;
	FONT-SIZE: 10px;
	COLOR: #FFFFFF; 
	FONT-FAMILY: verdana, tahoma;
	FONT-WEIGHT: bold;
	LETTER-SPACING: 0px; 
	height: 30px;
	width: 150px;
	background-image: url('images/navi.gif');
	TEXT-ALIGN:left; 
}





.left { padding: 3px;
	COLOR: #93A9C0;
        FONT-FAMILY: verdana, arial, tahoma;
        	LETTER-SPACING: 0px;
        	line-height: normal;
        	FONT-SIZE: 11px;
        	text-align:justify; 
       
       
}  
       

.bottom { padding: 0px;
		padding-top: 17px;
		padding-left: 17px;
		padding-right: 17px;
		BORDER-BOTTOM: #none;
		COLOR: #93A9C0;
        FONT-FAMILY: verdana, arial;
        LETTER-SPACING: 0px;
        FONT-SIZE: 11px;
        text-align:left; 
        font-weight:normal;
       
       
}  




.content {
 		border-color: #504F50; 
 		border-style: solid; 
		border-top: 0px; 
		border-right: 1px solid #504F50; 
		border-left: 1px solid #504F50;
		border-bottom: 4px solid #504F50; 
		background-color: #192121; 
		align: center;
		color: #93A9C0;
}

.nav {
 		border-color: #none ; 
 		border-style: none; 
		border-top: 0px; 
		border-right: 0px; 
		border-bottom: 0px; 
		border-left: 0px; 
		align: left;
		letter-spacing: 0px;
		font-family: Verdana;
		font-size: 11px;
		text-align:justify;
		
}


.empty {
		border-color: #none; 
		border-style: none; 
		border: none; 
		align: left; 
}



INPUT {
background-color: #2E3A3C;
border: 1px solid #93A9C0;
color: #93A9C0;
font-family: arial, verdana, tahoma;
font-weight: normal;
font-size: 11pt;
} 

TEXTAREA {
background-color: #2E3A3C;
border: 1px solid #93A9C0 ;
color: #93A9C0;
font-family: arial, verdana, tahoma;
font-size: 11pt;
font-weight: normal
} 

.altButtonFormat {
background-color: #2E3A3C;
font-family: verdana;
border: 1px solid #93A9C0;
font-size: 11px;
color: #93A9C0;
} 

.altTextField {
background-color: #2E3A3C;
font-family: verdana;
font-size: 11pt;
color: #93A9C0;
} 

.radioStyle {
background-color: #2E3A3C;
border: 1px solid #93A9C0;
font-family: verdana;
font-size: 11px;
color: #93A9C0;
}

But, I get the following error:

Fatal error: Call to undefined method Sanitizer::checkcss() in /home/xxxx/public_html/wiki/extensions/PageCSS/PageCSS.php on line 28

Can I add all of that CSS to a single page? If so, how do I get it to work? Thank you so much for taking the time to reply. I really appreciate it ^_^

75.167.200.148 13:11, 6 March 2008 (UTC)

Doesn't look like the problem is caused by the css (couldn't really check yet, to tired(sorry for seeing this so late but my mega-paranoid spam filter was kinda trashing the notification... ItsMeIGuess 19:25, 20 March 2008 (UTC)

By the way: what version of mediawiki do you use? ItsMeIGuess 19:36, 20 March 2008 (UTC)

Sorry for the delay in response. My comp crashed. I'm running two versions on different servers for different sites. One version is 1.6.8 See Here The other is 1.11.0 See Here Thank you so much. I hope you can help me get this figured out. 75.167.205.251 14:11, 8 April 2008 (UTC)

Hi. Simply remove all "background-image:"-commands and you will be happy (see my posting above if you want to know why). -- Brean 23:18, 2 January 2009 (UTC)

Fixes and Patches

Hi, I just added a small patch for PageCSS, because I noticed that the CSS-Code of templates, that uses PageCSS and that are included more than once in a page, is also added more than once. So here is the diff of my patch:

20,21d19
< $already_included_content[] = array();
30d27
<               global $already_included_content;
32,36c29
<                 //make sure data is included only once
<               $is_in = in_array($css, $already_included_content);
<               if (!in_array($css, $already_included_content)) {
<                       array_push($already_included_content, $css);
<                       $parser->mOutput->addHeadItem( <<<EOT
---
>               $parser->mOutput->addHeadItem( <<<EOT
43,44c36
<                       );
<               }
---
>               );

I am saving the whole CSS-Text in an array. I know that this is not the best way, because the whole text will be checked every time a file with css-code is included. For example if you only get the filename of the included php-file and save that in the array it would be better, but I have not figured out how to do that.

Another solution would be to parse the CSS content and check, which the CSS-classes are already defined, but I think that would be a bit to complex for this.

Greetings from Bremen, Germany! -- Brean 22:38, 2 January 2009 (UTC)

Example not working

We tried the examples on this page but they did not work. Finally we used this:

<css>
#mw_content{ background-color: yellow; }
</css>

which does work. --Robinson Weijman 08:15, 19 May 2010 (UTC)

Hide navigation bar?

Can this be used to hide the whole navigation bar, per page? --Robinson Weijman 12:41, 2 August 2010 (UTC)

Update: we've done it:

<css>
#column-content {margin: 0 0 .6em 0;}
#content {margin: 2.8em 0 0 0;}
#p-logo, .generated-sidebar, #p-lang, #p-tb, #p-search {
   display:none;
}
#p-cactions { left: .1em; }
#footer { display:none; }
#mw_content { margin-left:0.2em; }
</css>

--Robinson weijman 12:25, 31 January 2011 (UTC)

Tool Missing from Configuration

Upon trying to install extension, it says it does not exist. Nazeo (talk) 04:27, 16 July 2012 (UTC)

Patch for MW v1.19.2

This extension does not work with v1.19.2 (and possible some versions prior to that.) A simple fix is to correct the PageCSS::hook() method. You can find the patch below. If you'd like to do this by hand, just remove the lines marked in red (starting with a minus sign) and replace them with the lines in green (which start with a plus.)

--- PageCSS.php.original        2012-10-10 16:48:53.000000000 -0400
+++ PageCSS.php 2012-10-10 16:53:05.000000000 -0400
@@ -51,11 +51,11 @@
                        return '';
                }

-               public function hook( &$css ) {
-                       if ( $this->mCss != '' )
-                               $css = "/*<![CDATA[*/\n" . htmlspecialchars( $this->mCss ) . "\n/*]]>*/";
-
-                       return false;
+               public function hook( OutputPage $out, Skin $skin ) {
+                       if ( $this->mCss ) {
+                               $out->addInlineStyle( $this->mCss );
+                       }
+                       return true;
                }
        }

--Daniel Renfro ^talk/_email 20:59, 10 October 2012 (UTC)