MediaWiki talk:Common.css

CODICUM MediaWiki Styling

Complete CODICUM visual profile implementation for MediaWiki with Timeless skin, compliant with University of Bergen (UiB) CODICUM branding guidelines.

Overview

This project implements the official CODICUM color palette from the Codicum_Visual_profile_guide_01.pdf into a MediaWiki installation using the Timeless skin. All color combinations meet WCAG AA accessibility standards for both regular and large text.

CODICUM Color Palette

Primary Colors

Color Name	Hex Code	RGB Values	Usage
Dark 1	#59352C	R 89, G 53, B 44	Headers, primary dark elements
Dark 2	#000000	R 0, G 0, B 0	Black text, high contrast
Light 1	#FFF9E8	R 255, G 249, B 232	Backgrounds, light elements

Emphasis Colors

Color Name	Hex Code	RGB Values	Usage
Emphasis 1 (Red)	#8F313B	R 143, G 49, B 59	Accents, hover states
Emphasis 2 (Gold)	#F0CD7D	R 240, G 205, B 125	Highlights, borders
Emphasis 3 (Olive)	#616115	R 97, G 97, B 21	Visited links, accents
Emphasis 4 (Orange)	#CF7C3C	R 207, G 124, B 60	Borders, buttons, table headers
Emphasis 5 (Blue)	#2A50AD	R 42, G 80, B 173	Hyperlinks

Implementation Details

Typography

• Font Family: Alegreya Sans (Google Fonts)
• Styles: 14 styles from Thin to Black with italics
• Small Caps: Available

Color Applications

Header

• Background: Dark 1 (#59352C)
• Text: Light 1 (#FFF9E8)
• Border: Orange (#CF7C3C)

Main Content

• Background: White
• Text: Dark 1 (#59352C)
• Headings: Dark 1 (#59352C)
• Links: Blue (#2A50AD)
• Link Hover: Red (#8F313B)
• Visited Links: Olive (#616115)

Sidebar

• Background: Light 1 (#FFF9E8)
• Text: Dark 1 (#59352C)
• Headers: Orange (#CF7C3C) background with white text

Buttons

• Background: Orange (#CF7C3C)
• Text: White
• Hover: Dark 1 (#59352C)

Tables

• Headers: Orange (#CF7C3C) background with white text
• Hover rows: Light 1 (#FFF9E8)

Footer

• Background: Light 1 (#FFF9E8)
• Text: Black (#000000)
• Links: Dark 1 (#59352C)
• Border: Orange (#CF7C3C)

Custom Icon Fixes

The Timeless skin includes several grey SVG icons that are not visible against dark backgrounds. These have been replaced with light-colored inline SVG versions:

1. User Icon

• Location: Top right corner, next to username
• Original: user-grey.svg
• Fix: Replaced with light-colored user icon (#FFF9E8)
• Element: #personal h2

2. Settings/Gear Icon

• Location: Mobile view, wiki tools menu
• Original: gear-large-grey.svg
• Fix: Replaced with light-colored gear icon (#FFF9E8)
• Element: #site-tools h2

3. Navigation Menu Icon

• Location: Upper left corner, hamburger menu
• Original: menu-large-grey.svg
• Fix: Replaced with light-colored menu icon (#FFF9E8)
• Element: #site-navigation h2 and #mw-site-navigation h2

WCAG AA Compliance

All color combinations in this implementation meet WCAG AA standards:

Light Backgrounds (#FFF9E8)

Can be paired with these text colors:

• #000000 (Black) ✓
• #59352C (Dark 1) ✓
• #8F313B (Red) ✓
• #2A50AD (Blue) ✓
• #616115 (Olive) ✓

Dark Backgrounds

Can be paired with these text colors:

• #FFF9E8 (Light 1) ✓
• #F0CD7D (Gold) ✓
• #CF7C3C (Orange) on black ✓

Installation

1. Upload to MediaWiki:
   • Copy the contents of Common.css
   • Navigate to MediaWiki:Common.css on your wiki
   • Paste and save
2. Clear Cache:
   • Clear your browser cache
   • In MediaWiki, you may need to purge the page cache
   • Try incognito/private browsing mode to verify changes
3. Verify:
   • Check header colors (should be dark brown)
   • Check that icons are visible (user, gear, menu)
   • Check footer text is dark and readable
   • Test on both desktop and mobile views

Maintenance

Updating Colors

All colors are defined as CSS variables in the :root selector at the top of Common.css:

:root {
    --codicum-dark-1: #59352C;
    --codicum-dark-2: #000000;
    --codicum-light-1: #FFF9E8;
    /* etc. */
}

To change a color throughout the entire site, update the variable value.

Adding New Styles

When adding new elements, use the CODICUM color variables:

.my-element {
    background-color: var(--codicum-light-1);
    color: var(--codicum-text);
    border-color: var(--codicum-emphasis-4);
}

Testing Accessibility

When adding new color combinations, verify WCAG AA compliance:

• Use a contrast checker tool (e.g., WebAIM Contrast Checker)
• Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text
• Refer to colours.md for pre-approved combinations

Browser Compatibility

This CSS uses:

• CSS Variables (all modern browsers)
• SVG data URIs (all modern browsers)
• Standard CSS3 properties

Tested and working on:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

Source Documents

• Visual Profile Guide: Codicum_Visual_profile_guide_01.pdf
• Color Reference: colours.md
• MediaWiki Skin: Timeless
• Compliance: University of Bergen (UiB) branding guidelines

Credits

• CODICUM Project: Medieval Book and Networks of Northern Europe c. 1000–1500
• Design: Haltenbanken (from visual profile guide)
• Implementation: CODICUM MediaWiki Styling Project
• Font: Alegreya Sans (Google Fonts)

Version History

Version 1.0 (2026-01-06)

• Initial implementation of CODICUM color palette
• WCAG AA compliance after best effort by web responsible
• Custom icon replacements for visibility
• Footer text color improvements
• Complete Timeless skin integration

Support

For issues or questions about:

• CODICUM branding: Refer to the official Visual Profile Guide PDF
• Color usage: See colours.md for approved combinations
• Technical issues: Check MediaWiki documentation for Timeless skin

---

Note: This implementation follows the official CODICUM Visual Profile Guide and maintains WCAG AA accessibility standards throughout.