User:AKlapper (WMF)/Sandbox/T241646

When you are a member of a new wiki community, you sometimes want to customize the main page (to make it look better on small screens), or change configuration settings.

This page explains some basics, so you can make these changes yourself. You will have to read a bit, might learn something new, and have to test yourself. Performing these steps requires interfaceadmin rights. (TODO: Really? And who gets these rights when a new wiki site is created?) You can find a list of users with interfaceadmin rights by going to Special:ListUsers/interface-admin on your wiki.

Understand the background
Somehow, boxes are popular in web layout nowadays. If you put some boxes next to each other, then you also want these boxes to be readable on small screens. This is called responsive web design.

To put boxes next to each other, some people (ab)used tables in the past. Tables exist in wiki markup, but tables are a bad idea. Tables look bad on small screens (see this example image) and can create accessibility problems.

Unfortunately, the MediaWiki software does not provide responsive boxes as wiki markup. (Some boxes might exist as templates on some wikis, though.)

That's why we will first use some CSS to define the layout part. After that, we use HTML markup and wiki markup for the actual content on the page.

Define the CSS
The next lines define the layout of a box, and at which width a box moves from one line to the next line. You do not have to understand all the CSS below.

.mainpage_row { display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between; padding: 0; margin: 0 -5px 0 -5px; } .mainpage_box { flex: 1; margin: 5px; min-width: 240px; border: 1px solid #CCC; padding: 0 10px 10px 10px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .mainpage_box p:last-child { margin-bottom: 0; }

The important parts in the CSS above are all lines with the word  (which defines a flexible layout) and the line   (which defines the width when to move a box from the same line to the next line).

Copy and paste these CSS definitions into the page MediaWiki:Common.css. Make sure that you use specific names (names in the example above are  and  ), as all the CSS on the MediaWiki:Common.css is applied on all and any pages on your wiki.

Edit the content of the main page
Here is a skeleton with five boxes that you could copy and paste, and then adjust. It uses the HTML division element ("div"). You can of course change the number of boxes: To remove a box, remove everything between an opening  and its corresponding closing. Make sure that these two elements match, otherwise weird stuff can happen.

 

Box 1

 * Item1 in the first box
 * Item2 text in the first box

Box 2
Some text in the second box 

Box 3
Some text in the third box 

Box 4
Some text in the fourth box 

Box 5
Some text in the fifth box

Test

 * Use the "Show preview" button. Either resize the window of your web browser to see how the page looks on smaller screens, or use the Developer Tools of your browser to make the viewport smaller. (For more information, see: Chrome/Chromium, Firefox, Internet Explorer, Opera, Safari).
 * Make sure to also test your changes with all the other skins available in the Preferences under "Appearance"!

Publish
If you are content with the changes, save them.

Problems

 * Clear your browser cache if you cannot see your changes.
 * If you have image thumbnails above your area with boxes, and you do not want a thumbnail to decrease the width of the area with boxes, add a HTML division element with the CSS clear property before the boxes area:
 * TODO: But where to ask support questions? We don't want to become a "Web design Ask Me Anything" place and need to set correct expectations.

Further information

 * Advanced: You could also load the main page as a template, and add put the CSS into a separate page and load that separate page via mw:Special:MyLanguage/Help:TemplateStyles, e.g..

Other customization changes
See Wikimedia site requests how you can:
 * change the logo of a Wikimedia wiki,
 * add a custom namespace,
 * change the translation of a namespace,
 * change the linktrail,
 * change local group rights,
 * change user groups and restriction levels,
 * enable or disable extensions on a wiki,
 * change import sources,
 * convert digits (numbers) into a different script,
 * etc.