CollapsibleVector Upgrade Problems
A Guide to Using MediaWiki in a Hosted Environment
An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.
Upgrading the website mh370wiki.net from MediaWiki version 1.39 to version 1.43 resulted in a Sidebar which did not adopt the style of the previous version.
The similar issues occurred previously when I upgraded from MediaWiki 1.38.1 to 1.39.8. On that occasion I recorded this:-
Collapsible Vector behaves differently with this version:-
- A triangle arrow image appears left of each Menu Heading, and the button style for each menu heading is not working properly.
- The heading text is blue (for a link), not white as in the previous version.
For MW 1.39.8 LTS Collapsible Vector has been styled by the file CollapsibleVector/modules/ext.collapsiblevector.collapsibleNav.less
The takeaway is - if you restyle the skin or an extension like CollapsibleVector the developers won't consider your needs when they upgrade their code so whenever you plan on upgrading, do a test run first and be prepared to spend a few hours adapting to a new environment. Or take the easy way and live with a site that is bland, like Wikipedia.
Here is a view of some differences, before and after my current upgrade:-
MediaWiki version 1.39
MediaWiki version 1.43
As you can see, the differences after the upgrade include:-
- Text Color has defaulted to the Blue for a hyperlink
- The 'buttons' are not as wide; the text wraps to a second line
- On hover (not shown in the images here) the menu item text is underlined, the default for a hyperlink but not what I had or want.
- The vertical spacing between menu items (buttons) is greater than previous
There is also a difference after a menu item has been selected:-
MediaWiki version 1.39
MediaWiki version 1.43
The good news is that the original style of each menu item, with the look and function of a 'button' is correct; the colours for border, background, and hover are correct; the dropdown is formatted correctly; and the extension CollapsibleVector is obviously functioning.
Note: In the examples below you will see colours as variables. These are defined in Common.css and recognised by Vector.css. I prefixed each color variable with clr, to identify the purpose.
Problem-Solving Method
Step 1: Identify the CSS Classes
I have found the web browser Firefox Developer Edition to be very useful. Using two windows so I had the old and new MediaWiki version of the mh370 site on screen, and using the Web Developer Tools I captured the source for the first menu item, Flight MH370. See below:-
Menu Source with MediaWiki version 1.39
Menu Source with MediaWiki version 1.43
The two classes which may be problematic are vector-menu-heading, and vector-menu-heading-label.
Although the same class names are used in both MediaWiki versions the developers may have made 'improvements' which affect behaviours and inheritance.
vector-menu-heading is currently defined in /w/extensions/CollapsibleVector/modules/ext.collapsiblevector.collapsibleNav.less
The class vector-menu-heading-label may be defined using the aria-labelledby="{{id}}-label" attribute to associate a label with vector-menu-heading. An instance of this occurs in
/w/skins/Vector/includes/templates/LegacyMenu.mustache, but no properties are defined in that context.
My custom CSS for these classes in Vector.css needs to be re-written.
Step 2: Make a Backup Copy of Vector.css
The solution will involve changes to Vector.css, so I created a new page MediaWiki:VectorCSS/2025/12July which will hold a copy of the current version. Opened MediaWiki:Vector.css, selected all the content, and copied and pasted into the 12July page. Some time ago I decided to use sub-pages for backup copies, and yes, sub-pages are allowed in the MediaWiki namespace. These are the versions I have available to refer to:-
Note: There is no value in creating sub-pages for the live settings page Vector.css
Step 3: Re-define the behaviour I want
The 'buttons' in the Sidebar for the mh370wiki site are styled to appear and behave consistent with the horizontal menus on some pages.
These buttons all have the same border shape and colors, and the default button-face color is a dark purple as a background to white text.
When there is a mouse-over or hover over a button the face color transitions to cream as though the button is illuminated. The text, or button label, changes color to a dark purple.
If the button is 'clicked' the appearance stays illuminated (purple text on a cream background). In the Sidebar, CollapsibleVector expands the menu with a dropdown containing menu sub-items.
The horizontal menu buttons have other states which I have not applied to the SideBar Menu.
Step 4: Translate descriptive behaviour into States
Each vector-menu-heading is a container for a vector-menu-heading-label. It only looks like a button because I added borders and colors to the vector-menu-heading class.
The vector-menu-heading has two states - collapsed or expanded.
The vector-menu-heading-label could have link states and my previous version defined both vector-menu-heading and vector-menu-heading-label for each link state (link, visited, hover, active). But although that 'worked' in the past, it probably wasn't the best way to do it then, and doesn't work now.
To change the background color of vector-menu-heading on hover, I simply need to add a new state vector-menu-heading:hover.
The link states of vector-menu-heading-label are actually not relevant, because the label text color depends on the state of vector-menu-heading - either collapsed or expanded, or collapsed and hover or expanded and hover.
I had an aversion to 'chaining' CSS but it seems necessary when a variant color of one class depends on the state of another class.
Step 5: The Code
Here is the new code and it actually works:-
The 'button' shape of the menu heading is defined for both the collapsed and expanded states:-
#mw-panel.collapsible-nav .portal .vector-menu-heading { border-width: 5px; border-style: solid; border-radius: 10px; border-top-color: var(--clr-DeepPurple-mix-top); border-bottom-color: var(--clr-DeepPurple-mix-bottom); border-left-color: var(--clr-DeepPurple-mix-side); border-right-color: var(--clr-DeepPurple-mix-side); text-decoration: none !important; /* this is inherited by vector-menu-heading-label */ padding-left: 0.6em; /* was 0.7em; */ } /* Note: style for .portal.collapsed may not be needed but is defined so there's no confusion */ #mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading { border-width: 5px; border-style: solid; border-radius: 10px; border-top-color: var(--clr-DeepPurple-mix-top); border-bottom-color: var(--clr-DeepPurple-mix-bottom); border-left-color: var(--clr-DeepPurple-mix-side); border-right-color: var(--clr-DeepPurple-mix-side); text-decoration: none !important; /* this is inherited by vector-menu-heading-label */ padding-left: 0.6em; /* was 0.7em; */ }Similarly, define the default style for the label:-
/* vector-menu-heading-label default style - text colour defined separately for each State*/ .vector-menu-heading-label { font-size: var(--font-size-105); font-weight: bold; text-decoration: none !important; } /* vector-menu-heading-label inherits text-decoration: none !important; from vector-menu-heading so no need to define it for each link state */Define the background colors for the menu heading:-
/* Background Color same for collapsed and expanded */ #mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading { background-color: var(--clr-DeepPurple-base-40); transition: 0.3s; } /* Same as horizontal menu buttons */ #mw-panel.collapsible-nav .portal .vector-menu-heading { background-color: var(--clr-DeepPurple-base-40); transition: 0.3s; } /* Same color, collapsed or expanded */ /* Background Color on hover, same for collapsed and expanded */ #mw-panel.collapsible-nav .portal .vector-menu-heading:hover { background-color: var(--clr-cream-95); transition: 0.3s; } #mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading:hover { background-color: var(--clr-cream-95); transition: 0.3s; }Define the label colors:-
/* Label Colors */ /* Default Label Colour */ .vector-menu-heading-label { color: var(--clr-white-text); text-decoration: none !important; } #mw-panel.collapsible-nav .portal .vector-menu-heading:hover .vector-menu-heading-label { color: var(--clr-purple-B777text-base-35); } #mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading:hover .vector-menu-heading-label { color: var(--clr-purple-B777text-base-35); }
Comments
I have included the comments that I have kept in Vector.css. I also use comments in Common.css.
When my old version of Vector.css was used in the MediaWiki 1.43.1 upgraded site the menu headings were not as wide as I expected. This was because the vector-menu-heading-label was inheriting the borders and colors from vector-menu-heading and the actual background of vector-menu-heading was not displayed. The error became obvious during development of the new styles when the background displayed at full width with the narrower 'button' superimposed.
Inheritance is a feature of CSS, but controlling it is a challenge. I did not want any menu links to be underlined and even when, with Firefox Web Developer Tools I could see that text-decoration:none !important; was applied, the label text was still underlined. The text-decoration:none was inherited but not applied. It needed to be inherited from a higher level to be effective.
It's all very time-consuming. I use two monitors and two different browsers. On Monitor 1, I use Browser 1 to edit Vector.css. On Monitor 2, I use Browser 2 to test the result. So my process is iterative and repetitive:-
- Browser 1: Make a change to Vector.css
- Browser 2: Clear cache and history, Refresh
- Repeat until satisfied with the result.
My next step will be to convert pixels to ems or rems or vw to improve the way buttons and other objects resize.