In COCANWIKI, every page may have an associated stylesheet. You can edit the stylesheet for the page by clicking on the Edit stylesheet for this page link.
There is also a global stylesheet which adds styles to every page. This is only available to the administrator through the Wiki administration link (assuming you have configured Apache to allow access to administration).
Stylesheets allow you to control the general look and layout of pages, such as changing the fonts used or changing the main header to red.
However, associated with each section of the page is a CSS id and this lets you control the look and feel of paragraphs, as the examples below show you.
Using per-section styles you can do many effects, such as multi-column layouts, floating information boxes, highlighted paragraphs and so on.
Stylesheet:
div#leftcol {
width: 45%;
}
div#rightcol {
width: 45%;
float: right;
margin-top: -1em;
}
div#rightcol p.edit_link {
margin: 20px 0px 0px 0px;
}
This is a two column layout. To achieve this, I made the right column into a floating box and set the width of both columns to 45%.
Note that the right column has to come first. It's also possible to float the left column, in which case the left column would come first.
I also had to manually adjust the position of the edit link to make it all look right.
This section has <div id="snazzy"> surrounding it, and thus I can apply arbitrary styles to create this highlighting effect.
Notice that I've also hidden the edit link.
The stars were created in The GIMP. On modern, capable browsers, the stars will appear fixed when you scroll the page.
This is a floating information box.
This box has <div id="infobox"> arround it, thus allowing me to style it with a float: right, a width, a border and a background colour.
This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box. This is just some text next to the floating information box.