Site technical details: Difference between revisions

From Road Traffic Injury
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This site mostly relies on default settings of MediaWiki with few exceptions.
This site mostly relies on default settings of MediaWiki with few exceptions.


== Heading style changes ==
= Heading style changes =
The default heading style for some levels is the same. This makes it difficult to read pages where more than 3 levels of heading is needed.
The default heading style for some levels is the same. This makes it difficult to read pages where more than 3 levels of heading is needed.


The default styles are:
The styles used in this site are:
= H1 =
== H2 ==
== H2 ==
=== H3 ===
=== H3 ===
Line 9: Line 14:
===== H5 =====
===== H5 =====
====== H6 ======
====== H6 ======
```mediawiki
== Heading style changes ==
=== Before the changes ===
Before the custom CSS was added, the wiki used the default MediaWiki heading styles. The difference between H3, H4, H5 and H6 was not always clear.
The first custom version used different colours and styles:
<syntaxhighlight lang="css">
.mw-parser-output h4 {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    padding-bottom: 0.25em;
    font-size: 1.3em;
    line-height: 1.3;
    font-weight: 700;
    color: #2a4b8d;
    border-bottom: 1px solid #a2a9b1;
}
.mw-parser-output h5 {
    margin-top: 1.25em;
    margin-bottom: 0.45em;
    margin-left: 1em;
    padding-left: 0.65em;
    font-size: 1.08em;
    line-height: 1.35;
    font-weight: 600;
    font-style: italic;
    color: #54595d;
    border-left: 3px solid #a2a9b1;
}
</syntaxhighlight>
This version was removed because the colours, italics and vertical border did not match the rest of the wiki.
=== Current heading styles ===
The current version uses black text and a descending size hierarchy:
* H1 is the largest heading and has no underline.
* H2 is smaller than H1 and has an underline.
* H3 is smaller than H2 and has no underline.
* H4 is smaller than H3 and has an underline.
* H5 is smaller than H4 and has no underline.
* H6 is the smallest heading and has an underline.
=== Current CSS ===
<syntaxhighlight lang="css">
/* Consistent black heading hierarchy */
#firstHeading,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
    color: #000;
}
#firstHeading,
.mw-parser-output h1 {
    font-size: 2.25em;
    line-height: 1.2;
    font-weight: 400;
    border-bottom: none;
}
.mw-parser-output h2 {
    font-size: 1.7em;
    line-height: 1.25;
    border-bottom: 1px solid #000;
}
.mw-parser-output h3 {
    font-size: 1.4em;
    line-height: 1.3;
    border-bottom: none;
}
.mw-parser-output h4 {
    margin-top: 1.6em;
    margin-bottom: 0.45em;
    padding-bottom: 0.2em;
    font-size: 1.2em;
    line-height: 1.3;
    font-weight: 700;
    border-bottom: 1px solid #000;
}
.mw-parser-output h5 {
    margin-top: 1em;
    margin-bottom: 0.35em;
    padding: 0;
    font-size: 1.08em;
    line-height: 1.35;
    font-weight: 700;
    border-bottom: none;
}
.mw-parser-output h6 {
    margin-top: 0.9em;
    margin-bottom: 0.3em;
    padding-bottom: 0.15em;
    font-size: 1em;
    line-height: 1.35;
    font-weight: 700;
    border-bottom: 1px solid #000;
}
@media (max-width: 640px) {
    #firstHeading,
    .mw-parser-output h1 {
        font-size: 1.9em;
    }
    .mw-parser-output h2 {
        font-size: 1.5em;
    }
    .mw-parser-output h3 {
        font-size: 1.3em;
    }
    .mw-parser-output h4 {
        font-size: 1.15em;
    }
    .mw-parser-output h5 {
        font-size: 1.04em;
    }
}
</syntaxhighlight>
=== How to change the heading styles ===
The styles are stored in the MediaWiki system page:
<pre>
MediaWiki:Common.css
</pre>
This is a wiki page stored in the database. It is not a normal CSS file inside the website folder and should not normally be changed through FTP.
To update it:
# Log in to the wiki with an account that has permission to edit interface pages.
# Open [[MediaWiki:Common.css]].
# Click '''Edit'''.
# Save a backup copy of the existing CSS.
# Replace or modify the CSS rules.
# Add an edit summary, such as <code>Update heading styles</code>.
# Click '''Save page'''.
# Purge the cache by opening:
#:<pre>https://roadtrafficinjury.net/index.php?title=MediaWiki:Common.css&action=purge</pre>
# Refresh the affected page using <code>Ctrl+F5</code>.
If the page does not exist, create it with the same title:
<pre>
MediaWiki:Common.css
</pre>
Only users with interface-editing permissions can modify this page. If the edit option is unavailable, a wiki administrator must grant the required permission or make the change.
```

Latest revision as of 00:29, 9 October 2026

This site mostly relies on default settings of MediaWiki with few exceptions.

Heading style changes

The default heading style for some levels is the same. This makes it difficult to read pages where more than 3 levels of heading is needed.

The default styles are:


The styles used in this site are:

H1

H2

H3

H4

H5
H6

```mediawiki

Heading style changes

Before the changes

Before the custom CSS was added, the wiki used the default MediaWiki heading styles. The difference between H3, H4, H5 and H6 was not always clear.

The first custom version used different colours and styles:

<syntaxhighlight lang="css"> .mw-parser-output h4 {

   margin-top: 1.8em;
   margin-bottom: 0.6em;
   padding-bottom: 0.25em;
   font-size: 1.3em;
   line-height: 1.3;
   font-weight: 700;
   color: #2a4b8d;
   border-bottom: 1px solid #a2a9b1;

}

.mw-parser-output h5 {

   margin-top: 1.25em;
   margin-bottom: 0.45em;
   margin-left: 1em;
   padding-left: 0.65em;
   font-size: 1.08em;
   line-height: 1.35;
   font-weight: 600;
   font-style: italic;
   color: #54595d;
   border-left: 3px solid #a2a9b1;

} </syntaxhighlight>

This version was removed because the colours, italics and vertical border did not match the rest of the wiki.

Current heading styles

The current version uses black text and a descending size hierarchy:

  • H1 is the largest heading and has no underline.
  • H2 is smaller than H1 and has an underline.
  • H3 is smaller than H2 and has no underline.
  • H4 is smaller than H3 and has an underline.
  • H5 is smaller than H4 and has no underline.
  • H6 is the smallest heading and has an underline.

Current CSS

<syntaxhighlight lang="css"> /* Consistent black heading hierarchy */

  1. firstHeading,

.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {

   color: #000;

}

  1. firstHeading,

.mw-parser-output h1 {

   font-size: 2.25em;
   line-height: 1.2;
   font-weight: 400;
   border-bottom: none;

}

.mw-parser-output h2 {

   font-size: 1.7em;
   line-height: 1.25;
   border-bottom: 1px solid #000;

}

.mw-parser-output h3 {

   font-size: 1.4em;
   line-height: 1.3;
   border-bottom: none;

}

.mw-parser-output h4 {

   margin-top: 1.6em;
   margin-bottom: 0.45em;
   padding-bottom: 0.2em;
   font-size: 1.2em;
   line-height: 1.3;
   font-weight: 700;
   border-bottom: 1px solid #000;

}

.mw-parser-output h5 {

   margin-top: 1em;
   margin-bottom: 0.35em;
   padding: 0;
   font-size: 1.08em;
   line-height: 1.35;
   font-weight: 700;
   border-bottom: none;

}

.mw-parser-output h6 {

   margin-top: 0.9em;
   margin-bottom: 0.3em;
   padding-bottom: 0.15em;
   font-size: 1em;
   line-height: 1.35;
   font-weight: 700;
   border-bottom: 1px solid #000;

}

@media (max-width: 640px) {

   #firstHeading,
   .mw-parser-output h1 {
       font-size: 1.9em;
   }
   .mw-parser-output h2 {
       font-size: 1.5em;
   }
   .mw-parser-output h3 {
       font-size: 1.3em;
   }
   .mw-parser-output h4 {
       font-size: 1.15em;
   }
   .mw-parser-output h5 {
       font-size: 1.04em;
   }

} </syntaxhighlight>

How to change the heading styles

The styles are stored in the MediaWiki system page:

MediaWiki:Common.css

This is a wiki page stored in the database. It is not a normal CSS file inside the website folder and should not normally be changed through FTP.

To update it:

  1. Log in to the wiki with an account that has permission to edit interface pages.
  2. Open MediaWiki:Common.css.
  3. Click Edit.
  4. Save a backup copy of the existing CSS.
  5. Replace or modify the CSS rules.
  6. Add an edit summary, such as Update heading styles.
  7. Click Save page.
  8. Purge the cache by opening:
    https://roadtrafficinjury.net/index.php?title=MediaWiki:Common.css&action=purge
  9. Refresh the affected page using Ctrl+F5.

If the page does not exist, create it with the same title:

MediaWiki:Common.css

Only users with interface-editing permissions can modify this page. If the edit option is unavailable, a wiki administrator must grant the required permission or make the change. ```