Multiple Page Backgrounds

The mh370wiki.net website uses two different colours for page backgrounds. Most of the site uses a parchment colour but the Main Page, and the pages with Passenger details, are almost black, like the instrument panel on a Boeing 777. A method to change the background for different contexts is described in the here.

Method

Define the default page background colour

The mh370wiki.net website uses the Vector skin. But the CSS Class which defines the default background colour for the article content area is #mw-content-text. This could therefore be defined in either MediaWiki:Common.css or MediaWiki:Vector.css

On the mh370wiki.net website the article content area has a border which creates a recessed bevel look. The default font styles is also defined, as shown below:-

.mw-body-content { background-color: var(--clr-grey-base-95);  /* mw-body-content is the article content area */
                   border: solid;    /* create the bevel shaped border around the page content */   
                   border-radius: 20px;
                   border-top-width: 15px;  border-top-color:  var(--clr-brown-mix-top);
                   border-bottom-width: 10px; border-bottom-color: var(--clr-brown-mix-bottom);
                   border-left-width: 12px; border-left-color:  var(--clr-brown-mix-side);
                   border-right-width: 12px; border-right-color: var(--clr-brown-mix-side);
                   font-family: Helvetica, Arial, sans-serif;
                   font-size: var(--font-size-100);
                   color: var(--clr-grey-base-5); /* not quite black */
                   font-weight: 450;  /* normal is 400 */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
                   text-rendering: optimizelegibility !important;
                   padding-left: 2em;
                   padding-right: 2em;
}

As you can see, variables have been used for colours and font sizes. The concept of a colour 'mix' is to create the light and shadow effects on the 'bevelled' screen borders.

The padding creates a whitespace on the left and right of content text.

The colour --clr-grey-base-95 is #f2f2f2;

Note: I originally used #mw-content-text but while writing this article changed to .mw-body-content because #mw-content-text is an ID and the Class is mw-body-content.

Define a colour for each separate background

The instrument panel on a Boeing 777 has a number of screens. To replicate that I created a class LCD, meaning LCD Screen.

The actual screen background colour is not black. Realistically, it is a very dark shade of grey. I selected #404040; as an appropriate colour.

Create other classes and define other background colours, but the colour is not specified as a background for these classes.

The logic is that the new class .LCD can define fonts, margins, padding or any other style for use when an LCD screen is selected. But because the content area is defined by mw-body-content, any content using the .LCD class will be contained within the space allocated, affected by the 2em padding left and right. A background colour assigned to .LCD will not apply to the entire article content area.

Solution and Application

Here is an example from the mh370wiki.net website.

This CSS has been added to MediaWiki:Common.css:-
```
.mw-body-content:has(.LCD) { background-color: var(--clr-grey-base-25); }
```
This elegant solution is only possible by using the :has() pseudo class, and hopefully it is supported by visitor's browsers.

mw-body-content is the container. If the class .LCD is anywhere on the page then the background colour of mw-body-content (the text content area of the page) is changed to --clr-grey-base-25 which is #404040.

The .LCD class can include fonts or any other CSS required when selected. As this LCD class changes the background colour to nearly black, it is important to specify new colours for text, headings and links. On the Main Page the text is amber; on passenger pages the text is white.

To use the LCD class, and change the article background, I simply include the LCD class on a page:-
```
<div class="LCD">
... content...
</div> 
```
On other websites different (brighter) backgrounds could be used for each Namespace, or to complement the images used in various contexts.

Examples

Two examples have been created for this website.

Blue Page has a pale blue background #E6F5FF.
Green Page has a pale green background #E6FFF2.

The page structure and CSS used is shown on each of these pages.

Multiple Page Backgrounds

Method

Examples

Navigation menu

Search