Difference between revisions of "MediaWiki/Skins/Foreground"

From grantswebsite.net
Jump to navigation Jump to search
 
(27 intermediate revisions by 2 users not shown)
Line 16: Line 16:
 
</div> <!-- End Row -->
 
</div> <!-- End Row -->
  
<h4>Benefits</h4>
 
 
<div class="row">
 
<div class="row">
     <div class="small-12 columns">
+
     <div class="small-6 small-offset-2 columns">
<p>Some of the benefits of using the Foreground Skin on MediaWiki are:-</p>
+
<h4>Topic Map</h4>
<ul>
+
<html>
    <li>Access to components and styles defined by Foundation 5.</li>
+
        <a href="/wiki/MediaWiki/Skins/Foreground/Upgrade" class="nav-btn">Issues when upgrading to Foreground 2</a>
    <li>Because Foundation is a mobile-first, responsive framework your MediaWiki website will display correctly on a range of devices, from mobiles through to smart TVs. For example, try viewing this website on a mobile.</li>
+
        <a href="/wiki/MediaWiki/Skins/Foreground/Topbar_CSS" class="nav-btn">Customising the topbar (Menu) in Foreground</a>
    <li>Page content is written with html so it is more sophisticated than wikitext. HTML 5 and CSS 3 are supported.</li>
+
<br />
    <li>Page content can be positioned using a Grid.</li>
+
         <a href="/wiki/MediaWiki/Foundation" class="nav-btn">Foundation CSS Framework on MediaWiki</a><br />
</ul>
+
    <a href="/wiki/MediaWiki/Skins/Pivot_and_Foreground_Compared" class="nav-btn">Pivot and Foreground Skins Compared</a><br />
<p>Other benefits and features, including support for FontAwesome, is described on the <html><a href="https://foreground.wikiproject.net/wiki/Main_Page" target="_blank">Foreground Project Page</a></html>.</p>
+
</html>
    </div> <!-- End Column -->
 
</div> <!-- End Row -->
 
 
 
<h4>Compatibility</h4>
 
<div class="row">
 
    <div class="small-12 columns">
 
<p>Foreground version 2.1.0 was released in March 2018.</p>  
 
<p>This version is compatible with MediaWiki 1.27 and higher; and requires PHP 5.6+.</p>
 
<p>Foreground 2.1.0 uses the Zurb Foundation 5 Framework. Zurb has since released version 6 with an improved Grid.</p>
 
<p>Foundation buttons which use the <a href=" syntax will not work on MediaWiki unless you enclose the link in html tags and have enabled $wgRawHtml in your LocalSettings.php file.</p>
 
    </div> <!-- End Column -->
 
</div> <!-- End Row -->
 
 
 
<h4>Upgrading From Previous Version</h4>
 
<div class="row">
 
    <div class="small-12 columns">
 
<p>The previous version of Foreground was based on Foundation 4. Any problems with upgrading to the later version of Foreground will likely be caused by changes within the Foundation CSS Framework.</p>
 
<p>One of those changes that impacted one of my websites affected multiple tab sets. The code was completely different. Foundation 5 code uses list items and is simpler.</p>
 
    </div> <!-- End Column -->
 
</div> <!-- End Row -->
 
<div class="row">
 
    <div class="small-6 columns">
 
<h5>This code is the start of a multiple tab set using Foundation 4</h5>
 
<pre>
 
<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">
 
</pre>
 
    </div> <!-- End Column -->
 
    <div class="small-6 columns">
 
<h5>This code is the first few lines of a multiple tab set using Foundation 5</h5>
 
<pre>
 
<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">
 
</pre>
 
<p>The complete example is provided [[MediaWiki/Foundation/Tabs|here]].</p>
 
    </div> <!-- End Column -->
 
</div> <!-- End Row -->
 
<div class="row">
 
    <div class="small-12 columns">
 
<h5>Suggestion:-</h5>
 
<p>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.</p>
 
<p>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.</p>
 
<p>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.</p>
 
<p>Of my three current MediaWiki sites I upgraded this one first and am then applying the lessons learnt to my other sites.</p>
 
 
     </div> <!-- End Column -->
 
     </div> <!-- End Column -->
</div> <!-- End Row -->
+
     <div class="small-3 small-offset-1 columns end">
 
+
<h4><center>External Links</center></h4>
<h4>Examples</h4>
 
<div class="row">
 
     <div class="small-12 columns">
 
<p>To encourage use of both the Foreground Skin, and Foundation on MediaWiki, some examples of the code required to implement the CSS components is provided here: [[MediaWiki/Foundation]].</p>
 
    </div> <!-- End Column -->
 
</div> <!-- End Row -->
 
 
 
<h4>Links</h4>
 
<div class="row">
 
    <div class="small-12 columns">
 
<p>The links below are also an example of one of the five styles of [[MediaWiki/Foundation/Simple_Buttons|button]] available with Foundation 5. </p>
 
<br />
 
<div class="row">
 
    <div class="small-9 small-offset-3 columns">
 
 
<html>
 
<html>
           <a href="https://www.mediawiki.org/wiki/Skin:Foreground" target="_blank" class="button info small radius">Foreground Skin on MediaWiki.org</a>  
+
           <a href="https://www.mediawiki.org/wiki/Skin:Foreground" target="_blank" class="nav-btn">Foreground Skin on MediaWiki.org</a>  
           <a href="https://foreground.wikiproject.net/wiki/Main_Page" target="_blank" class="button info small radius">Foreground Skin Project Page</a>
+
           <a href="https://foreground.wikiproject.net/wiki/Main_Page" target="_blank" class="nav-btn">Foreground Skin Project Page</a>
<br />
+
         <a href="https://foundation.zurb.com/" target="_blank" class="nav-btn">Zurb Foundation Website</a>  
         <a href="https://foundation.zurb.com/" target="_blank" class="button info small radius">Zurb Foundation Website</a>  
+
         <a href="https://foundation.zurb.com/sites/docs/v/5.5.3/" target="_blank" class="nav-btn">Foundation 5: Getting Started</a>  
         <a href="https://foundation.zurb.com/sites/docs/v/5.5.3/" target="_blank" class="button info small radius">Getting Started With Foundation 5</a>
 
<br />
 
        <a href="/wiki/MediaWiki/Foundation" target="_blank" class="button info small radius">Foundation CSS Framework on MediaWiki</a>
 
 
</html>
 
</html>
 
     </div> <!-- End Column -->
 
     </div> <!-- End Column -->
 
</div> <!-- End Row -->
 
</div> <!-- End Row -->
 +
<br />
 
<hr>
 
<hr>

Latest revision as of 09:36, 6 October 2021


Foreground Skin for MediaWiki

Foreground is a responsive skin for MediaWiki which is based on the Foundation CSS Framework by Zurb.

This website is built with MediaWiki and uses the Foreground Skin. For example, the text here is contained in a Panel.