Content

Filling your wiki page with adequate content is a better way to check whether every element is taken into account when they are being styled. In the process, it is useful to include the following elements:

For JazzMeet, a wiki markup is used to create content for the page. You may be more comfortable in creating some dummy content that goes with the theme of your wiki.

<!-- this is a comment-->
'''JazzMeet Durham''' is a community-organised jazz festival in the city of Durham, England. For information on what exactly a JazzMeet is, see [[WhatIsJazzMeet]]).
[[Image:Example.png|An example image]]
==JazzMeet Durham: Details==
It's planned to happen on the '''9th of August''' 2008, and is being organised by [[User:Richard]] and [[User:Michael]]. It'll ''hopefully'' start around 2pm (14:00 for those military-types).
===Venue===
The venue is [http://www.dur.ac.uk/collingwood Collingwood College] ([http://www.dur.ac.uk Durham University]), which has a maximum capacity of 150.
===Volunteers===
[[Image:Example.png|thumb|An example image]]
As with every JazzMeet event, these people have kindly volunteered to donate the following goodies at JazzMeet Durham:
* '''T-shirts''': [[User:David]] of [http://www.packtpub.com Packt].
* '''Door woman''' (14:00 - 18:30): [[User:DS]].
* '''Ticket printing + design''': [[User:Richard]] of [http://www.peacockcarter.co.uk Peacock, Carter &amp; Associates].
====Want to help?====
Great! Add your name below.
=====Add Your Name Here=====
{| border="1"
|-
! Food
| [[User:Michael]]
| Sarah
|-
! Drink
| Danielle
| [[User:Richard]]
|-
! Tickets (on the door)
| [[User:David]]
| [[User:Richard]]
|}
======More Details======
Contact [[User:Richard]] for more details.
==The Bands==
The most important part of JazzMeet events is the '''music''', and we've got some great artists lined up so far!
# '''14:00 - 15:30''': Richie Vitale ([http://www.richievitale.com www.richievitale.com]).
# '''15:30 - 16:30''': Ralph Lalama.
# '''17:00 - 18:15''': TBA.
[[Category:JazzMeetEngland]]

The Content Block: #content

We will have to apply CSS to #content div in order to style the content body so as to match our proposed design. At the same time, we will restyle the links in the content area to match our color scheme. We will make the visited links dark beige, links that are hovered over as brown, and the non-underlined, and any other link as red and underlined. The paragraphs in the main content area are given larger text, and more leading (line-height) to make the content easier to read.

#content {
background: #E6E4D8 url("content_bg.gif") repeat-y top left;
color: #000000;
font-family: georgia, "times new roman", times, serif;
padding: 10px 5px 10px 35px;
width: auto;
}
#content p, #content ul, #content ol {
font-size: 100%;
line-height: 175%;
}
#content strong, #content b {
color: #8C1425 !important;
}
#content a, #content a:active, #content a:link {
color: #8C1425;
font-weight: bold;
}
#content a:visited {
color: #857F61;
}
a.text {
border-color: #8C1425;
color: #8C1425;
}
#content a:hover, a:hover.text {
color: #38230C !important;
text-decoration: none !important;
}

#siteSub, the <h3> heading, informs the visitors where the content is from (for example, "From JazzMeet"). This is hidden and is a repetition of some other content on the page. For the same reason, #jump-to-nav is also hidden. Although this it is useful for visitors using screen readers, it is a nuisance to those using modern browsers.

#siteSub, #jump-to-nav {
display: none;
}

MediaWiki differentiates between links of various types by applying classes to them. a.new classifies links that lead to another page on the wiki, but that page has not yet been created. #p-personal contains user links to their talk page, preferences, and the register and log page, which will be discussed later.

a.new, #p-personal a.new {
background: transparent url("a.new.gif") no-repeat top left;
text-decoration: underline;
padding-left: 20px;
}
a.new:visited, #p-personal a.new:visited {
color: #8C1425 !important;
}
.text, .external {
color: #38230C;
}

.external is used to refer to hyperlinks that go beyond the wiki's namespace (for example, the links created by wiki markup in the following syntax:[http://www.example.com/example.com])]).

For an external text link, the XHTML generated is as follows:

<a  class="external text" title="http://www.example.com" rel="nofollow">example.com</a>

Thus, the .text class classifies text links. Because MediaWiki does not allow external links on images, text is used to identify only external text links.

Headings: .mw-headline, .firstHeading

.firstHeading is applied to the<h1> tag, which contains the page's main title. Other headings within the #bodyContent div are classified by the .mw-headline class. The "edit" link is denoted by the .editsection class.

In the case study's design, the page title is displayed in a deep red color (#8D1425) in the typeface "Georgia". We can replace any CSS in the main.css file regarding .firstHeading with the following:

h1, .firstHeading {
background: transparent url("firstHeading.gif") center left no-repeat;
border-width: 0;
color: #8D1425;
font-size: 2.2em !important;
font-weight: bold;
margin-bottom: .1em;
margin-left: -35px;
padding-left: 35px;
}

Once you have uploaded your new CSS file, refresh your page. The main page heading will now appear in red and, if it is not specified, the font of the content area will now be changed to your browser's default "serif" font.

In the design for JazzMeet,<h2> headings appear in brown color, while other headings appear in dark beige along with smaller text for the headings further down the hierarchy.

#content h2, #content h3, #content h4, #content h5, #content h6 {
border-width: 0;
}
h3 .mw-headline, h4 .mw-headline, h5 .mw-headline, h6 .mw-headline {
color: #857F61;
}
h2 .mw-headline {
color: #38230C;
font-size: 120% !important;
font-weight: bold;
}
h3 .mw-headline {
font-size: 120%;
}
h4 .mw-headline {
font-size: 115%;
}
h5 .mw-headline, h6 .mw-headline {
font-size: 110%;
}
h6 .mw-headline {
text-transform: uppercase;
}

Finally, we can change the color of the "edit" link that appears alongside each sectional heading, by applying style to the .editsection class.

.editsection {
color: #BEB798 !important;
}
.editsection a, .editsection a:active, .editsection a:link, .editsection a:visited {
color: #BEB798 !important;
text-transform: uppercase;
}

You can render the "edit" link invisible by using display: none. However, this will not stop the visitors from editing your pages if they alter the wiki page's URL from index.php?title= Page_Name to index.php?title=Page_Name&action=edit.

Table Of Contents: #toc, .toc

The table of contents is defined with #toc. It contains an unordered list (<ul>) with links to anchors in the page. Each point in the table of contents is defined in a list item (<li>) tag, and the elements in the list item are separated with<span> tags.

<table id="toc" class="toc" summary="Contents"><tr><td>
<div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1"><a href="#Heading"><span class="tocnumber">1</span> <span class="toctext">Heading</span></a>
<ul>
<li class="toclevel-2"><a href="#Sub-heading"><span class="tocnumber">1.1</span> <span class="toctext">Sub-heading</span></a></li>
</ul>
</li>
<li class="toclevel-1"><a href="#Another_heading"><span class="tocnumber">2</span> <span class="toctext">Another heading</span></a></li>
<li class="toclevel-1"><a href="#Another_heading_2"><span class="tocnumber">3</span> <span class="toctext">Another heading</span></a></li>
</ul>
</td>
</tr>
</table>

.toc and #toc apply to the table that surrounds the table of contents. The class applied to the list item itself, .toclevel-x, changes depending on where the heading is placed in the table of contents. Here, 'x' is a number that represents the level of the heading (from 1 to 6). .tocnumber classifies the number of the headings in the table of contents, and .toctext spans the actual text of the heading.

.toctitle defines the div that contains the heading for the table of contents ("Contents"), a<h2> tag. We will align it to the left, so that the toggle link for showing and hiding the table of contents can be floated to the right by defining a style for .toctoggle. In order to match the new skin's color scheme, we will alter the colors of the links, and ensure that the future styling of the table does not affect the table of contents by resetting the border-width attribute to null.

#toc, .toc {
border: 1px solid #BEB798 !important;
background: #D9D5C3 !important;
font-size: 75% !important;
margin: 0 10px 10px 0 !important;
padding: 5px !important;
}
#toc h2, .toc h2 {
border-width: 0;
color: #8D1425;
display: inline;
padding: 0;
font-size: 110%;
font-weight: bold;
}
.toc td, .toc th, #toc td, #toc th { /* prevents inheritance of default #content table styling */
border-width: 0 !important;
}
#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
text-align: left;
}
#toc ul, .toc ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-align: left;
}
#toc ul ul, .toc ul ul {
margin: 0 0 0 5px;
}
#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
text-align: left;
}
#toc .toctoggle, .toc .toctoggle {
display: inline;
font-size: 90% !important;
float: right;
text-transform: uppercase;
}
#toc a, #toc a:active, #toc a:link, #toc a:visited {
color: #8D1425;
}

Another option for the table of contents is to render it invisible through the use of .toc, #toc {display: none}.

Categories

MediaWiki allows pages to be assigned to one or more "categories", much like bloggers can "tag" their articles with different keywords. .catlinks classifies this content, which only appears on a page when a page has been assigned to one or more categories. This can be done by adding [[Category:CategoryName]] to the page.

In order to match the case study's color scheme, we can restyle the category links div to a darker beige color and using a border to make it distinct from the remainder of the content area. The text is made slightly smaller, as it is not likely to be prime content for most of our visitors.

#catlinks {
border: 1px solid #BEB798;
background: #D9D5C3;
font-size: 85%;
padding: 5px;
margin: 10px 5px;
clear: both;
}

The link colors for the "category" block will be inherited from the ones that are specified for the links in #content.

Images

There are two methods for inserting images into a wiki page with wiki markup. Firstly, only [[Image:ImageName.jpg|Image description]] can be used. This inserts the image in to the page and assigns it to the .image class. Secondly, the [[Image:ImageName.jpg|thumb|Image description]] or [[Image:ImageName.jpg|thumb|left|Image description]] syntax can be used to insert the image ImageName.jpg.

The images in the JazzMeet concept are floated, but this is achieved by using inline CSS in the wiki page. If you attempt to float images in #content or #bodyContent, you will realize that it causes difficulties on other pages, including the redirect pages. However, we will still give a beige-colored border to the images..

.image img {
border: 5px #BEB798 solid;
margin: 10px;
max-width: 500px;
}
.thumb .image {
border-width: 0;
}

This gives the maximum width to an image which prevents the image from covering other content (such as the right-hand column) if an over-sized image is uploaded and added to a page. It also removes the border from the image thumbnail, since we want thumbnails to appear different to normal images.

Thumbnail Images

The thumbnail XHTML is reasonably complex. It has the capacity to hold the caption for the image, as well as an icon that links to the full-size version of the image.

By default, thumbnail images float to the right (inherited from the .tright class), but the position of the image on the page can be overridden by the user with the syntax [[Image:ImageName.jpg|thumb|left|Image description]]. This replaces the .tright class with the .tleft class. Refer to the following code:

.tright {
clear: right;
float: right;
margin: 5px 0 5px 10px;
}
.tleft {
clear: left;
float: left;
margin: 5px 10px 5px 0;
}

For the JazzMeet wiki, thumbnails need to be restyled in order to coordinate them with the rest of the content.

.thumb {
background: #D9D5C3;
border: 1px #BEB798 solid;
padding: 5px;
width: auto;
}
.thumb .image img {
border: 1px #BEB798 solid;
width: 140px;
}
.thumbcaption {
font-size: 80% !important;
font-style: italic;
padding: 0 5px !important;
}

We can also change the styling of the "magnify" image that links to the larger image, by altering both .magnify and .magnify img.

.magnify {
float: left;
width: auto;
}
.magnify img {
float: left;
width: auto;
}

You can change the "magnify" image to match your skin's theme by replacing (or creating) a file called magnify-clip.png in the skins/common/images/ directory. Browsers such as Internet Explorer and Firefox need to be told that the image should not be displayed with a border around it.

.magnify img, .magnify img a {
border-width: 0 !important;
}

This styles the thumbnails in a manner similar to the one in MonoBook, but in the JazzMeet color scheme, as shown in the following screenshot. Note that the "magnify" icon in the bottom right of the thumbnail has not been altered:

Tables

At this point, the tables on your test wiki page are likely to be styled with your browser's default styling. We can coordinate the styling of the tables in the content area with the remainder of the page's content. Refer to the following code:

#content table {
background: transparent;
border-width: 0;
}
#content th, #content td {
padding: 5px;
}
#content th {
background: #BEB798;
border-width: 0;
color: #FFFFFF;
font-weight: bold;
}
#content td {
border: 1px #BEB798 solid;
}
#content caption {
display: none;
}

This gives a very simple default style for the tables. Wiki markup allows users to restyle tables to some extent.

Talk Pages

A few changes need to be made so as to alter the talk page and message notifications that appear at the top of wiki pages when a user is logged in and receives a new message on their talk page.

New Message Notification: .usermessage

.usermessage classifies the div that appears when a new message is received on a user's talk page.

.usermessage {
background: #D9D5C3 url("usermessage.gif") top left no-repeat;
border: 2px #8D1425 solid;
color: black;
font-weight: bold;
margin: 2em 0 1em;
padding: 15px 5px 15px 60px;
vertical-align: middle;
}

After uploading the CSS and placing a suitable image, errormessage.gif in the skin folder, a message box is produced on your talk page as seen in the following image:

Redirect Pages

Redirect pages are partially styled through the application of the CSS previously mentioned, but you can address the content of redirect pages on MediaWiki with the use of the .redirectText class. The only text that appears on redirect pages is the name of the page, so we'll make the text easier to read by enlarging it.

.redirectText {
font-size: 175%;
}

You can specify an image to display beside the name of the page. This can be done either by creating an image or by replacing the image in the skins/common/images/ directory named redirectltr.png. (For the sake of consistency, you could replace redirectrtl.png too).

Image Detail Pages

An image detail page displays a full-size image in an article. Most of our work in styling this page will be already done if #content has been styled. #filetoc, an unordered list, contains the table of contents for the uploaded media pages. It can also be altered so as to match the rest of the wiki. Refer to the following code:

ul#filetoc {
border: 1px solid #aaaaaa;
background: #D9D5C3;
border: 1px #BEB798 solid;
font-size: 90%;
margin: 10px;
padding: 5px;
}
#filetoc li {
display: inline;
list-style-type: none;
margin: 5px;
}
h2#filelinks {
color: #857F61;
font-weight: bold;
text-transform: uppercase;
}

Some pages in the wiki that make use of the image are listed, and this header can be styled by applying CSS to h2#filelinks.

h2#filelinks {
color: #857F61;
font-weight: bold;
text-transform: uppercase;
talk pagesimage detail pages, styling}

Empty Articles

A message appears when you visit a non-existent URL within the wiki's namespace, by typing the page's address manually into your browser's address bar. This message does not appear if you follow a link to an article that does not exist. In that case, you are redirected to the edit interface to begin creating the page.

This message can be styled using div.noarticletext. If the message appears on the screen, it means that not much text is on the page. We can therefore make the message more prominent by enlarging the text.

.noarticletext {
font-size: 150%;
}

Search Results

As search results are paginated, you can style the elements that appear in the search results page (Special:Search) by addressing them directly, and by making use of the unique class name assigned to each page's <body> tag in the wiki .page-Special_Search.

Recent Changes

Similarly, the recent changes page (Special:Recentchanges) needs no alteration to finish skinning it, but can be styled by reference to .page-Special_Recentchanges.