The "Preview" page acts as an interpretation of what the page you are currently editing would look like if you were to save it. The preview is placed above the edit interface so that you can make changes to the article after previewing it.

As the styling has done most of the work for us, there are only two elements of the preview page that still need to be covered. They are: previewnote, a reminder that any changes made to the page have not been saved, and #wikiPreview, the containing div for the preview.

Knowing how forgetful people can be, we can style this section to be more distinguished than it is in MonoBook, with a deep red border with a width of 2 pixels. We will also set the message that reminds us that we are only viewing the preview a little larger than other text.

#wikiPreview {
border: 2px #8D1425 solid !important;
padding: 0;
}
.previewnote {
color: #8D1425;
font-size: 150%;
}

The preview page will now appear a bit different from the normal page view, which will...