Skinning MediaWiki - Revision history

Admin: /* The Style Sheet */

2012-05-25T06:28:50Z

The Style Sheet

← Older revision		Revision as of 06:28, 25 May 2012
Line 554:		Line 554:
	==The Style Sheet==		==The Style Sheet==

	In addition to the		In addition to the layout of each element, a stylesheet that corresponds to the skin must be made. For this example, the CMR skin, the stylesheet is located in:






			<pre>
			w/skins/cmr/main.css
			</pre>

			Remember that cmr is just a copy of the monobook directory. Modifying the CSS stylesheet is probably the most time-consuming part of creating a MediaWiki skin, and my advice is to keep it as simple as possible but to check all contingencies to make sure your stylesheet doesn't screw things up.

			The best way to start out on this is to see how the MonoBook style sheet looks, and start fixing the things that look weird to you. I can't provide much guidance beyond that, as it is entirely skin-specific.

			You can download the stylesheet for the CMR skin at the [[CMR MediaWiki Skin]] page.

			This is the basis of the stylesheet used in my [[Dash MediaWiki Skin]].

Admin: /* An Example Of How To Customize Page Elements */

2012-05-25T06:24:45Z

An Example Of How To Customize Page Elements

← Older revision		Revision as of 06:24, 25 May 2012
Line 336:		Line 336:
	The code used for each of them will be described here. The CMR skin is described in greater detail at the [[CMR MediaWiki Skin]] page.		The code used for each of them will be described here. The CMR skin is described in greater detail at the [[CMR MediaWiki Skin]] page.

	===MediaWiki Links===		===Customized MediaWiki Links===

	This is significantly cleaner and easier to understand than the corresponding portion in MonoBook.php. This section loops through the different sidebars and determines which ones are turned on and which ones are turned off. The order in which this occurs is:		This is significantly cleaner and easier to understand than the corresponding portion in MonoBook.php. This section loops through the different sidebars and determines which ones are turned on and which ones are turned off. The order in which this occurs is:
Line 384:		Line 384:
	</pre>		</pre>

	===MediaWiki Action Links===		===Customized MediaWiki Action Links===

	The MediaWiki links here were not significantly modified from MonoBook.php.		The MediaWiki links here were not significantly modified from MonoBook.php.
Line 406:		Line 406:
	</pre>		</pre>

	===Page Action Links===		===Customized Page Action Links===

	Again, not significantly modified from MonoBook.php:		Again, not significantly modified from MonoBook.php:
Line 503:		Line 503:
	</pre>		</pre>

	===Banner/Logo Image===		===Customized Banner/Logo Image===

	This did not use anything MediaWiki specific.		This did not use anything MediaWiki specific.

Admin: /* Page Action Links */

2012-05-25T06:23:46Z

Page Action Links

← Older revision		Revision as of 06:23, 25 May 2012
Line 408:		Line 408:
	===Page Action Links===		===Page Action Links===

	Again, not significantly modified from MonoBook.php~~, but~~		Again, not significantly modified from MonoBook.php:


Line 502:		Line 502:
	<!-- etc... --->		<!-- etc... --->
	</pre>		</pre>







	===Banner/Logo Image===		===Banner/Logo Image===

Admin: /* Page Action Links= */

2012-05-25T06:23:05Z

Page Action Links=

← Older revision		Revision as of 06:23, 25 May 2012
Line 406:		Line 406:
	</pre>		</pre>

	==Page Action Links===		===Page Action Links===


			Again, not significantly modified from MonoBook.php, but

Admin: /* An Example Of How To Put All The Page Elements Together */

2012-05-25T06:21:56Z

An Example Of How To Put All The Page Elements Together

← Older revision		Revision as of 06:21, 25 May 2012
Line 319:		Line 319:
	You can mix and match stuff to get the footer to suit your tastes.		You can mix and match stuff to get the footer to suit your tastes.

	==An Example Of How To ~~Put All The~~ Page Elements ~~Together~~==		==An Example Of How To Customize Page Elements==

	I'll demonstrate how I used the above information to create a skin (this site's former skin, called CMR or CharlesMartinReid) that shuffled a lot of links and page elements around.		I'll demonstrate how I used the above information to create a skin (this site's former skin, called CMR or CharlesMartinReid) that shuffled a lot of links and page elements around.

Admin: /* An Example Of How To Put It All Together */

2012-05-25T06:14:31Z

An Example Of How To Put It All Together

Show changes

Admin: /* Modifying Your Skin's PHP File */

2012-05-25T05:57:58Z

Modifying Your Skin's PHP File

← Older revision		Revision as of 05:57, 25 May 2012
Line 318:		Line 318:

	You can mix and match stuff to get the footer to suit your tastes.		You can mix and match stuff to get the footer to suit your tastes.

			==An Example Of How To Put It All Together==

			I'll demonstrate how I used the above information to create a skin (this site's former skin, called CMR or CharlesMartinReid) that shuffled a lot of links and page elements around.





			==The Style Sheet==

			In addition to the

Admin: /* Create a New Skin */

2012-05-25T05:54:35Z

Create a New Skin

← Older revision		Revision as of 05:54, 25 May 2012
Line 41:		Line 41:

	\|}		\|}

			=Instructions/Walkthrough=

	==Create a New Skin==		==Create a New Skin==

Admin: /* Modifying Your Skin's PHP File */

2012-05-25T05:54:00Z

Modifying Your Skin's PHP File

Show changes

Admin: /* Modifying Your Skin's PHP File */

2012-05-25T05:29:34Z

Modifying Your Skin's PHP File

← Older revision		Revision as of 05:29, 25 May 2012
Line 149:		Line 149:
	[[Image:ScreenShotWithBoxes.jpg\|400px]]		[[Image:ScreenShotWithBoxes.jpg\|400px]]

	There are ~~three~~ elements of interest here:		There are four elements of interest here:

	1. MediaWiki links (e.g. "Main Page", "Random Page", "Special Pages", "Featured Content", etc...) - ''left side of page''		1. MediaWiki links (e.g. "Main Page", "Random Page", "Special Pages", "Featured Content", etc...) - ''left side of page''
Line 156:		Line 156:

	3. Page action links (e.g. "Edit", "History", etc...) - ''top edge of page''		3. Page action links (e.g. "Edit", "History", etc...) - ''top edge of page''

			4. Website logo

	I will cover how each of these is controlled.		I will cover how each of these is controlled.