Customization of your wiki’s look and feel is easy in
FogBugz. Wiki administrators have
complete control over both the wiki’s template (which lets you control the
actual HTML code that will enclose each article’s content) as well as its
stylesheet (which controls the look and feel of your HTML).
Editing a template is straightforward for anyone who has
done any basic work with HTML or CSS.
You have complete control over
the HTML and there are plenty of other variables to have fun with that’ll let
you embed everything from RSS links to styled wiki search boxes. A nice example of template customization has
already popped up thanks to the owners of the Business of Software Wiki.
However, one of the coolest (and, I’ll guess, lesser known)
features of wiki customization is the fact that the WYSIWYG editor picks up on
your stylesheet changes and lets anyone easily use your custom styles when
editing an article.
I’ll walk you through some basic template changes and
examples so you can see the WYSIWYG editor’s reactions. Check this out:
Say I start with a brand new wiki and template. The default stylesheet gives me a few font
and paragraph styles:
These are the styles and block formatting options available
right off the bat with a new template.
Now, what if I want to add my own font, paragraph, and
header styles? If I edit my template by
adding the following CSS…
span.MyCustomFont { font-family: Arial;
font-weight: bold; }
p.Emphasize { background-color: yellow; font-size: 16px; }
h2.ExtraSpace { padding: 20px; }
...I wind up with the following options:
Anybody editing an article within this wiki (or any other
wiki using this template) will now see these style options in their respective
dropdowns. Using them in the WYSIWYG
editor will also show you the resulting style.
The text below uses both “MyCustomFont” from the font menu and the
“Emphasize” paragraph style.
Fonts and paragraph styles are not the only customizations
available in the FogBugz WYSIWYG editor.
As seen above, header styles can be added via the “h2.YourStyle”
syntax. Tables inside the editor work
the exact same way. After adding the
following CSS to my template…
table.Ludicrous { font-size: 100px; BORDER-COLLAPSE: collapse; }
table.Ludicrous TR TD { border:1px solid black; color: white;
background-color: black; }
table.Ludicrous TR TH { border:1px solid black;
background-color: blue; }
table.Ludicrous TD.LessLudicrous { font-size:20px;
background-color: white; color: black;}
…I get the following table style options:
…which results in some fully customized, albeit ridiculous,
table formatting.
Once we’ve created this “Ludicrous” table, we can take
advantage of the custom table cell style we added with the “table.Ludicrous TD.LessLudicrous”
line. Place your cursor inside one of
the table cells and check out the cell formatting dropdown:
Choosing “LessLudicrous” will apply our new style.
Hopefully wiki administrators will find lots of good uses
for the custom styles and control provided by FogBugz templates and the WYSIWYG
editor.
