<n>This article was originally published on the <a href="http://encodo.com/view_entry.php?id=124"><b>Encodo Blogs</b></a>. Browse on over to see more!</n> <hr> Once you've got an XWiki up and running (whether you <a href="http://encodo.com/en/view_article.php?id=73">imported a Mediawiki</a> or not), you'll find you want to tweak the standard rollout a bit. <h>Speeding up XWiki</h> After working a while with XWiki, you may notice it getting slower. Our XWiki was kind of slow from the get-go and we pretty quickly figured out why: the slowdown was caused almost entirely by the pretty, DHTML list of all pages in the panel on the right side. It apparently takes quite some time to build this list (and ours included hundreds of pages from the import); it will have to go. We edited the side-panel to replace the culprit <c>Panels.SpaceDocs</c> with <c>Panels.Spaces</c>. This still gives us the ability to navigate directly to a spaces WebHome, but doesn't waste time building up enormous lists of pages that we almost never used.<fn> Navigate to your Main-Page and enjoy your lightning fast XWiki. <ft>Another solution would be to build a custom panel that uses AJAX to retrieve the list of pages (paginated, of course) for the space you selected. It could even have a drop-down to search/limit the pages that are shown. Unfortunately, this panel doesn't exist yet and we didn't have time to build it.</ft> <h>Changing the default editor</h> Since the WYSIWYG editor trashed some of our converted pages (we never investigated why exactly) we switched the default editor to the XWiki editor. This can be done for all users by setting the default editor on the <c>Administration/Preferences/Editing</c> page. Each user can override this behaviour on their own user page. <h>Changes to the default skin</h> Although the newest XWiki seems have a skin other than Albatross as a default, we updated the current skin to fix up the following things that annoyed us: <ul> The default heading sizes are simply enormous The comments/attachments boxes are way too bulky, showing up as huge blue splotches at the bottom of every page. The default formatting for <c>

</c> and <c></c> blocks takes up way too much space
Tables have enormous margins and are bright blue
Table-of-contents entries (displayed with the <c>#toc</c> macro) show up with bullets---even when they're numbered.
The print-preview page has a thick, black border around it and it always prints the XWiki logo rather than the logo from the skin
The "page not found" marker is over-the-top and distracting
Definition lists have only default HTML formatting, which gives the definition block way too much left margin
</ul>

Our fixes for these things are shown below. <a href="http://www.answers.com/ymmv?cat=technology&nafid=3">YMMV</a>.

<h level="4">Setting Defaults</h>

The first step is to <a href="http://platform.xwiki.org/xwiki/bin/view/AdminGuide/Skins">create a custom skin</a> (as described under "changing the logo for the Albatross skin"). Once you've done that, from the same form that you set the <c>logo</c> property, you can set your own <c>style</c> (it should be the second property in the form).

You can type any valid CSS into this box and it will be included in all of your XWiki pages. In fact, if this property is non-empty, <i>it is the only skin-CSS included by XWiki</i>. It sounds ominous; what does it mean? It means that you must copy the entire Albatross skin-CSS to your custom skin in order to at least start off with the base look-and-feel. The best way to do this is with the following standard CSS import<fn>:

<code>@import "http://yourwiki/xwiki/skins/albatross/style.css";</code>

After this import statement, feel free to include any of the CSS snippets below.

<h level="4">Fixing Headings</h>

Each heading has its own CSS-class associated with it. You have to set each and every one and our settings are shown below. We used values that matched our CI, more or less.

<code>.heading-1 {
  font-size:14pt;
  margin:12pt 0pt 3pt;
  padding:0pt;
  line-height:1.5em;
}
.heading-1-1 {
  font-size:12pt;
  margin:12pt 0pt 3pt;
  padding:0pt;
  line-height:1.5em;
}
.heading-1-1-1 {
  font-size:12pt;
  margin:12pt 0pt 3pt;
  padding:0pt;
  line-height:1.5em;
  font-weight: bold;
}
.heading-1-1-1-1 {
  font-size:10pt;
  margin:12pt 0pt 3pt;
  padding:0pt;
  line-height:1.5em;
  font-weight: bold;
}
.heading-1-1-1-1-1 {
  font-size:10pt;
  margin:12pt 0pt 3pt;
  padding:0pt;
  line-height:1.5em;
  font-weight: bold;
}</code>

<h level="4">Fixing Code and Preformatted Blocks </h>

As with most of the other updates, this fix involves removing a lot of padding and margins, as well as toning down the coloring. We use the "Consolas" font by default because we all have Office 2007 installed (you'll want other defaults, like "Monaco" if you're using OS X). Code blocks still have a light-grey background color, whereas pure preformatted blocks no longer have any color or border at all.

<code>.code {
background-color:#EEEEEE;
border:1px dotted #336699;
font-family:"Consolas",courier new,monospace;
font-size:9pt;
margin-bottom:4px;
margin-top:4px;
overflow:auto;
padding:5px;
white-space:pre;
width:85%;
}

.code pre {
padding: 0px;
margin: 0px;
border-width: 0px;
background-color: #EEEEEE;
}

pre {
background-color: white;
border: 0px;
padding:4px;
}</code>

<h level="4">Fixing the Table-of-Contents</h>

This is an easy one: simply remove the bullets.

<code>.tocEntry {
list-style-type: none;
}</code>

<h level="4">Fixing Tables</h>

Tone down colors; remove margins and padding; make the hurting stop. Note the use of the <c>!important</c> CSS directive to force the style to be used over another, more-specific style defined in another stylesheet.

<code>.wiki-table th, .wiki-table td {
padding: 2px;
}

.wiki-table th {
padding: 4px 2px;
font-size: 100%;
font-weight: bold;
background-color: #EEEEEE;
border-bottom: 1px dotted #336699;
}

.wiki-table {
margin: .5em 0em;
border: 1px dotted #336699 !important;
background-color: #EEEEEE;
}</code>

<h level="4">Fixing Definition Lists</h>

Make definition terms bold by default; fix up the margins for the definition body. Definition lists are really useful in wikis, so it's important that they look good.

<code>dt {
  font-weight: bold;
}

dd {
  margin: .15em 1.5em .75em 1.5em;
}</code>

<h level="4">Fixing Comments/Attachments</h>

These areas benefit from the fixes for tables made above, but they still need a bit more massaging before their color and margins are subdued enough---they are, after all, not the main elements on the page. The fixes involve setting the remaining backgrounds/background-colors to <c>none</c> or <c>transparent</c>.

<code>.xwikiintratitle {
font-size:100%;
font-style:normal;
font-weight:bold;
margin:0px;
padding:8px 0px;
}

#xwikidata #attachmentscontent, #xwikidata #attw, #xwikidata #commentscontent, #xwikidata #commentscontent .xwikititlewrapper
{
  background: none;
}

#xwikidatacontents
{
  margin: 1em 0em;
}</code>

<h level="4">Fixing "Page-not-found" Links</h>

This fix removes the background color and turns the question mark brick-red, which is much more subtle than the default.

<code>.wikicreatelinkqm
{
  background: transparent;
  color: #CC0000;
  font-weight: bold;
}</code>

<h level="4">Fixing Print-Preview</h>

And, finally, printing: here we remove the print header entirely<fn> and take out the borders on the two main containers. The border change will affect the non-printing view as well, but it has no visible affect.

<code>#printheader
{
  display: none;
}

#xwikimaincontainerinner
{
  border: 0px;
}

#xwikimaincontainer
{
  border: 0px;
}</code>

<hr>

<ft>Another way to update the stylesheet is to put all of your styles into your own file on your XWiki server, then <c>import</c> that file instead.</ft>
<ft>The logo is hard-coded and cannot be easily replaced, though you could probably do so by replacing some page, panel or code extension somewhere</ft>