Show Differences

If you select the "Show Changes" option from the edit interface, you will see two columns: one that contains the last version of the page's content, and one that shows the version of the content (which has not yet been saved).

When displayed in the JazzMeet skin, the "show changes" view is displayed in two table columns alongside each other. Areas of changed content are highlighted in yellow cells in the left-hand column. Content that has been added is highlighted red, with the relevant portion of content being highlighted with a green background.

.diff-otitle is used to identify the table cell that contains the heading for the current version of the page, as saved in the wiki's database. Similarly, .diff-ntitle identifies the table cell that contains the heading for the version of the page's content in the edit box. To highlight these cells, we will make them bold, and change their colors.

.diff-otitle, .diff-ntitle {
background: #BEB798 !important;
color: #FFFFFF;
font-weight: bold;
}

The cells (<td>) that indicate the lines of the content's wiki markup are identified by .diff-lineno.

td.diff-lineno {
color: #BEB798;
}

.diff-context classifies the cells containing the content that surrounds the changed areas in them. .diff-marker identifies cells that give hints to the visitor about the content, including the cells containing a "+" or "-" to indicate whether content has been added or removed from that area. The cells containing line numbers (.diff-lineno) can also be styled by applying CSS. Because these cells are not as important as the content being changed in this table, we will give them a beige background.

.diff-context, .diff-marker {
background: #D9D5C3 !important;
}

.diff-deletedline classifies the table cells that contain a line that is present in the current page, but is now being deleted by the user. .diff-addedline, originally, classifies the content that has been inserted compared to the current version.

Lastly, .diffchange identifies the area of the text that has been added to the current version. It looks fine in its default red, but we will style it to become our 'JazzMeet' beige instead.

.diffchange {
color: #BEB798 !important;
}

Although these changes have only styled a small portion of the wiki, they will help to integrate the skin fully across the wiki. If the elements are not styled as consistently as they were in MonoBook, we will have a very poor skin.