User:Macowell/Styling Mediawiki with CSS
From 2007.igem.org
m |
m |
||
| Line 8: | Line 8: | ||
But what if you don't have access to a sever? It is possible to use mediawiki itself to host the text file. This also has the advantage of all of mediawiki's collaborative editing and revisioning tools. The trick is to ask mediawiki to provide the raw text of the page. For example, if you were user foo on the igem07 wiki and you stored your css text at 'User:Foo/bar.css', you could style an arbitrary page by including the following in html tags: | But what if you don't have access to a sever? It is possible to use mediawiki itself to host the text file. This also has the advantage of all of mediawiki's collaborative editing and revisioning tools. The trick is to ask mediawiki to provide the raw text of the page. For example, if you were user foo on the igem07 wiki and you stored your css text at 'User:Foo/bar.css', you could style an arbitrary page by including the following in html tags: | ||
<link rel="stylesheet" href="/igem07/index.php?title=User:Foo/bar.css&action=raw&ctype=text/css" type="text/css" /> | <link rel="stylesheet" href="/igem07/index.php?title=User:Foo/bar.css&action=raw&ctype=text/css" type="text/css" /> | ||
| + | |||
| + | |||
| + | '''Note''': Austin Che has informed me that this is a semantically incorrect usage of the link html tag and that furthermore it should only work in the head section of an html document. However, I can't get the alternative syntax to work - it should looks something like this: | ||
| + | <style type="text/css"> @import "/igem07/index.php?title=User:Foo/bar.css&action=raw&ctype=text/css"; </style> | ||
| + | |||
Stay tuned for more example of this technique and general css resources. | Stay tuned for more example of this technique and general css resources. | ||
Latest revision as of 18:01, 2 October 2007
Mediawiki is an interesting and powerful CMS, but I typically find the way it styles its content to be spartan and linear at best. On this page you can find notes I've made about modifying how mediawiki pages are styled.
storing and importing css and javascript on mediawiki
If full html parsing is enabled on the wiki (and it is on the iGEM and OWW wikis), then you can insert arbitrary html into any page by enclosing it html tags:
<html> html and perhaps embedded css goes here <html>
However, this can quickly become very difficult to maintain, especially if you are including a large set of css declarations and/or javascript functions. Fortunately, you can use html to link in an external css file:
<link rel="stylesheet" href="http://example.com/foo/bar.css" type="text/css">
But what if you don't have access to a sever? It is possible to use mediawiki itself to host the text file. This also has the advantage of all of mediawiki's collaborative editing and revisioning tools. The trick is to ask mediawiki to provide the raw text of the page. For example, if you were user foo on the igem07 wiki and you stored your css text at 'User:Foo/bar.css', you could style an arbitrary page by including the following in html tags:
<link rel="stylesheet" href="/igem07/index.php?title=User:Foo/bar.css&action=raw&ctype=text/css" type="text/css" />
Note: Austin Che has informed me that this is a semantically incorrect usage of the link html tag and that furthermore it should only work in the head section of an html document. However, I can't get the alternative syntax to work - it should looks something like this:
<style type="text/css"> @import "/igem07/index.php?title=User:Foo/bar.css&action=raw&ctype=text/css"; </style>
Stay tuned for more example of this technique and general css resources.
