Css within wiki
From PTAGISWiki
It would extend the power of the wiki quite a bit to be able to allow page-specific CSS. And bonus points would be awarded for being able to use the wiki to track changes in the CSS itself.
This might be possible by using the <html> tag to insert something like this in a page.
<link rel="stylesheet" href="/index.php/title=Sample.css&action=raw&ctype=text/css" type="text/css" />
Contents |
Example without css
| Walla Walla District USACE |
|---|
<table cellpadding="5" cellspacing="0" border="1" style="width: 130px"> <tr> <th>'''Walla Walla District USACE'''</th> </tr> <!--GRA-LDR--> <tr> <td style="background-color: #FF4848; width: 50%;"><center>[[Interrogation Site Operational Status#GRA-LDR|<div style="font-size: 25px; color:black;">'''GRA-LDR''' </div>]]</center></td> </tr> <!--GRA-TRP--> <tr> <td style="background-color: #77FF77; width: 50%;"><center>[[Interrogation Site Operational Status#GRA-TRP|<div style="font-size: 25px; color:black;">'''GRA-TRP''' </div>]]</center></td> </tr> </table>
Example with css
| Walla Walla District USACE |
|---|
| GRA-LDR |
| GRA-TRP |
<html>
<link rel="stylesheet" href="http://www.ptagis.org/wiki.css" type="text/css">
<table cellpadding="5" cellspacing="0" border="1" style="width: 130px">
<tr>
<th>Walla Walla District USACE</th>
</tr>
<!--GRA-LDR-->
<tr>
<td class="site down">
<a href="/wiki/index.php?title="Interrogation_Site_Operational_Status">GRA-LDR</a>
</td>
</tr>
<!--GRA-TRP-->
<tr>
<td class="site up">
<a href="/wiki/index.php?title="Interrogation_Site_Operational_Status">GRA-TRP</a>
</td>
</tr>
</table>
</html>
How does it work?
I couldn't get the wiki to host and serve the CSS, but the page should be much easier to maintain and should be able to better survive wiki upgrades in the future.
It relies on the following CSS being hosted on our site:
A:link {color: black;
text-decoration: none; }
A:vlink {color: black;
text-decoration: none; }
*.site { font-size: 25px;
color:black;
text-align: center;
font-weight: bold;
width: 50%; }
*.up { background-color: #77FF77; }
*.down { background-color: #FF4848; }
Better solution: CSS Extension
There exists a CSS Extension for mediawiki that allows CSS to be inserted into a page and does not require the use of the <html> tag. The extension is here: http://www.mediawiki.org/wiki/Extension:CSS
This allows the CSS to be tracked in the page and does not require intervention by a sysadmin when the CSS changes.
