Mihho: /* Support */

2026-01-06T17:05:14Z

Support

← Older revision		Revision as of 17:05, 6 January 2026
Line 207:		Line 207:
	* Footer text color improvements		* Footer text color improvements
	* Complete Timeless skin integration		* Complete Timeless skin integration

	~~== Support ==~~

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

	[[Category:Documentation]]		[[Category:Documentation]]
	[[Category:Styling]]		[[Category:Styling]]

Mihho: /* Support */

2026-01-06T17:04:56Z

Support

← Older revision		Revision as of 17:04, 6 January 2026
Line 209:		Line 209:

	== Support ==		== Support ==

	~~For issues or questions about:~~
	* '''CODICUM branding''': Refer to the official Visual Profile Guide PDF
	* '''Color usage''': See <code>colours.md</code> 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.		'''Note''': This implementation follows the official CODICUM Visual Profile Guide and maintains WCAG AA accessibility standards throughout.

Mihho: /* Version 1.0 (2026-01-06) */

2026-01-06T17:04:28Z

Version 1.0 (2026-01-06)

← Older revision		Revision as of 17:04, 6 January 2026
Line 203:		Line 203:
	=== Version 1.0 (2026-01-06) ===		=== Version 1.0 (2026-01-06) ===
	* Initial implementation of CODICUM color palette		* Initial implementation of CODICUM color palette
	* WCAG AA compliance ~~verified~~		* WCAG AA compliance after best effort by web responsible
	* Custom icon replacements for visibility		* Custom icon replacements for visibility
	* Footer text color improvements		* Footer text color improvements

Mihho: /* CODICUM MediaWiki Styling */

2026-01-06T17:02:39Z

CODICUM MediaWiki Styling

← Older revision		Revision as of 17:02, 6 January 2026
Line 1:		Line 1:
	= CODICUM MediaWiki Styling =		= CODICUM MediaWiki Styling =

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

	== Overview ==		== Overview ==

Mihho: /* Files */

2026-01-06T13:45:29Z

Files

← Older revision		Revision as of 13:45, 6 January 2026
Line 6:		Line 6:

	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.		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.

	~~== Files ==~~

	* '''Common.css''' - Main stylesheet for MediaWiki (upload to <code>MediaWiki:Common.css</code>)
	* '''colours.md''' - Complete CODICUM color palette reference with WCAG AA approved combinations
	* '''README.md''' - Documentation file

	== CODICUM Color Palette ==		== CODICUM Color Palette ==

Mihho: Created page with "= CODICUM MediaWiki Styling = Complete CODICUM visual profile implementation for MediaWiki with Timeless skin, compliant with University of Bergen (UiB) 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. == Files == * '''Common..."

2026-01-06T13:45:01Z

Created page with "= CODICUM MediaWiki Styling = Complete CODICUM visual profile implementation for MediaWiki with Timeless skin, compliant with University of Bergen (UiB) 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. == Files == * '''Common..."

New page

= CODICUM MediaWiki Styling =

Complete CODICUM visual profile implementation for MediaWiki with Timeless skin, compliant with University of Bergen (UiB) 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.

== Files ==

* '''Common.css''' - Main stylesheet for MediaWiki (upload to <code>MediaWiki:Common.css</code>)
* '''colours.md''' - Complete CODICUM color palette reference with WCAG AA approved combinations
* '''README.md''' - Documentation file

== CODICUM Color Palette ==

=== Primary Colors ===

{| class="wikitable"
! Color Name !! Hex Code !! RGB Values !! Usage
|-
| Dark 1 || <code>#59352C</code> || R 89, G 53, B 44 || Headers, primary dark elements
|-
| Dark 2 || <code>#000000</code> || R 0, G 0, B 0 || Black text, high contrast
|-
| Light 1 || <code>#FFF9E8</code> || R 255, G 249, B 232 || Backgrounds, light elements
|}

=== Emphasis Colors ===

{| class="wikitable"
! Color Name !! Hex Code !! RGB Values !! Usage
|-
| Emphasis 1 (Red) || <code>#8F313B</code> || R 143, G 49, B 59 || Accents, hover states
|-
| Emphasis 2 (Gold) || <code>#F0CD7D</code> || R 240, G 205, B 125 || Highlights, borders
|-
| Emphasis 3 (Olive) || <code>#616115</code> || R 97, G 97, B 21 || Visited links, accents
|-
| Emphasis 4 (Orange) || <code>#CF7C3C</code> || R 207, G 124, B 60 || Borders, buttons, table headers
|-
| Emphasis 5 (Blue) || <code>#2A50AD</code> || 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 (<code>#59352C</code>)
* '''Text''': Light 1 (<code>#FFF9E8</code>)
* '''Border''': Orange (<code>#CF7C3C</code>)

==== Main Content ====
* '''Background''': White
* '''Text''': Dark 1 (<code>#59352C</code>)
* '''Headings''': Dark 1 (<code>#59352C</code>)
* '''Links''': Blue (<code>#2A50AD</code>)
* '''Link Hover''': Red (<code>#8F313B</code>)
* '''Visited Links''': Olive (<code>#616115</code>)

==== Sidebar ====
* '''Background''': Light 1 (<code>#FFF9E8</code>)
* '''Text''': Dark 1 (<code>#59352C</code>)
* '''Headers''': Orange (<code>#CF7C3C</code>) background with white text

==== Buttons ====
* '''Background''': Orange (<code>#CF7C3C</code>)
* '''Text''': White
* '''Hover''': Dark 1 (<code>#59352C</code>)

==== Tables ====
* '''Headers''': Orange (<code>#CF7C3C</code>) background with white text
* '''Hover rows''': Light 1 (<code>#FFF9E8</code>)

==== Footer ====
* '''Background''': Light 1 (<code>#FFF9E8</code>)
* '''Text''': Black (<code>#000000</code>)
* '''Links''': Dark 1 (<code>#59352C</code>)
* '''Border''': Orange (<code>#CF7C3C</code>)

== 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''': <code>user-grey.svg</code>
* '''Fix''': Replaced with light-colored user icon (<code>#FFF9E8</code>)
* '''Element''': <code>#personal h2</code>

=== 2. Settings/Gear Icon ===
* '''Location''': Mobile view, wiki tools menu
* '''Original''': <code>gear-large-grey.svg</code>
* '''Fix''': Replaced with light-colored gear icon (<code>#FFF9E8</code>)
* '''Element''': <code>#site-tools h2</code>

=== 3. Navigation Menu Icon ===
* '''Location''': Upper left corner, hamburger menu
* '''Original''': <code>menu-large-grey.svg</code>
* '''Fix''': Replaced with light-colored menu icon (<code>#FFF9E8</code>)
* '''Element''': <code>#site-navigation h2</code> and <code>#mw-site-navigation h2</code>

== WCAG AA Compliance ==

All color combinations in this implementation meet WCAG AA standards:

=== Light Backgrounds (<code>#FFF9E8</code>) ===
Can be paired with these text colors:
* <code>#000000</code> (Black) ✓
* <code>#59352C</code> (Dark 1) ✓
* <code>#8F313B</code> (Red) ✓
* <code>#2A50AD</code> (Blue) ✓
* <code>#616115</code> (Olive) ✓

=== Dark Backgrounds ===
Can be paired with these text colors:
* <code>#FFF9E8</code> (Light 1) ✓
* <code>#F0CD7D</code> (Gold) ✓
* <code>#CF7C3C</code> (Orange) on black ✓

== Installation ==

# '''Upload to MediaWiki''':
#* Copy the contents of <code>Common.css</code>
#* Navigate to <code>MediaWiki:Common.css</code> on your wiki
#* Paste and save
# '''Clear Cache''':
#* Clear your browser cache
#* In MediaWiki, you may need to purge the page cache
#* Try incognito/private browsing mode to verify changes
# '''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 <code>:root</code> selector at the top of <code>Common.css</code>:

<syntaxhighlight lang="css">
:root {
--codicum-dark-1: #59352C;
--codicum-dark-2: #000000;
--codicum-light-1: #FFF9E8;
/* etc. */
}
</syntaxhighlight>

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

=== Adding New Styles ===

When adding new elements, use the CODICUM color variables:

<syntaxhighlight lang="css">
.my-element {
background-color: var(--codicum-light-1);
color: var(--codicum-text);
border-color: var(--codicum-emphasis-4);
}
</syntaxhighlight>

=== 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 <code>colours.md</code> 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''': <code>Codicum_Visual_profile_guide_01.pdf</code>
* '''Color Reference''': <code>colours.md</code>
* '''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 verified
* 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 <code>colours.md</code> 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.

[[Category:Documentation]]
[[Category:Styling]]

MediaWiki talk:Common.css - Revision history

Mihho: /* Support */

Mihho: /* Support */

Mihho: /* Version 1.0 (2026-01-06) */

Mihho: /* CODICUM MediaWiki Styling */

Mihho: /* Files */