Extension talk:PageCSS

From mediawiki.org
Latest comment: 11 years ago by DanielRenfro in topic Patch for MW v1.19.2

Quick correction to extension page[edit]

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[edit]

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

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)Reply
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)Reply


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)Reply

Er, installation?[edit]

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)Reply

require_once('$IP/extensions/PageCSS/PageCSS.php');
  • For more question / troubles just ask^^'

ItsMeIGuess 12:18, 5 March 2008 (UTC)Reply

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)Reply

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)Reply

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

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)Reply

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)Reply

Fixes and Patches[edit]

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)Reply

Example not working[edit]

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)Reply

Hide navigation bar?[edit]

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

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)Reply

Tool Missing from Configuration[edit]

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

Patch for MW v1.19.2[edit]

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)Reply