MediaWiki/Skins/Foreground/Upgrade
Problems encountered when upgrading MediaWiki Foreground Skin
Foreground version 2.1.x was released in May 2018. Problems noticed when upgrading from the previous version became apparent in two significant areas: styles for the Menu or Topbar; and Multiple Tab Sets.
The underlying reason for the issues encountered is that the previous version of Foreground was based on Foundation 4; and the recent version is built on Foundation 5. Improvements by the Zurb Foundation in their CSS Framework will affect any skin for MediaWiki which is based on Foundation. Zurb has already released Foundation 6 so more features can be expected in the future.
Solutions to the issues affecting the Topbar or Menu, and multiple tab sets, are provided here. There may be other challenges - if so then more solutions will be added.
1. Topbar Styles
By default, the Menu in Foreground 2.x is black. The previous version was easily customizable and several examples were provided to assist with style or colour changes.
Re-styling the Menu is not so simple with Foreground version 2.x, and the styles used previously may not apply. So when upgrading the Foreground Skin expect to spend time customizing your Menu.
A comparison of previous, non-working styles and current, functional styles is not warranted. But as I needed to develop a solution for this site I created an article How-to Customize the Menu (Topbar) in the MediaWiki Foreground Skin linked here.
2. Multiple Tab Sets
The difference between versions is significant - multiple tab sets coded within Foreground 1.x simply don't work when upgrading to version 2.x. I have used several of them in one MediaWiki site and needed to develop a strategy to change all the affected pages before upgrading Foreground. That should not be a deterrent to using Foreground. The changes emanate from Zurb Foundation and improvements in their CSS Framework.
Foundation 5 code for multiple tab sets uses list items and is simpler than previous, as shown in the code extracts below.
This code is the start of a multiple tab set using Foundation 4
<div class="section-container auto" data-section="data-section">
<div class="section">
<p class="title" data-section-title="data-section-title">Introduction</p>
<div class="content" data-section-content="data-section-content">
<div class="row">
This code is the first few lines of a multiple tab set using Foundation 5
<div>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#tab1">Item 1</a></li>
<li class="tab-title"><a href="#tab2">Item 2</a></li>
<li class="tab-title"><a href="#tab3">Item 3</a></li>
<li class="tab-title"><a href="#tab4">Item 4</a></li>
</ul>
</div>
<div class="tabs-content">
The complete example is provided here.
Try before Upgrading
Here is a suggestion: install and test the new version of Foreground but leave yourself a way to simply revert to the previous state.
When you install the newer version of Foreground in your MediaWiki skins directory do not delete the older version - rename it and leave it there, at least temporarily.
Follow the instructions for installing the current version and test the outcome. If you have used Foundation 4 CSS components which do not display correctly then it is easy to revert to your previous version of Foreground - in your MediaWiki skins directory rename the current Foreground folder to Foreground_New, change your old version back to Foreground, and undo any other changes. Your website should operate as before.
Now that you have identified the components which are not compatible work at changing your code. Test it on another site if possible, then implement both the new skin and your new code.
Of my three current MediaWiki sites I upgraded this one first and am then applying the lessons learnt to my other sites.
Disclaimer
The information or advice provided in this Guide is based on, or links to, official documentation for MediaWiki and was accurate when this article was created. However, some variation may occur between versions of MediaWiki; and the specifics of web hosting varies by service provider. Consequently, you should always create an effective backup before making any changes; ensure that you can restore your database and website; read the Release Notes before upgrading; and apply best practices to the management of your website. Any action that you take based on information provided here is at your own risk and the author accepts no liability for any loss or damage.
