20111022 common css is mediawikicommon css - plembo/onemoretech GitHub Wiki

title: Common.css is Mediawiki:common.css link: https://onemoretech.wordpress.com/2011/10/22/common-css-is-mediawikicommon-css/ author: lembobro description: post_id: 1382 created: 2011/10/22 09:40:58 created_gmt: 2011/10/22 13:40:58 comment_status: closed post_name: common-css-is-mediawikicommon-css status: publish post_type: post

Common.css is Mediawiki:common.css

That's right. Common.css isn't a file, it's a page! Why do I care? Read on for the answer. Came across this tidbit of wisdom while experimenting with Extension:SyntaxHighlight_GeSHi at home. I like GeSHi because it provides a standard way to implement syntax highlighting across different applications, including Wordpress (I have the WP-Syntax plugin installed for this blog). The main difference between the Wordpress and Mediawiki implementations are that in Wordpress you use <pre lang="[code]"> tags, like , while in Mediawiki you wrap things in <syntaxhighlight="[code]"> tags. Common "codes" for popular languages are "perl", "php", "c" and the venerable "sh". Installing the extension was easy enough (I used the ExtensionDistributor to get the complete package). But I struggled with the configuration -- specifically with how to get the solid line border and light grey background for my code. My preference was to do this by implementing the .css fragment in "Method 1", but I couldn't find any of the .css pages mentioned. Looking over at the MediaWiki_talk:Common.css I found a section entitled Where is common.css?:

Because I just spent an hour trying to figure this out myself, I thought I might share my "Duh!" moment. Common.css and common.js are pages in the wiki, itself. Enter "Mediawiki:common.css" into the search field and then edit the resulting page.

Duh! Once I understood this, the rest was easy. After copying and pasting the example .css from the GeSHi extension page into Mediawiki:common.css (including the change from "dashed" to "solid" to mimic the border style in the "modern" skin) I could now see the change in a test page that contained various snippets of code samples (to effect the change I had to hit Edit on the page and then re-save). Because the example in the doc was created to mimic the "monobook" skin, I had to adjust the background color to give it the slightly darker tone found in "modern". That was made easier by the chart in Color reference scheme for this wiki in the Common.css talk page. Here's my final .css code:

/* CSS placed here will be applied to all skins */
div.mw-geshi {
  padding: 1em; 
  margin: 1em 0; 
  border: 1px solid #2f6fab;
  background-color: #eeeeee;
}