Skinning Malevich

Out of the box, Malevich has a very pedestrian UI - it's a black on white equivalent of VT-100. Needless to say, this is something that every team that uses Malevich - even mine! - had tried to improve first.

This, for example, is how Malevich really looks on our installation:
custommalevich.jpg

The easy way to tweak the UI is, of course, to hack the source - and the style sheets. However, the problem is that every time the base changes, the tweaks have to be re-integrated. So it quickly became obvious that something needed to be done to make user customizations as physically separate from the main code base as possible.

This is what was done.

web.config contains a parameter called skinDirectory. If this parameter is set to a code path, the code checks for the existence of two files in that directory: header.html and footer.html. If either (or both) of the files exist, they are copied into the output HTML verbatim, and become part of the page.

Note that these files should not contain a fully-formed HTML page: they are fragments of the page, not full pages of their own. They should contain HTML code that would be pasted into an existing page. In addition to HTML code, these files can contain <style> sections that would complement or override the built-in styling, and <script> sections that would add active behavior.

For example, to change the color for the title element in Malevich, as well as the color scheme for the file diff section, create header.html with the following:
<style>

H1 {
    color: DarkRed;
}

.CssLineChanged
{
    background-color: #ffff00;
}

.CssLineAdded
{
    background-color: #80ff80;
}

.CssLineDeleted
{
    background-color: #ff8080;
}

</style>


This sets the color for the title and overriders the colors for the added, changed, and deleted lines in the diff view.
changedcolors.jpg

Last edited Feb 22, 2009 at 7:29 AM by SergeySolyanik, version 3

Comments

No comments yet.