Using Wiki Pages as CSS Files

This action allows any page on your wiki to be used as a CSS file. It will work even if the page contains a bunch of other wiki formatting. It simply extracts all of the code blocks with a type of css and inserts them into a tag in the header action. If the action is placed in the GlobalActions page, the CSS will be applied sitewide. The only downside with the current version is that each page is bloated up a bit by the CSS code. This will be addressed in later versions.

The Changes

You'll need to open up the "header.php" file in your actions directory and insert the following just below the links to the stylesheet:

        $global_actions = $this->LoadSingle('SELECT body FROM ' . $this->config['table_prefix'] . 'pages WHERE tag = \'GlobalActions\' AND latest = \'Y\'');
        $regex = '/\{\{customcss.+="(.+)"\}\}/sU';
        if (preg_match_all($regex, $this->page['body'] . (isset($global_actions['body']) ? $global_actions['body'] : ''), $matches))
            for ($i = 0; $i < count($matches[1]); $i++) $csspages[$matches[1][$i]] = $i + 1;
            foreach ($csspages as $csspage => $id) $params .= " file$id=\"$csspage\"";
            echo $this->Action('customcss apply="true"' . $params);

Then save the following code as "customcss.php" inside of the actions directory:


if ($this->tag == 'GlobalActions' || !$vars['apply']) return;

$tags = array();
foreach ($vars as $var => $value) if (substr($var, 0, 4) == 'file') $tags[] = $value;
$tags = join("','", $tags);

$result = $this->Query('SELECT body FROM ' . $this->config['table_prefix'] . "pages WHERE tag IN ('$tags') AND latest = 'Y'");
if (mysql_num_rows($result)) while ($row = mysql_fetch_array($result)) $pages .= $row['body'];
if (preg_match_all('|% %\(css\)(.*)% %|smU', $pages, $matches)) foreach ($matches[1] as $match) $css .= $match;
echo $css;


Please note: "% %\(css\)(.*)% %" should actually be "%%\(css\)(.*)%%"

The "apply" parameter is just a hack that makes the action fail when the page is run through the formatter. All of the work is actually done in the header.php action. No need to do it again!

Now drop something like this into a wiki page to get the whole thing working...

{{customcss file="PageCSS"}}
{{customcss file="AnotherCSSPage"}}

If you would like the CSS to be included sitewide, drop it into a page named GlobalActions. Don't worry about duplication, since any particular page will only be included once, no matter how many times it's listed.



Comments [Hide comments]
Comment by JasRandal
2005-10-15 18:49:25
I changed some of the attributes in wikki.css: background color, text from justified to left, etc. Then suddenly everything went back to default. What did I do wrong?
Comment by JasRandal
2005-10-15 19:36:10
The site blanked out, came back, and now is up with the changed attributes. Server problems? DNS servers? (I just recently moved my site.) Who knows. Anyway, I'm a happy camper again ...
Comment by DarTar
2005-10-20 08:07:39
Maybe a browser cache problem? ;)
Comment by JasRandal
2005-10-21 12:52:51
DarTar, I suspect it was the DNS servers changing the world. Anyway, no more problem since then. Now another question: in Firefox 1.0.7, the background doesn't go all the way down to the end on my front page, where I've included some pics and boxes. I check in IE and it looks fine. (Can see it at Do we have a Mozilla Firefox issue here?
Comment by DarTar
2005-10-21 12:56:59
This is because of the floats, that correctly "float" over the background. If you want to clear them, you should use ::c:: at the bottom of the page. So it's neither a Wikka nor a Firefox issue, but a IE problem, not rendering floats correctly.
Comment by KairoMiami
2007-11-21 09:26:43
Hi Denny. I have nothing showing up at:

I uploaded the customcss.php to the actions folderm changed the header.php and even changed


Can you help me getting it going? Need I change the chmod?

Tobias Kalle Aellig

Thanks. :-)
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki