The Basics

The edit interface is contained within a <form>, which can be styled to differentiate it from the general content.

#content form {
background: #D9D5C3;
border: 1px solid #BEB798;
margin: 3px 0;
padding: 10px 5px;
}

There are a number of elements contained within the edit interface form. These are as follows:

It is better not to define the width and the height for the <textarea> (#wpTextbox1) used to edit the wiki, because the columns and rows are defined in XHTML. There are still some small changes that can be made to help style the text area in order to match your skin, such as altering the borders and changing the background colors.

One of the most useful aspects of skinning MediaWiki is the ability to use proportional font sizes in the text area. This would be of a great help to those with disabilities, especially visually impaired persons, as it makes the editing of the content easier.

#wpTextbox1 {
font-family: georgia, "times new roman", times, sans-serif;
font-size: 100%;
}

The background and borders are defined together with the style for the other elements in the form, so as to minimize the CSS file size. The text boxes and check boxes still need styling, as do the background color and border of the text area.

#wpTextbox1, #wpSummary, #wpMinoredit, #wpWatchthis {
background: #E6E4D8;
border: 1px solid #BEB798;
margin: 5px 0;
}

The buttons at the bottom of the form are contained within .editbuttons for ease of movement, and they appear a little close to the other elements in the form. Now, we will add some space above and below them.

.editbuttons {
margin: 10px 0;
}

The "Save", "Preview", and "Diff" (difference) buttons contained within .editbuttons can now be styled to match the remaining elements in the form.

#wpSave, #wpDiff {
font-weight: normal;
}
#wpSave, #wpDiff {
background: #E6E4D8;
border: 2px solid #BEB798;
color: #38230C; /* brown */
padding: 3px 5px;
}
#wpPreview {
background: #8D1425;
border: 2px #FFFFFF solid;
color: #FFFFFF;
font-weight: bold;
padding: 3px 5px;
}

The 'Preview' button appears in red in order to encourage JazzMeet's visitors to preview their page before saving it, and thereby reduce the number of useless edits being made to the wiki. To help accentuate the "preview" button, we can move the "cancel" and "editing help" links beneath the .editbuttons div.

.editHelp {
display: block;
font-size: 75%;
margin: 5px 0;
}

The "edit" interface will now look similar to the following image:

Toolbar

You may want to limit what you change in the toolbar, as many of your visitors will already be familiar with the toolbar-based text editor on the web. You may be expecting something similar to be displayed on your website as well. Similar to the rest of MediaWiki's markup, the "edit" interface's toolbar has a unique identifying value (#toolbar).

If you want to alter the toolbar's images, you can replace the images prefixed with button_ in skins/common/images/.

Legal Notices and Warnings

#editpage-copywarn contains a warning that is displayed on the edit interface's page, thereby notifying the users that the content they submit to the wiki may be "edited mercilessly", and a reminder not to submit the copyrighted work. For JazzMeet, we will decrease the size of the text to help retain a friendly atmosphere for visitors.

#editpage-copywarn {
color: #202020;
font-size: 75%;
}