https://mw.mh370.wiki/w/api.php?action=feedcontributions&feedformat=atom&user=Grantmw.mh370.wiki - User contributions [en]2026-04-17T12:26:54ZUser contributionsMediaWiki 1.43.1https://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1837Tab Removal2025-08-21T10:29:25Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a similar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But I couldn't remove the tab labelled Snippets by using similar CSS.</p><br />
<br /><br />
<br />
<h2>Tab Removal in the {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work. <b>The brackets ( ) are the problem</b></p><br />
<p>I re-named each namespace:-</p><br />
<ul><br />
<li>Factual Information 2015 <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report 2018 <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>The associated tabs have been removed with these lines added to MediaWiki.Common.css:-</p><br />
<pre><br />
#ca-nstab-factual_information_2015 { display: none !important; }<br />
<br />
#ca-nstab-safety_investigation_report_2018 { display: none !important; }<br />
</pre><br />
<p>Success!</p><br />
<br /><br />
<br />
<h5>A Workaround</h5><br />
<p>Here is a workaround. It worked, but there had to be a better way, and I think I found it, as above.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces.</p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>Apply similar CSS to remove tabs associated with other namespaces.</li><br />
<li>Use the magic word [[Page Titles|DISPLAYTITLE]] to make some abbreviated page names (like TOC) more friendly or meaningful. This is only possible after solving problems with getting DISPLAYTITLE to work properly.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl><br />
<br />
[[Category:Customise]]<br />
[[Category:Troubleshooting]]<br />
[[Category:Interface]]</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1836Tab Removal2025-08-21T10:28:22Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a similar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But I couldn't remove the tab labelled Snippets by using similar CSS.</p><br />
<br /><br />
<br />
<h2>Tab Removal in the {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work. <b>The brackets ( ) are the problem</b></p><br />
<p>I re-named each namespace:-</p><br />
<ul><br />
<li>Factual Information 2015 <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report 2018 <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>The associated tabs have been removed with these lines added to MediaWiki.Common.css:-</p><br />
<pre><br />
#ca-nstab-factual_information_2015 { display: none !important; }<br />
<br />
#ca-nstab-safety_investigation_report_2018 { display: none !important; }<br />
</pre><br />
<p>Success!</p><br />
<br /><br />
<br />
<h5>A Workaround</h5><br />
<p>Here is a workaround. It worked, but there had to be a better way, and I think I found it, as above.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>Apply similar CSS to remove tabs associated with other namespaces.</li><br />
<li>Use the magic word [[Page Titles|DISPLAYTITLE]] to make some abbreviated page names (like TOC) more friendly or meaningful. This is only possible after solving problems with getting DISPLAYTITLE to work properly.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl><br />
<br />
[[Category:Customise]]<br />
[[Category:Troubleshooting]]<br />
[[Category:Interface]]</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1835Tab Removal2025-08-21T10:26:55Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a similar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But I couldn't remove the tab labelled Snippets by using similar CSS.</p><br />
<br /><br />
<br />
<h2>Tab Removal in the {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the capture above, the text is clearly ca-nstab-safety_investigation_report_(2018). In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work. <b>The brackets ( ) are the problem</b></p><br />
<p>I re-named each namespace:-</p><br />
<ul><br />
<li>Factual Information 2015 <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report 2018 <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>The associated tabs have been removed with these lines added to MediaWiki.Common.css:-</p><br />
<pre><br />
#ca-nstab-factual_information_2015 { display: none !important; }<br />
<br />
#ca-nstab-safety_investigation_report_2018 { display: none !important; }<br />
</pre><br />
<p>Success!</p><br />
<br /><br />
<br />
<h5>A Workaround</h5><br />
<p>Here is a workaround. It worked, but there had to be a better way, and I think I found it, as above.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>Apply similar CSS to remove tabs associated with other namespaces.</li><br />
<li>Use the magic word [[Page Titles|DISPLAYTITLE]] to make some abbreviated page names (like TOC) more friendly or meaningful. This is only possible after solving problems with getting DISPLAYTITLE to work properly.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl><br />
<br />
[[Category:Customise]]<br />
[[Category:Troubleshooting]]<br />
[[Category:Interface]]</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1834Tab Removal2025-08-21T10:25:22Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a similar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in the {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the capture above, the text is clearly ca-nstab-safety_investigation_report_(2018). In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work. <b>The brackets ( ) are the problem</b></p><br />
<p>I re-named each namespace:-</p><br />
<ul><br />
<li>Factual Information 2015 <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report 2018 <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>The associated tabs have been removed with these lines added to MediaWiki.Common.css:-</p><br />
<pre><br />
#ca-nstab-factual_information_2015 { display: none !important; }<br />
<br />
#ca-nstab-safety_investigation_report_2018 { display: none !important; }<br />
</pre><br />
<p>Success!</p><br />
<br /><br />
<br />
<h5>A Workaround</h5><br />
<p>Here is a workaround. It worked, but there had to be a better way, and I think I found it, as above.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>Apply similar CSS to remove tabs associated with other namespaces.</li><br />
<li>Use the magic word [[Page Titles|DISPLAYTITLE]] to make some abbreviated page names (like TOC) more friendly or meaningful. This is only possible after solving problems with getting DISPLAYTITLE to work properly.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl><br />
<br />
[[Category:Customise]]<br />
[[Category:Troubleshooting]]<br />
[[Category:Interface]]</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1833Tab Removal2025-08-21T10:23:18Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in the {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the capture above, the text is clearly ca-nstab-safety_investigation_report_(2018). In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work. <b>The brackets ( ) are the problem</b></p><br />
<p>I re-named each namespace:-</p><br />
<ul><br />
<li>Factual Information 2015 <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report 2018 <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>The associated tabs have been removed with these lines added to MediaWiki.Common.css:-</p><br />
<pre><br />
#ca-nstab-factual_information_2015 { display: none !important; }<br />
<br />
#ca-nstab-safety_investigation_report_2018 { display: none !important; }<br />
</pre><br />
<p>Success!</p><br />
<br /><br />
<br />
<h5>A Workaround</h5><br />
<p>Here is a workaround. It worked, but there had to be a better way, and I think I found it, as above.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>Apply similar CSS to remove tabs associated with other namespaces.</li><br />
<li>Use the magic word [[Page Titles|DISPLAYTITLE]] to make some abbreviated page names (like TOC) more friendly or meaningful. This is only possible after solving problems with getting DISPLAYTITLE to work properly.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl><br />
<br />
[[Category:Customise]]<br />
[[Category:Troubleshooting]]<br />
[[Category:Interface]]</div>Granthttps://mw.mh370.wiki/w/index.php?title=Page_Titles&diff=1832Page Titles2025-08-21T10:19:02Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} I have used short names for pages but would prefer the reader to see something more descriptive. Two examples:-</p><br />
<ol><br />
<li>Many countries assisted with the search for MH370, the investigations, or debris was located. The website has one page-per-country with the country name as the page title. While the page title is short, for example <i>Australia</i>, the first heading is more descriptive, for example <i>Australia and Malaysia Airlines Flight MH370</i>. That would be nice as a <i>displayed</i> page title.</li><br />
<li>All of the media statements related to flight MH370 are in News pages and the title includes a <i>Day Number</i>, for example 2014/Day 001 which is the day of the incident, Saturday 8 March 2014. The date is more useful to a reader; the Day# is more useful for indexing content within the site.</li><br />
</ol><br />
<br /><br />
<br />
<h3>Magic Word DISPLAYTITLE</h3><br />
<p>MediaWiki does permit the displayed page title to be different from the actual page title - with restrictions.</p><br />
<p>The intention is to allow a variant of the page title to be displayed if it is more correct, for example if I attempted to create a page titled wgRestrictDisplayTitle, MediaWiki would capitalise the first letter <code>Create the page "WgRestrictPageTitle" on this wiki!</code>. If WgRestrictPageTitle was the actual page name, the magic word DISPLAYTITLE could be used on the page like this: <html><code>{{DISPLAYTITLE:wgRestrictDisplayTitle}}</code></html> and the reader would see the first letter in lower case.</p><br />
<p>It is NOT the intention of MediaWiki developers to enable this magic word to display something completely different from the actual page title. But it can be done, and would be useful.</p><br />
<p>For DISPLAYTITLE to work, two settings must be configured. But it may not work. A solution is below.</p><br />
<br /><br />
<br />
<h3>$wgAllowDisplayTitle</h3><br />
<p>The default is <html><code>$wgAllowDisplayTitle = 'true';</code></html>. This setting allows the magic word DISPLAYTITLE to make minor changes to a page title such as changing letter case.</p><br />
<p>For example, <html><code>{{DISPLAYTITLE:australia}}</code></html> displayed the title of the Australia page as australia. But did not allow a different title such as Australia and Malaysia Airlines Flight MH370.</p><br />
<p>This is because $wgRestrictDisplayTitle is true by default.</p><br />
<br /><br />
<br />
<h3>$wgRestrictDisplayTitle</h3><br />
<p>The default is <html><code>$wgRestrictDisplayTitle = 'true';</code></html>. This restricts the usage of the magic word DISPLAYTITLE.</p><br />
<p>Changing the setting is simple - place the setting <html><code>$wgRestrictDisplayTitle = 'false';</code></html> in LocalSettings.php.</p><br />
<p>If you want to be sure, put both settings in LocalSettings.php:-</p><br />
<pre><br />
# Allow full use of DisplayTitle<br />
$wgAllowDisplayTitle = 'true'; <br />
$wgRestrictDisplayTitle = 'false';<br />
</pre><br />
<p>This should work, except when it doesn't.</p><br />
<br /><br />
<br />
<h3>When DISPLAYTITLE Doesn't Work</h3><br />
<p>Configuration in LocalSettings.php is supposed to over-ride MediaWiki default configuration. However, a new value for $wgRestrictDisplayTitle in LocalSettings.php may not over-ride the MediaWiki default.</p><br />
<p>The default value for each variable $wgAllowDisplayTitle and $wgRestrictDisplayTitle is configured in the file /w/includes/config-schema.php (In MediaWiki version 1.43.).</p><br />
[[File:DisplayTitleDefault.jpg|alt=Default values for Display Title variables|Default values for Display Title variables]]<br />
<br />
<h5>Configuration Tests</h5><br />
<p>For each combination of settings I have two tests. On the current version of {{MH370Site}} and the page <html><a href="https://www.mh370wiki.net/Australia" target="_blank">Australia</a></html> I will use the magic word DISPLAYTITLE to (separately) display two variants of the current page title (Australia):-</p><br />
<ol><br />
<li><html><code>{{DISPLAYTITLE:australia}}</code></html> If this title displays correctly then the effective value of $wgAllowDisplayTitle must be true. </li><br />
<li><html><code>{{DISPLAYTITLE:Australia and Malaysia Airlines Flight MH370}}</code></html> If this title displays correctly then the effective value of $wgRestrictDisplayTitle must be false. </li> <br />
</ol><br />
<br /><br />
<br />
<table style="width:90%; margin-left:5%; margin-right:auto"><br />
<tr><br />
<th style="width:5%">Test</th><br />
<th style="width:30%">config-schema.php</th><br />
<th style="width:35%">LocalSettings.php</th><br />
<th style="width:30%">Displayed Title</th><br />
</tr><br />
<tr><br />
<td style="text-align:center; font-weight:bold">1</td><br />
<td>Default Configuration<br />
<pre><br />
'AllowDisplayTitle' => true,<br />
'RestrictDisplayTitle' => true,<br />
</pre><br />
</td><br />
<td><p>No Settings</p><br />
</td><br />
<td><ol><li>australia</li><li>Australia</li></ol> </td><br />
</tr><br />
<br />
<tr><br />
<td style="text-align:center; font-weight:bold">2</td><br />
<td><pre><br />
'AllowDisplayTitle' => true,<br />
'RestrictDisplayTitle' => true,<br />
</pre></td><br />
<td><pre><br />
#$wgAllowDisplayTitle = 'true';<br />
$wgRestrictDisplayTitle = 'false';<br />
</pre></td><br />
<td><ol><li>australia</li><li>Australia</li></ol></td><br />
</tr><br />
<br />
<tr><br />
<td style="text-align:center; font-weight:bold">3</td><br />
<td><pre><br />
'AllowDisplayTitle' => false,<br />
'RestrictDisplayTitle' => true,<br />
</pre></td><br />
<td><pre><br />
$wgAllowDisplayTitle = 'true';<br />
$wgRestrictDisplayTitle = 'false';<br />
</pre></td><br />
<td><ol><li>australia</li><li>Australia</li></ol></td><br />
</tr><br />
<br />
<tr><br />
<td style="text-align:center; font-weight:bold">4</td><br />
<td><pre><br />
'AllowDisplayTitle' => false,<br />
'RestrictDisplayTitle' => false,<br />
</pre></td><br />
<td><pre><br />
$wgAllowDisplayTitle = 'true';<br />
$wgRestrictDisplayTitle = 'false';<br />
</pre></td><br />
<td><ol><li>australia</li><li>Australia</li></ol></td><br />
</tr><br />
<br />
<tr><br />
<td style="text-align:center; font-weight:bold">5</td><br />
<td><br />
<pre><br />
'AllowDisplayTitle' => true,<br />
'RestrictDisplayTitle' => false,<br />
</pre><br />
</td><br />
<td><pre><br />
$wgAllowDisplayTitle = 'true';<br />
$wgRestrictDisplayTitle = 'false';<br />
</pre></td><br />
<td><ol><li>australia</li><li>Australia</li><ol></td><br />
</tr><br />
<br />
<tr><br />
<td style="text-align:center; font-weight:bold">6</td><br />
<td><pre><br />
'AllowDisplayTitle' => true,<br />
'RestrictDisplayTitle' => false,<br />
</pre></td><br />
<td><p>No Settings</p></td><br />
<td><ol><li>australia</li><li>Australia and Malaysia Airlines Flight MH370</li></ol></td><br />
</tr><br />
</table><br />
<br />
<h3>Results</h3><br />
<p><ol><br />
<li>MediaWiki default settings in config-schema.php are applied as intended. A radically different title is not displayed.</li><br /><br />
<li>Setting $wgRestrictDisplayTitle to false in LocalSettings.php does not over-ride the default setting of false in config-schema.php</li><br /><br />
<li>Setting $wgAllowDisplayTitle to true in LocalSettings.php does over-ride a setting of false in config-schema.php<br />Setting $wgRestrictDisplayTitle to false in LocalSettings.php does not over-ride the default setting of false in config-schema.php</li><br /><br />
<li>Setting $wgAllowDisplayTitle to true in LocalSettings.php does over-ride a setting of false in config-schema.php<br />However, although $wgRestrictDisplayTitle is false in config-schema.php and in LocalSettings.php the setting has no effect - the longer title is not displayed as it should.</li><br /><br />
<li>$wgAllowDisplayTitle is true in config-schema.php and also in LocalSettings.php and is applied as intended.<br />$wgRestrictDisplayTitle is false in config-schema.php and is also false in LocalSettings.php. However, as in Test 4 the alternate (longer) page title is not displayed.<br />Even when the configuration is the same in both locations the configuration of $wgRestrictDisplayTitle = false is not applied. <b>This does not make sense.</b><br />I have triple-checked this result and have no explanation for this outcome.</li><br /><br />
<li>When there is no configuration in LocalSettings.php (similar to Test 1) the settings in config-schema.php are applied, and the outcome is correct.</li><br /><br />
</ol></p><br />
<br /><br />
<h3>Solution</h3><br />
<p>There is no 'solution', only a 'work-around'.</p><br />
<p>I have edited /w/includes/config-schema.php as below. This is not good practice. When upgrading MediaWiki version this change may need to be done to the new source code. The comments will help to find the settings.</p><br />
<pre><br />
# default is 'AllowDisplayTitle' => true, <br />
'AllowDisplayTitle' => true,<br />
# default is 'RestrictDisplayTitle' => true, <br />
'RestrictDisplayTitle' => false,<br />
</pre><br />
<p>And in LocalSettings.php I added the following:-</p><br />
<pre><br />
# 6 August 2025 Allow DisplayTitle<br />
# $wgAllowDisplayTitle = 'true'; is true by default<br />
# $wgRestrictDisplayTitle = 'false'; is configured in<br />
# /w/includes/config-schema.php and does not apply if configured here<br />
</pre><br />
<br />
<h3>Application</h3><br />
<p>On the {{MH370Site}} website the change to each country page will be quite simple. The next version release will use this feature.</p><br />
<p>The News pages will benefit too, and the application is more interesting because it will involve templates. See <b>[[DisplayTitle and Templates]].</b></p><br />
<br /><br />
<br />
<h3>How to find a specific configuration in MediaWiki</h3><br />
<p>Before writing this article I was not familiar with the file /w/includes/config-schema.php. I had to search for the configuration for $wgRestrictDisplayTitle.</p><br />
<p>That is now the subject of a separate article - <b>[[MediaWiki Default Settings]]</b>.</p><br />
<br /><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Page title</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Page_title" target="_blank">https://www.mediawiki.org/wiki/Manual:Page_title</a></html></dd><br />
<br />
<dt>Display title</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Display_title" target="_blank">https://www.mediawiki.org/wiki/Display_title</a></html></dd><br />
<br />
<dt>Help:Magic words #DISPLAYTITLE</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Help:Magic_words#DISPLAYTITLE" target="_blank">https://www.mediawiki.org/wiki/Help:Magic_words#DISPLAYTITLE</a></html></dd><br />
<br />
<dt>Manual:$wgAllowDisplayTitle</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:$wgAllowDisplayTitle" target="_blank">https://www.mediawiki.org/wiki/Manual:$wgAllowDisplayTitle</a></html></dd><br />
<br />
<dt>Manual:$wgRestrictDisplayTitle</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:$wgRestrictDisplayTitle" target="_blank">https://www.mediawiki.org/wiki/Manual:$wgRestrictDisplayTitle</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
<br />
</dl><br />
<br />
<br />
<br />
[[Category:Configure]]<br />
[[Category:Customise]]<br />
[[Category:$wgAllowDisplayTitle]]<br />
[[Category:$wgRestrictDisplayTitle]]<br />
[[Category:Magic Words]]</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1831Tab Removal2025-08-21T10:16:01Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in the {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the capture above, the text is clearly ca-nstab-safety_investigation_report_(2018). In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work. <b>The brackets ( ) are the problem</b></p><br />
<p>I re-named each namespace:-</p><br />
<ul><br />
<li>Factual Information 2015 <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report 2018 <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>The associated tabs have been removed with these lines added to MediaWiki.Common.css:-</p><br />
<pre><br />
#ca-nstab-factual_information_2015 { display: none !important; }<br />
<br />
#ca-nstab-safety_investigation_report_2018 { display: none !important; }<br />
</pre><br />
<p>Success!</p><br />
<br /><br />
<br />
<h5>A Workaround</h5><br />
<p>Here is a workaround. It worked, but there had to be a better way, and I think I found it, as above.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>Apply similar CSS to remove tabs associated with other namespaces.</li><br />
<li>Use<br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1830MediaWiki:Common.css2025-08-21T09:46:27Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
/* body.ns-0 #ca-talk { display:none !important; } */ /* this works */<br />
<br />
/* body.ns-0 #ca-nstab { display:none !important; } doesn't work */<br />
<br />
body.ns-3400 #ca-talk { display:none !important; } /* this works */<br />
<br />
body.ns-3400 #ca-nstab-snippets { display:none !important; }<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1829Tab Removal2025-08-21T09:44:12Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in thge {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the capture above, the text is clearly ca-nstab-safety_investigation_report_(2018). In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work.</p><br />
<p>I tried the namespace alias too:-</p><br />
<code>#ca-nstab-SIR_2018 { display: none !important; }</code><br />
<p>With no success.</p><br />
<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1828Tab Removal2025-08-21T09:41:47Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in thge {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>In the capture above, the text is clearly ca-nstab-safety_investigation_report_(2018). In the previous example, the CSS &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; was effective in removing the tab labelled Snippets. So, logically, one would think that this line in MediaWiki:Common.css would be effective too:-</p><br />
<code>#ca-nstab-safety_investigation_report_(2018) { display: none !important; }</code><br />
<p>But it isn't. Doesn't work.</p><br />
<br />
<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1827Tab Removal2025-08-21T09:28:01Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result, with a page name included to show the namespace prefix Snippets: And there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> </p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in thge {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1826Tab Removal2025-08-21T09:25:10Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result - A page name has been included with the namespace prefix Snippets: to show that the article is in that namespace, but there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> so the line in MediaWiki:Common.css was changed to this:-</p><br />
<p>The Discussion (Talk) tab can be removed by specifying the namespace by number, for example this works:-</p><br />
<code>body.ns-3400 #ca-talk { display:none !important; }</code><br />
<p>But the tab labelled Snippets cannot be removed by using similar CSS.</p><br />
<br />
<h2>Tab Removal in thge {{MH370Site}} Website</h2><br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1825MediaWiki:Common.css2025-08-21T09:20:17Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
/* body.ns-0 #ca-talk { display:none !important; } */ /* this works */<br />
<br />
/* body.ns-0 #ca-nstab { display:none !important; } doesn't work */<br />
<br />
body.ns-3400 #ca-talk { display:none !important; } /* this works */<br />
<br />
body.ns-3400 #ca-nstab-main { display:none !important; }<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1824MediaWiki:Common.css2025-08-21T09:19:40Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
/* body.ns-0 #ca-talk { display:none !important; } */ /* this works */<br />
<br />
/* body.ns-0 #ca-nstab { display:none !important; } doesn't work */<br />
<br />
body.ns-3400 #ca-talk { display:none !important; } /* this works */<br />
<br />
body.ns-3400 #ca-nstab { display:none !important; }<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1823MediaWiki:Common.css2025-08-21T09:18:27Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
body.ns-0 #ca-talk { display:none !important; } /* this works */<br />
<br />
/* body.ns-0 #ca-nstab { display:none !important; } doesn't work */<br />
<br />
body.ns-3400 #ca-talk { display:none !important; }<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1822MediaWiki:Common.css2025-08-21T09:15:19Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
body.ns-0 #ca-talk { display:none !important; }<br />
<br />
body.ns-0 #ca-nstab { display:none !important; }<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1821MediaWiki:Common.css2025-08-21T09:14:21Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
body.ns-0 #ca-talk { display:none !important; }<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1820MediaWiki:Common.css2025-08-21T09:13:31Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
body.ns-0 #ca-nstab { display:none !important; }<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1819MediaWiki:Common.css2025-08-21T09:11:23Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-ns_3400 { display:none !important; } */<br />
<br />
body.ns-3400 #ca-nstab { display:none !important; }<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1818MediaWiki:Common.css2025-08-21T09:06:37Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-ns_3400 { display:none !important; } <br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1817MediaWiki:Common.css2025-08-21T09:05:58Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-3400 { display:none !important; } <br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1816MediaWiki:Common.css2025-08-21T09:05:17Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
.body.ns-3400 #ca-nstab { display:none !important; } <br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1815MediaWiki:Common.css2025-08-21T09:04:16Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-ns-3400 { display:none !important; } <br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1814MediaWiki:Common.css2025-08-21T09:00:17Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-3400 { display:none !important; } <br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1813MediaWiki:Common.css2025-08-21T08:58:56Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-snippets { display:none !important; } */<br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1812Tab Removal2025-08-21T08:58:38Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result - A page name has been included with the namespace prefix Snippets: to show that the article is in that namespace, but there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<p>Can the namespace be identified by Number instead of Name?</p><br />
<p>The Snippets namespace was defined like this - <code>define("NS_SNIPPETS", 3400);</code> so the line in MediaWiki:Common.css was changed to this:-</p><br />
<code>#ca-nstab-3400 { display:none !important; }</code><br />
<br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1811Tab Removal2025-08-21T08:53:33Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp; And here is the result - A page name has been included with the namespace prefix Snippets: to show that the article is in that namespace, but there is no associated namespace tab:-</p><br />
[[File:SnippetsNoTab.jpg|alt=Page in Snippets namespace without a Tab|Page in Snippets namespace without a Tab]]<br />
<br />
<br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=File:SnippetsNoTab.jpg&diff=1810File:SnippetsNoTab.jpg2025-08-21T08:53:06Z<p>Grant: </p>
<hr />
<div>Page in Snippets namespace without a Tab</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1809Tab Removal2025-08-21T08:49:02Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html>. In Wikipedia the 'Page' Tab is labelled 'Article'.</p><br />
<p>Also, in Wikipedia, a mouse-over the Article Tab reveals a message 'View the content page [alt-shift-c]'. This keyboard shortcut is supposed to make it easy for users to quickly switch between the Content and other views of the page, like Discussion (or talk). Wouldn't it be simpler to just click on the Tab? But in the background is a set of Access Keys with functionality modelled on the HTML accesskey attribute. Browsers typically use Alt + Accesskey, or Alt +Shift + Accesskey. In MediaWiki the Accesskey can be defined by creating a page in the MediaWiki Namespace, for example:-</p><br />
<pre><br />
MediaWiki:Accesskey-ca-nstab-main<br />
</pre><br />
<p>Add a single letter in this page, a c perhaps, and that will become the keyboard shortcut (with alt + shift) to switch the page view to the article or content.</p><br />
<p>The components of the page name are <i>Accesskey</i>, then the prefix <i>ca-nstab</i>, then <i>main</i>. This defines the accesskey for the Main namespace only.</p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>So, to remove the Tab which relates to a namespace, and using the format of the working example &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; it should be possible to remove the Tab associated with other namespaces by adding a simplar line to MediaWiki:Common.css. For example:-</p><br />
<code>#ca-nstab-<i>namespace_name</i> { display:none !important; }</code><br />
<p>This website has a public namespace called Snippets. Here is the associated namespace tab:-</p><br />
[[File:NstabSnippets.jpg|alt=Namespace Tab for Snippets namespace|Namespace Tab for Snippets namespace]]<br />
<p>Now this line has been added to MediaWiki:Common.css &emsp; <code>#ca-nstab-snippets { display:none !important; }</code> &emsp;</p><br />
<br />
<br />
<br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1808MediaWiki:Common.css2025-08-21T08:48:50Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-snippets { display:none !important; }<br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1807MediaWiki:Common.css2025-08-21T08:48:38Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-snippets { display:none !important; } */<br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=File:NstabSnippets.jpg&diff=1806File:NstabSnippets.jpg2025-08-21T08:47:08Z<p>Grant: </p>
<hr />
<div>Namespace Tab for Snippets namespace</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1805Tab Removal2025-08-21T08:21:45Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<p><br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html></p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>The </p><br />
<br />
<br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Accesskey-ca-nstab-main&diff=1804MediaWiki:Accesskey-ca-nstab-main2025-08-21T08:17:19Z<p>Grant: </p>
<hr />
<div>A</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Accesskey-ca-nstab-main&diff=1803MediaWiki:Accesskey-ca-nstab-main2025-08-21T08:16:12Z<p>Grant: Grant moved page MediaWiki:Ca-nstab-main to MediaWiki:Accesskey-ca-nstab-main without leaving a redirect</p>
<hr />
<div>August</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Accesskey-ca-nstab-main&diff=1802MediaWiki:Accesskey-ca-nstab-main2025-08-21T08:10:33Z<p>Grant: </p>
<hr />
<div>August</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Accesskey-ca-nstab-main&diff=1801MediaWiki:Accesskey-ca-nstab-main2025-08-21T08:08:58Z<p>Grant: Created page with "Main"</p>
<hr />
<div>Main</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1800Tab Removal2025-08-21T08:08:08Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>ca-nstab-main</h3><br />
<p>In the Main namespace the first Tab is labelled <i>Page</i>.</p><br />
[[File:MainPageTab.jpg|alt=Page Tab|Page Tab]]<br />
<br />
<p> The label can be changed - see <html><a href="https://www.mediawiki.org/wiki/Snippets/Main_Page_tab" target="_blank">Snippets/Main Page tab</a></html></p><br />
<p>However, a more common requirement may be to remove the 'Page' tab completely. This is simple by adding the line &emsp; <code>#ca-nstab-main { display:none !important; }</code> &emsp; to MediaWiki:Common.css.</p><br />
<p>The </p><br />
<br />
<br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=File:MainPageTab.jpg&diff=1799File:MainPageTab.jpg2025-08-21T08:07:47Z<p>Grant: </p>
<hr />
<div>Page Tab</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1798MediaWiki:Common.css2025-08-21T07:53:01Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
/* #ca-nstab-snippets { display:none !important; } */<br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1797MediaWiki:Common.css2025-08-21T07:51:04Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-snippets { display:none !important; }<br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=MediaWiki:Common.css&diff=1796MediaWiki:Common.css2025-08-21T07:49:35Z<p>Grant: </p>
<hr />
<div>/* CSS placed here will be applied to all skins */<br />
<br />
<br />
#ca-nstab-main { display:none !important; }<br />
<br />
<br />
<br />
<br />
/* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */<br />
<br />
/* Steel Blue */<br />
:root { --SteelBlue-80: #B6CEE2;<br />
--SteelBlue-70: #91B6D4;<br />
--SteelBlue-60: #6C9DC6;<br />
--SteelBlue-50: #4785B8;<br />
--SteelBlue-40: #396A93;<br />
}<br />
<br />
/* Tan */<br />
:root { --Tan-90: #F1E7DA;<br />
--Tan-80: #E2CFB6;<br />
--Tan-70: #D4B791;<br />
--Tan-60: #C69F6C;<br />
--Tan-50: #B88747;<br />
--Tan-40: #936C39;<br />
}<br />
<br />
<br />
/* Items sorted with lightest color shade first, approximating a Z order */<br />
<br />
#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */<br />
<br />
/* mw-body-content is in front of mw-body */<br />
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } <br />
<br />
.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */<br />
<br />
.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */<br />
<br />
#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */<br />
<br />
body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */<br />
<br />
.catlinks { background-color: #bdccdb; } /* border on category row */<br />
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }<br />
<br />
<br />
<br />
<br />
/* 2 August added class to standardised margins when displaying a category tree */<br />
.displayCatTree { margin-left:4em; }<br />
<br />
<br />
<br />
/* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */<br />
<br />
.header { width:90%; <br />
margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; <br />
text-align:justify;<br />
background-color: #cce6ff; border-color: #cce6ff; border-radius: 10px;<br />
}<br />
<br />
.cat { background-color: #e8f2fc; border-color: #e8f2fc; } /* pale shade of blue for header on category pages */<br />
<br />
<br />
<br />
/* 28 July 2025 attempt to indent unordered lists */<br />
.mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */<br />
/* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */<br />
<br />
<br />
/* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */<br />
<br />
.quote { width: 90%; background: #FAFAFA; /* contrast against white page background */<br />
padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */<br />
margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; <br />
text-align:justify; color: #000000; /* black */<br />
}<br />
<br />
<br />
/* 27 July 2025 added left margin to images */<br />
.mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */<br />
<br />
<br />
<br />
<br />
/* 25 July 2025 added style to indent <pre> Note: No dot required before pre */<br />
<br />
pre { width: 90%; margin-left: auto; margin-right: auto; }<br />
<br />
<br />
<br />
/* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */<br />
<br />
.mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
<br />
/* 20 July 2025 Fluid Typography and Font Variables */<br />
/* Copied from mh370wiki.net and adapted for use here */<br />
<br />
/* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units<br />
https://www.smashingmagazine.com/2016/05/fluid-typography/ <br />
Unlike responsive typography, which changes only at set breakpoints,<br />
fluid typography resizes smoothly to match any device width.<br />
*/<br />
/* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */<br />
<br />
/* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */<br />
/* Notes on font sizes<br />
The default text size in browsers is 16px. So, the default size of 1em is 16px.<br />
rem (root em) references the base font size of the document.<br />
Assuming that the base font size is 16px, we get the following values:<br />
1rem = 16px<br />
1.5rem = 24px<br />
0.5rem = 8px<br />
*/<br />
<br />
/* Use clamp ( min preferred max ) */<br />
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } <br />
<br />
/* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */<br />
/* Example font-size: var(--font-size-100); */<br />
:root { --font-size-625: 62.5%; /* 62.5% of root font size */<br />
--font-size-875: 87.5%; /* 87.5% x root font size */<br />
--font-size-090: 90%; /* 90% x root font size */<br />
--font-size-095: 95%; /* 95% x root font size */<br />
--font-size-100: 100%; /* 100% = root font size */<br />
--font-size-105: 105%; /* 105% x root font size */<br />
--font-size-110: 110%; /* 110% x root font size */<br />
--font-size-115: 115%; /* 115% x root font size */<br />
--font-size-120: 120%; /* 120% x root font size */ <br />
--font-size-125: 125%; /* 125% x root font size */<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text Styles using Font Variables */<br />
<br />
/* Font Sizes */<br />
body { font-size: var(--font-size-100); }<br />
p { font-size: var(--font-size-100); }<br />
dl dt dd { font-size: var(--font-size-100); }<br />
dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */<br />
/* ul ol li { font-size: var(--font-size-100); } */<br />
<br />
/* Headings are sized by percentage over the base font and also resize based on viewport width */<br />
h1 {font-size: var(--font-size-125);} <br />
h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */<br />
h3 {font-size: var(--font-size-115);}<br />
h4 {font-size: var(--font-size-110);}<br />
h5 {font-size: var(--font-size-105);}<br />
/* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */<br />
h6 {font-size: var(--font-size-090);}<br />
<br />
h1, h3, h4, h5, h6 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: var(--clr-DeepPurple-base-30); <br />
font-weight: 600;<br />
}<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* Text layout using padding - use vw for responsive */<br />
/* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
/* h1, h2, h3 align with left of page. h4 is rarely used */<br />
h5 { padding-left: 0.5vw; } <br />
h6 { padding-left: 0.5vw; } <br />
p { padding-left: 1vw; padding-right:1vw; } <br />
<br />
<br />
/* ordered list ol and altered padding for a nested list */<br />
ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; <br />
& ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; }<br />
} <br />
<br />
/* Definition List */<br />
dl { padding-left: 2.5vw; padding-right:2.5vw; } <br />
dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; }<br />
<br />
<br />
/* _________________________________________________________________________________________________________________________*/<br />
<br />
/* 11 July 2025 Rows and Columns */<br />
<br />
/* 26 July 2020 New row/column layout */<br />
/* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */<br />
.Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } <br />
.column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; }<br />
.column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; }<br />
.column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; }<br />
<br />
/* flex-basis determines column width */ <br />
.col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */<br />
.col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */<br />
.col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */<br />
.col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */<br />
.col-width-40 { flex-basis: 40%; flex-shrink: 8;} <br />
/*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */<br />
/* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */<br />
.col-width-30 { flex-basis: 0; }<br />
.col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1795Tab Removal2025-08-20T10:02:26Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5>A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { background:green; }</code> &emsp; with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<p>So now I have added this line to Common.css &emsp; <code>.vector-menu-tabs-legacy .selected { display: none !important; }</code> &emsp; with this result:-</p><br />
[[File:SIR2018NoTab.jpg|alt=Page Head with no Tab for namespace name|Page Head with no Tab for namespace name]]<br />
<p>The applied CSS is captured here:-</p><br />
[[File:WhiteTabNotDisplayed.jpg|alt=White namespace tab not displayed in page head|White namespace tab not displayed in page head]]<br />
<p>As you can see, the tab still has a white background, but the display:none has finally been effective. It also works for all custom namespaces./p><br />
<br /><br />
<br />
<h3>Next Steps</h3><br />
<ol><br />
<li>I cannot believe that this is the correct way to remove these tabs. If/when I find a better way I will update this article. I can also predict that any upgrade to the version of MediaWiki and the Vector skin will require that this workaround be checked.</li><br />
</ol><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=File:WhiteTabNotDisplayed.jpg&diff=1794File:WhiteTabNotDisplayed.jpg2025-08-20T09:58:36Z<p>Grant: </p>
<hr />
<div>White namespace tab not displayed in page head</div>Granthttps://mw.mh370.wiki/w/index.php?title=File:SIR2018NoTab.jpg&diff=1793File:SIR2018NoTab.jpg2025-08-20T09:55:59Z<p>Grant: </p>
<hr />
<div>Page Head with no Tab for namespace name</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1792Tab Removal2025-08-20T09:50:50Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the CSS creating the white background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<p>I added this to Common.css <code>.vector-menu-tabs-legacy .selected { background:green; }</code> with this result:-</p><br />
[[File:GreenTab.jpg|alt=Namespace tab with green background|Namespace tab with green background]]<br />
<p>Bold colours prove the CSS is functional!</p><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=File:GreenTab.jpg&diff=1791File:GreenTab.jpg2025-08-20T09:50:03Z<p>Grant: </p>
<hr />
<div>Namespace tab with green background</div>Granthttps://mw.mh370.wiki/w/index.php?title=Tab_Removal&diff=1790Tab Removal2025-08-20T09:44:27Z<p>Grant: </p>
<hr />
<div>{{PageHeader}}<br />
<br />
<p>On the {{MH370Site}} website I wanted no Tabs. I wanted the page head to be uncluttered. And I did not want to open discussion pages (Talk) or allow the page source to be viewed. I just wanted it to look clean and simple.</p><br />
<p>Tab removal was achieved by adding the following to Common.css.</p><br />
<pre><br />
#ca-nstab-main { display:none !important; } /* Page tab */<br />
#ca-talk { display: none !important; } /* Discussion Tab */<br />
#ca-history { display: none !important;} /* View History / History Tab */<br />
#ca-viewsource { display: none !important; } /* Users without Edit permission could still view the page source */<br />
#ca-view { display:none!important; } /* Read Tab (Vector Skin) */<br />
</pre><br />
<p>The Edit tab is available to a logged-in user. And 'More' opens the dropdown menu for Delete, Move and Protect. But these are not visible to the anonymous users.</p><br />
<br />
<h3>Namespace Tabs</h3><br />
<p>There are several namespaces which hold public content. Two namespaces had unfriendly names:-</p><br />
<ul><br />
<li>FI_2015</li><br />
<li>SIR_2018</li><br />
</ul><br />
<p>The Namespace name appeared in a Tab but hadn't bothered me until now.</p><br />
[[File:FI2015inTab.jpg|alt=Namespace FI_2015 in a Tab|Namespace FI_2015 in a Tab]]<br />
<p>To make the displayed names more friendly I changed the name of each namespace to a descriptive title and retained the original name as the alias. This is quite safe - the namespace Number is critical and changing it effectively causes all the content to be lost and a new empty namespace to be created. So don't do that!</p><br />
<p>The new namespace names are:</p><br />
<ul><br />
<li>Factual Information (2015) <i>with an alias</i> FI_2015</li><br />
<li>Safety Investigation Report (2018) <i>with an alias</i> SIR_2018</li><br />
</ul><br />
<p>But now the page head looks like this:-</p><br />
[[File:FI2015FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<p>And</p><br />
[[File:SIR2018FullinTab.jpg|alt=Longer Namespace name in Tab|Longer Namespace name in Tab]]<br />
<br /><br />
<h3>Removing the Tab with the Namesace Name</h3><br />
<p>The page source, shown by Firefox Web developer Tools, contains the various classes, including the id ca-nstab-safety_investigation_report_(2018). A similar id is generated for the Factual Information (2015).</p><br />
[[File:LeftNavCSS.jpg|alt=Page source showing Tab in Left Navigation Tab|Page source showing Tab in Left Navigation Tab]]<br />
<p>My usual approach is to identify the relevant class and ID and simply add CSS to Common.css to effectively 'display:none'. But that did not work for me. Even identifying the namespace by either name or number in combination with ids and classes in different combinations and sequences was not successful.</p><br />
<h5A Workaround</h5><br />
<p>I won't offer the following as a solution, even though it works, because there is probably a better way. If I find a solution I will update this article.</p><br />
<p>The Tab containing the Namespace name has a white background. I figure that one way to check if you have identified a target item is to change its colour.</p><br />
<p>Here is the wite background:-</p><br />
[[File:NStabWhiteBackground.jpg|alt=Identifying the class by its white background|Identifying the class by its white background]]<br />
<br />
<br />
<br />
<p></p><br />
<br />
<h3>Links</h3><br />
<dl><br />
<dt>Manual:Removing tabs</dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/Manual:Removing_tabs" target="_blank">https://www.mediawiki.org/wiki/Manual:Removing_tabs</a></html></dd><br />
<br />
<dt>Hide page tabs </dt><br />
<dd><html><a href="https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs" target="_blank">https://www.mediawiki.org/wiki/User:Subfader/Hide_page_tabs</a></html></dd><br />
<br />
<dt>How to remove the top navigation page tabs in MediaWiki </dt><br />
<dd><html><a href="https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html" target="_blank">https://www.hostknox.com/knowledgebase/674/How-to-remove-the-top-navigation-page-tabs-in-MediaWiki.html</a></html></dd><br />
<br />
<dt> </dt><br />
<dd><html><a href=" " target="_blank"> </a></html></dd><br />
</dl></div>Granthttps://mw.mh370.wiki/w/index.php?title=File:NStabWhiteBackground.jpg&diff=1789File:NStabWhiteBackground.jpg2025-08-20T09:36:17Z<p>Grant: </p>
<hr />
<div>Identifying the class by its white background</div>Granthttps://mw.mh370.wiki/w/index.php?title=File:LeftNavCSS.jpg&diff=1788File:LeftNavCSS.jpg2025-08-20T09:32:39Z<p>Grant: </p>
<hr />
<div>Page source showing Tab in Left Navigation Tab</div>Grant