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 the steps below requires interfaceadmin rights. You can find a list of users with interfaceadmin rights by going to Special:ListUsers/interface-admin on your wiki. After a new wiki is created, by default nobody has interfaceadmin rights. Sometimes people are made admins on the basis of a steward decision, but usually only when the new wiki community had made a local request for adminship. Interfaceadmin rights are only given to people who specifically request it.

What you can learn on this page
Change the width of your browser window. Make it smaller and wider. See how arrangement of the boxes in the next line changes:

 Box 1 Box 2 Box 3 Box 4 Box 5

This page explains how you can have this 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.) And using  to store the layout ("CSS") for one single page is also a bad idea.

Hence on this page, we will
 * use HTML markup and wiki markup for the actual content,
 * save this content as a template in a new wiki page called ,
 * use CSS to define the layout part (boxes) in a new wiki page called ,
 * use TemplateStyles to apply the layout to the content in the template via the line, and
 * on the main page, load and embed the template via the line.

Create the main page template
First of all, create a new page called  on your wiki.

Add content to the main page template
In this step, we define the content by editing the new page called.

In the box below, there is a skeleton with five boxes. Copy and paste the lines in that box into that page, 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.

The  parameters below define the CSS layout for these HTML elements. We will define the layout in the next step. The very first line  loads the CSS layout.

  

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

Define the CSS
Create the wiki page  on your wiki.

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.

.wikifrontpage_row { display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between; padding: 0; margin: 0 -5px 0 -5px; } .wikifrontpage_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); }

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  and save the page.

Test

 * Go back to the page  and reload it. The CSS layout which we defined in the previous step should now be applied.
 * Feel free to test more: 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"!

Add the template to your main page
Once you are content with the changes, embed the template in the main page itself: Edit your main page and add the line  to it. As written above, this requires interfaceadmin rights.

That's all! Congratulations!

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:
 * Questions? Feel free to bring up any questions on meta:Special:MyLanguage/Tech or other technical support places. Please do not ask on the Discussion page here.

Other CSS options for smaller screens
Another option is to define CSS rules which are only used up to some window width. See CSS media queries if you are interested in experimenting with that.