Difference between revisions of "MediaWiki/Vector Colour Theme"

From grantswebsite.net
Jump to navigation Jump to search
(Created page with "<seo titlemode="append" title="How to customise Vector Colours " keywords="MediaWiki, hosted sites, hosting, Vector, Pivot, Skin, CSS, color, colour, backgro...")
 
 
(3 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
       titlemode="append"
 
       titlemode="append"
 
       title="How to customise Vector Colours "
 
       title="How to customise Vector Colours "
       keywords="MediaWiki, hosted sites, hosting, Vector, Pivot, Skin, CSS, color, colour, background color, customise, customize, Common.css, sub-folder, Guide"   
+
       keywords="MediaWiki, hosted sites, hosting, Vector, Skin, CSS, color, colour, background color, customise, customize, Common.css, sub-folder, Guide"   
 
       description="Your meta description">
 
       description="Your meta description">
 
</seo>
 
</seo>
 
__NOTOC__
 
__NOTOC__
 
<h4>How to customise Vector Colours</h4>
 
<h4>How to customise Vector Colours</h4>
 
+
<p>One of the Skins pre-packaged with MediaWiki is called Vector. Vector has been a default skin for Wikipedia and many other sites, so it is widely used. However, the default colour scheme for Vector is very conservative, so it is worth the effort to customise the interface with your own colour theme. Particularly because Vector is perhaps unique in that an extension reliably enables a collapsible menu in the left column or Sidebar.</p>
<p>One of the Skins pre-packaged with MediaWiki is called Vector.</p>
+
<p>My project involved another MediaWiki installation using Vector and to make something special out of the Vector interface initially took quite an effort. It literally took days to discover what each class was and how to customise it; to develop a colour scheme that worked and test it - each change takes a while before an update is visible on a live site, cached pages had to be purged; and repeat the process many times.</p>
<p>Vector has been a default skin for Wikipedia and many other sites, so it is widely used.</p>
+
<p>So I decided to document what I learned and created a 'demo site' using Vector with a wild colour scheme that demonstrates where each area of the interface lies, and the class or ID used to change the background-color. I learnt how to use CSS variables and I'm hooked - they make it so easy to change one colour and see the effect everywhere that colour was used. </p>
<p>The default colour scheme for Vector is very conservative, some might say bland. But Vector is perhaps unique in that an extension reliably enables a collapsible menu in the left column or Sidebar.</p>
+
<p>This 'demo site' has it's own MediaWiki installation in a sub-folder of this 'main' site. The URL is <html><a href="https://vector.grantswebsite.net/wiki/Main_Page" target="_blank">https://vector.grantswebsite.net/wiki/Main_Page</a></html> and I eventually figured out how to get .htaccess configured so the demo site can be accessed, substituting /wiki for /w as recommended (mostly by trial and error!). But that is a separate topic.</p>
<p>I recently converted a MediaWiki-based website built using the Pivot skin, to use Vector instead. Pivot is an excellent skin which uses Foundation CSS so it has a grid, buttons and other features which make it an excellent choice for a modern MediaWiki website. During a conversion, all of the Foundation CSS classes have to be changed, and the nice Pivot interface is exchanged for a bland Vector screen. Initially, the only advantage of this effort is the use of the collapsible menu, but over time there will be a lot of custom CSS developed to make the site quite unique.</p>
+
<p>So, for anyone who wants a thorough, visual, description of how to customise a color scheme for Vector, with an explanation of the CSS to use in MediaWiki:Common.css; or wants to do something similar to a different MediaWiki skin, this multi-page article may be helpful. The panel below is a descriptor for the demo site:-</p>
<p>To make something special out of the Vector interface took quite an effort. It literally took days to discover what each class was and how to customise it; to develop a colour scheme that worked and test it - each change takes a while before an update is visible on a live site, cached pages had to be purged; and the process repeated many times.</p>
 
<p>So I decided to document what I learned and created a 'demo site' using Vector and a wild colour scheme that demonstrates where each area of the interface lies, and the class or ID used to change the background-color. I learnt how to use CSS variables and I'm hooked - they make it so easy to change one colour and see the effect everywhere that colour was used. </p>
 
<p>This 'demo site' has it's own MediaWiki installation in a sub-folder of this 'main' site. The URL is <html><a href="https://www.grantswebsite.net/vector/wiki/Main_Page" target="_blank">https://www.grantswebsite.net/vector/wiki/Main_Page</a></html> and I eventually figured out how to get .htaccess configured so the demo site can be accessed, substituting /wiki for /w as recommended (mostly by trial and error!). But that is a separate topic.</p>
 
<p>So, for anyone who wants a thorough, visual, description of how to customise a color scheme for Vector, with an explanation of the CSS to use in MediaWiki:Common.css; or wants to do something similar to a different MediaWiki skin, this multi=page article may be helpful. The panel below is a descriptor for the demo site:-</p>
 
  
 
<div class="quote">
 
<div class="quote">
 
<p>This MediaWiki site has been created specifically to demonstrate how to assign background colours to each part of the Vector skin interface.</p>
 
<p>This MediaWiki site has been created specifically to demonstrate how to assign background colours to each part of the Vector skin interface.</p>
<p>The weird colour theme therefore has a purpose, and is developed through a series of articles beginning here: [[Vector Colour Theme]].</p>
+
<p>The weird colour theme therefore has a purpose, and is developed through a series of articles.</p>
<p>The series ends with a list of Resources including links to a few sites offering guides on how to select a pleasant colour scheme. The [[Vector Colour Theme]] series, however, is designed to show how to make the CSS changes to a MediaWiki skin, which is pre-requisite to implementing an effective colour theme.</p>
+
<p>The series ends with a list of Resources including links to a few sites offering guides on how to select a pleasant colour scheme. The Vector Colour Theme series, however, is designed to show how to make the CSS changes to a MediaWiki skin, which is pre-requisite to implementing an effective colour theme.</p>
 +
<p><html><a href="https://vector.grantswebsite.net/wiki/Main_Page" target="_blank">https://vector.grantswebsite.net/wiki/Main_Page</a></html></p>
 
<p>I hope it is useful,</p>
 
<p>I hope it is useful,</p>
 
<p>Grant</p>
 
<p>Grant</p>
 
</div>
 
</div>

Latest revision as of 09:04, 6 October 2021


How to customise Vector Colours

One of the Skins pre-packaged with MediaWiki is called Vector. Vector has been a default skin for Wikipedia and many other sites, so it is widely used. However, the default colour scheme for Vector is very conservative, so it is worth the effort to customise the interface with your own colour theme. Particularly because Vector is perhaps unique in that an extension reliably enables a collapsible menu in the left column or Sidebar.

My project involved another MediaWiki installation using Vector and to make something special out of the Vector interface initially took quite an effort. It literally took days to discover what each class was and how to customise it; to develop a colour scheme that worked and test it - each change takes a while before an update is visible on a live site, cached pages had to be purged; and repeat the process many times.

So I decided to document what I learned and created a 'demo site' using Vector with a wild colour scheme that demonstrates where each area of the interface lies, and the class or ID used to change the background-color. I learnt how to use CSS variables and I'm hooked - they make it so easy to change one colour and see the effect everywhere that colour was used.

This 'demo site' has it's own MediaWiki installation in a sub-folder of this 'main' site. The URL is https://vector.grantswebsite.net/wiki/Main_Page and I eventually figured out how to get .htaccess configured so the demo site can be accessed, substituting /wiki for /w as recommended (mostly by trial and error!). But that is a separate topic.

So, for anyone who wants a thorough, visual, description of how to customise a color scheme for Vector, with an explanation of the CSS to use in MediaWiki:Common.css; or wants to do something similar to a different MediaWiki skin, this multi-page article may be helpful. The panel below is a descriptor for the demo site:-

This MediaWiki site has been created specifically to demonstrate how to assign background colours to each part of the Vector skin interface.

The weird colour theme therefore has a purpose, and is developed through a series of articles.

The series ends with a list of Resources including links to a few sites offering guides on how to select a pleasant colour scheme. The Vector Colour Theme series, however, is designed to show how to make the CSS changes to a MediaWiki skin, which is pre-requisite to implementing an effective colour theme.

https://vector.grantswebsite.net/wiki/Main_Page

I hope it is useful,

Grant