Difference between revisions of "Coding Rawpedia pages"

m (All sections finished)
m
 
Line 2: Line 2:
 
'''''<big>What follows are a set of coding rules needed to add special features on Rawpedia pages, while using the customized Pivot skin.</big>'''''
 
'''''<big>What follows are a set of coding rules needed to add special features on Rawpedia pages, while using the customized Pivot skin.</big>'''''
 
<br/>
 
<br/>
'''''<big>This page is not intended to translate it, just to help those who write documentation pages.</big>'''''
+
'''''<big>This page is not intended to be translated, just to help those who write documentation pages.</big>'''''
  
  

Latest revision as of 20:56, 22 May 2020

Coding Rawpedia pages

What follows are a set of coding rules needed to add special features on Rawpedia pages, while using the customized Pivot skin.
This page is not intended to be translated, just to help those who write documentation pages.


1 Page titles

At the very top of each page you should add this code:

<div class="pagetitle">Page Title</div>

so the page title looks as the one present in this page. Just copy/paste the code, and edit the page title.

2 Table of Contents

Even though Mediawiki automatically adds a table of contents (ToC) whenever there are 3 or more sections in the page, if you want to force the ToC appearing no matter what, add this code:

__TOC__

If on the other hand, you don't want a table of contents in your page, add this code:

__NOTOC__

According to the Mediawiki documentation, those codes can be added anywhere in the page code, but it would make more sense if you add them just below the page title, so anybody looking at the page code will immediately know what do you wish to happen with the ToC.

3 Empty lines

No matter what your subconscious mind tells you to do, don't add unnecessary empty lines just for the shake of formatting content: the appropriate empty space needed between paragraphs, lists, images..., is handled with CSS rules, and most probably you will only generate odd behaviours with those extra empty lines.

4 Lists

Lists are written the same as in standard mediawiki, that is:

  • for unordered lists, you will start the paragraph with an asterisk (*), without any empty space preceding it.
  • if you need a nested unordered list, just add another asterisk (**)
  • when you need an ordered list (with numbers), you will add a hash instead of an asterisk (#)
  • whenever you need an unordered list nested into an ordered list, you will combine the hash with the asterisk (#*)

As the stylesheet is coded, you may add an empty line or not between the preceding paragraph and the list (it won't matter if there's an empty line): the rules will take care of the correct spacing between each element of the list and between them and the preceding paragraph.

On the other hand, in spite you can code the list with empty lines between the list elements, it's not advised, as that will lead to odd line spacing, separating the elements too much and losing the impression of a list.

So this code:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr:

* At vero eos et accusam et justo duo dolores et ea rebum.
* Stet clita kasd gubergren, no sea takimata sanctus est.
*# Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
*# Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.
*# Dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
*#* Consectetuer adipiscing elit
*#* Sed diam nonummy nibh euismod tincidunt.
* Ut laoreet dolore magna aliquam erat volutpat.
** Ut wisi enim ad minim veniam.
** Quis nostrud exerci tation.

will show as:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr:

  • At vero eos et accusam et justo duo dolores et ea rebum.
  • Stet clita kasd gubergren, no sea takimata sanctus est.
    1. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
    2. Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.
    3. Dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
      • Consectetuer adipiscing elit
      • Sed diam nonummy nibh euismod tincidunt.
  • Ut laoreet dolore magna aliquam erat volutpat.
    • Ut wisi enim ad minim veniam.
    • Quis nostrud exerci tation.

5 Images

There are mainly 2 kinds of images: on the one hand we have those small images that follow text (which are positioned inline), and on the other there are images that are blocks, with their own meaning, and somehow isolated from the text.

5.1 Inline images

Here you can consider the size of the images, even though they will always be relatively small to fit in a sentence: there are images that can be thought of as individual letters (as are icons), as opposed to images that fit inside a line of text, but are larger.

5.1.1 Icons

  • You can add icons to a sentence like this:
Lorem ipsum dolor sit amet, Profile-filled.png nullam mauris est, pharetra a fringilla vitae.
And you will code it like this:
Lorem ipsum dolor sit amet, [[image:Profile-filled.png]] nullam mauris est, pharetra a fringilla vitae.
  • If you also wish to add some text that will show as a tooltip while hovering the icon (hover the icon in the next example) :
Pellentesque tempor turpis vel orci. Ornare dapibus sit amet rutrum sapien.
You just have to add the tooltip text after a pipe symbol. And the code will look like:
Pellentesque tempor turpis vel orci. [[image:preferences.png|Ornare dapibus]] sit amet rutrum sapien.
  • There's a chance that sometimes the image is just too big to look fine next to the text surrounding it. In such situations you can set a width to shrink appropriately the image:
Pellentesque tempor turpis vel orci. Ornare dapibus sit amet rutrum sapien.
You will add another pipe symbol, and then the desired image width:
Pellentesque tempor turpis vel orci. [[image:preferences.png|Ornare dapibus|18px]] sit amet rutrum sapien.
However, bear in mind that more often than not it will be better to scale down the image in an editor and reupload the smaller image.

5.1.2 Images inside tables

The way to code them follows the same principles than with inline images, in spite that usually they will be larger images.

5.1.3 Larger images that lead or end sentences

You will code them mostly the same, with the same options, but it's advisable that you enclose them inside a <div>, and state on which side of the viewport (or paragraph) it should be placed. Usually they will be placed at the left side of the paragraph.

There is a slight rendering difference if those images are included in a plain paragraph, or in a list (this case is specially useful when explaining the meaning of a setting or a slider, and placing the image at the end of the paragraph):

Wavelet contrast shadow.png

Praesent efficitur enim in felis elementum, congue blandit augue hendrerit. Donec bibendum nec nisi eget dapibus. Sed augue augue, porttitor nec volutpat at, porttitor pellentesque tellus. Nulla tempus vestibulum fringilla. Vivamus in orci risus. Donec vel nulla at libero fermentum tincidunt.

  • In hac habitasse platea dictumst. Praesent quis tellus scelerisque, fringilla libero quis, facilisis arcu. Donec eu tellus eget neque dignissim sodales vitae et quam. Donec scelerisque dignissim ex, ut lacinia massa fringilla eu. Mauris efficitur lacinia finibus. Sed eget aliquam dui. Vestibulum vel nunc a sem aliquam laoreet
    Wavelet contrast highlight.png

The images will be located at the beginning or the end of the paragraph, and are coded like:

<div style="overflow: hidden">[[File:wavelet_contrast_highlight.png|left]]</div>

5.2 Framed images

Those are big images, usually shown downscaled, so if you wish to see them full size, you will have to click them.

They are usually styled with a frame around the image, that also encompasses the optional image caption.

5.2.1 Image styled as a thumbnail

This is the default way of coding these images, and will render them within a frame, 300px wide (plus the width of the border line, plus the space around the image and inside the frame), and placed to the right.

In this example there are also an image caption and a link that will lead you to the specified url when you click the image:

Cras vestibulum turpis
Pellentesque sodales non odio in venenatis. Suspendisse imperdiet laoreet dictum. Phasellus at tortor vel ante interdum pellentesque non at justo. Nam luctus, risus quis ullamcorper ultrices, justo justo commodo massa, ut ultrices ex ante porta metus. Cras vestibulum turpis vel enim condimentum gravida. Suspendisse potenti. Curabitur euismod nunc placerat pharetra elementum. Pellentesque sodales non odio in venenatis. Suspendisse imperdiet laoreet dictum. Phasellus at tortor vel ante interdum pellentesque non at justo. Nam luctus, risus quis ullamcorper ultrices, justo justo commodo massa, ut ultrices ex ante porta metus. Cras vestibulum turpis vel enim condimentum gravida. Suspendisse potenti. Curabitur euismod nunc placerat pharetra elementum. Pellentesque sodales non odio in venenatis. Suspendisse imperdiet laoreet dictum. Phasellus at tortor vel ante interdum pellentesque non at justo. Nam luctus, risus quis ullamcorper ultrices.

It's coded as:

[[File:Wavelet_daubechies20.png|thumb|Cras vestibulum turpis|link=https://en.wikipedia.org/wiki/Daubechies_wavelet]]

5.2.2 Image styled as a custom width thumbnail

It's the same as a standard thumbnail, but with a custom width smaller than the original image size. If you set a size bigger than the image, it will render the image at 100%, but no bigger.

This time a left positioning is added, too:

Aenean dolor nibh
Nunc et semper magna. Fusce vel dolor orci. Suspendisse eget velit pellentesque turpis sodales pretium at finibus velit. Aenean dolor nibh, tempus nec sapien eu, rhoncus posuere tortor. Sed scelerisque lacus id risus convallis euismod. Praesent in ante non purus varius eleifend. Nulla tempor, arcu suscipit posuere ultricies, diam elit euismod sem, quis dignissim est arcu id quam. Nullam gravida posuere aliquam. Nunc et semper magna. Fusce vel dolor orci. Suspendisse eget velit pellentesque turpis sodales pretium at finibus velit. Aenean dolor nibh, tempus nec sapien eu, rhoncus posuere tortor. Sed scelerisque lacus id risus convallis euismod. Praesent in ante non purus varius eleifend. Nulla tempor, arcu suscipit posuere ultricies, diam elit euismod sem, quis dignissim est arcu id quam. Nullam gravida posuere aliquam. Nunc et semper magna. Fusce vel dolor orci. Suspendisse eget velit pellentesque turpis sodales pretium at finibus velit. Aenean dolor nibh.
[[File:wavelet_contrast_buttons.png|thumb|200px|left|Aenean dolor nibh]]

5.2.3 Image with a frame (but not a thumbnail) and it's original size

Donec posuere dictum nunc eu placerat
Mauris dui erat, viverra ac magna eu, egestas consequat mi. Integer tristique, justo quis dignissim vehicula, leo quam tincidunt mi, nec porttitor nunc augue quis enim. Nunc id sapien ipsum. Fusce diam mauris, placerat eu arcu vitae, fringilla pulvinar magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget hendrerit ex. Donec posuere dictum nunc eu placerat. Curabitur sed turpis vestibulum, euismod purus et, laoreet tellus. Mauris eget ex nisl. Mauris ultrices consequat felis sit amet euismod. Mauris dui erat, viverra ac magna eu, egestas consequat mi. Integer tristique, justo quis dignissim vehicula, leo quam tincidunt mi, nec porttitor nunc augue quis enim. Nunc id sapien ipsum. Fusce diam mauris, placerat eu arcu vitae, fringilla pulvinar magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget hendrerit ex. Curabitur sed turpis vestibulum, euismod purus et, laoreet tellus. Mauris eget ex nisl. Mauris ultrices consequat felis sit amet euismod. Mauris dui erat, viverra ac magna eu, egestas consequat mi. Integer tristique, justo quis dignissim vehicula, leo quam tincidunt mi, nec porttitor nunc augue quis enim. Nunc id sapien ipsum.

Take into account that it won't matter if you set a custom width, as it will always be rendered with its original size:

[[File:Wavelet_detail_size.png|right|frame|Donec posuere dictum nunc eu placerat]]

5.2.4 Full width images

Full width means that the image will be rendered as wider as possible, until it fills the available space.

There are two variations of the same concept: images big enough to fill the whole space, and images that at 100% size won't fill the whole space.

5.2.4.1 Heroed images

These are images that almost fill the width of the screen (except for the sidebar). The concept is similar as in Hero images, thus the name heroed.

With the next example we are displaying a big image (bigger than the viewport size), full width, and removing the possibility to click on it (link=) :

Vivamus semper mattis porttitor. Nulla id quam et eros aliquet gravida

Please note that you need to add the none option to prevent the image to overflow the screen.

Note also that you have to add the frame option to render the frame around the image. With the option class=heroed the image is given its full width:

[[[File:Rt 55 trains.png|none|frame|link=|class=heroed|Vivamus semper mattis porttitor. Nulla id quam et eros aliquet gravida]]
5.2.4.2 Centered images

In this case the images won't fill the full width, because they aren't big enough. But we want them to be prominent, so we use the same formatting as before, but getting some important side effects:

Nullam neque purus, tincidunt sit amet commodo nec, imperdiet vel leo. Integer nec mollis elit, in auctor leo. Proin et neque quis tellus laoreet faucibus. Suspendisse efficitur ligula velit, eget consequat ante mollis id.

Fusce condimentum auctor nibh sed viverra

Praesent sollicitudin bibendum purus, eget viverra lectus luctus tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam justo neque, volutpat ultricies lacinia ut, blandit eget ex.

As seen, the image is centered and the text doesn't wrap around the image: that's because we have set the none option.

[[File:Rt57 histogram wide labeled.png|none|frame|class=heroed|Fusce condimentum auctor nibh sed viverra]]

However, if you forget to set the none option, or you set the left/right options, on larger screens the text following the image will wrap around it, but on smaller screens the image will overflow the screen:

Vivamus maximus nunc suscipit luctus iaculis. Pellentesque rutrum ante sit amet leo consectetur imperdiet. Nullam elementum nisl sed volutpat ultrices.

Maecenas ultrices mauris eget urna lacinia, id eleifend urna malesuada

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse blandit enim eget nulla mattis accumsan. Mauris ut lobortis massa. In hac habitasse platea dictumst. Donec condimentum, nulla ut sagittis porttitor, est lacus laoreet mi, vitae gravida purus dui non odio.

This is the incorrect code that leads to the previous image:

...sed volutpat ultrices.
[[File:Rt filmstrip 21 toolbar-visible.jpg|frame|class=heroed|Maecenas ultrices mauris eget urna lacinia, id eleifend urna malesuada]]
Vestibulum ante ipsum ...

5.3 Galleries

Galleries are mainly lists of images, shown one next to another, but it's important to remember that they are not coded the mediawiki way.

The stylesheet is ready to let you show 2, 3 or 4 images side by side. Whenever you need to show more images altogether, consider breaking them into groups, with each group in one row.

To code a gallery you will follow these steps:

  1. enclose every row of the gallery inside a <div>
  2. start each row of the gallery as an unordered list, and assign to it the leftalign class
  3. each list element will be assigned a class depending on the number of images to show in a row:
    • RPgallery is the class to assign when there will be 4 images in a row
    • RP3inarow will be the choice for 3 images
    • RPside2side for 2 images, usually big images to compare them with enough detail
  4. include in every list element the images as inline images, with the options thumb, left, the image width, and the caption

5.3.1 4 images in a row

With this example code:

<div><ul class="leftalign"> 
<li class="RPgallery"> [[File:wavelet_pic.png|thumb|left|600px|Cras viverra ex non augue posuere, at elementum enim tempus.]] </li>
<li class="RPgallery"> [[File:wavelet_contrast_15C+_WL.png|thumb|left|600px|Vivamus viverra enim non tellus blandit imperdiet.]] </li>
<li class="RPgallery"> [[File:wavelet_contrast_15C+_H3S6.png|thumb|left|600px|Aliquam porttitor felis et sagittis placerat.]] </li>
<li class="RPgallery"> [[File:wavelet_contrast_15C+_H3S6_Str50.png|thumb|left|600px|Etiam sem leo, vulputate eget laoreet non, imperdiet sit amet orci.]] </li>
</ul></div>

the images will render as:

  • Cras viverra ex non augue posuere, at elementum enim tempus.
  • Vivamus viverra enim non tellus blandit imperdiet.
  • Aliquam porttitor felis et sagittis placerat.
  • Etiam sem leo, vulputate eget laoreet non, imperdiet sit amet orci.

On bigger screens, the images will be shown all in a row, no matter if the size set as an option is bigger. But when the screen gets smaller, there will be a breakpoint where those images will be too small, so they split into a couple of rows, and then the image size set as an option becomes really important (the image could get four times as big). Thus, when coding galleries intended for 4 images in a row, it's wise to set their sizes around 300-400 pixels.

5.3.2 3 images in a row

In this case, with this example code:

<div><ul class="leftalign"> 
<li class="RP3inarow"> [[File:wavelet_chrom_Link_50_Str50.png|thumb|left|350px|Fusce ac nisi auctor, ultrices tellus sit amet, ultricies nunc.]] </li>
<li class="RP3inarow"> [[File:wavelet_toning_opBYfull.png|thumb|left|350px|Morbi volutpat diam non mauris euismod, vel maximus sapien bibendum.]] </li>
<li class="RP3inarow"> [[File:wavelet_toning_opBYfull_curve.png|thumb|left|240px|Duis ultricies nunc eu augue aliquet porttitor.]] </li>
</ul></div>

the images will render as:

  • Fusce ac nisi auctor, ultrices tellus sit amet, ultricies nunc.
  • Morbi volutpat diam non mauris euismod, vel maximus sapien bibendum.
  • Duis ultricies nunc eu augue aliquet porttitor.

Notice that not all images must have the same width set.

5.3.3 Images compared side to side

Now we have the chance to show a couple of big images, to appreciate the differences between them.

If we code like this:

<div><ul class="leftalign"> 
<li class="RPside2side"> [[File:wavelet_smc_original.png|thumb|left|1000px|Curabitur laoreet dolor et elit vehicula mollis.]] </li>
<li class="RPside2side"> [[File:wavelet_clarity_ML60MC30.png|thumb|left|1000px|Ut a risus vel quam sodales porta.]] </li>
</ul></div>

Will get:

  • Curabitur laoreet dolor et elit vehicula mollis.
  • Ut a risus vel quam sodales porta.

And the images will remain side to side until you look at them in a really small screen.

Essentially the RPside2side class is meant to keep the images side to side, to reinforce the idea of a comparison.

6 Responsive tables

Tables in RawPedia are created the mediawiki way, but with some additions.

Let's not forget that Mediawiki is famous for its non-responsive skins, and tables are specially difficult to deal with when making them responsive.

One way to get a better solution to standard mediawiki tables is to allow them to be scrolled horizontally on smaller screens. It's by far not an ideal solution, but at least is better than standard tables. In this customized skin there's a way to get that behaviour: setting the class RPwt-table. That is, starting the table as:

{| class="RPwt-table"

and then you could add as many columns as you need.

On the other hand, this skin has a way to show really responsive tables but it's not straightforward, so let's see how to code them by means of a step by step example. Essentially it all boils down to define a table structure and then add metadata to every and each cell:

  • defining the table structure: you need to tell mediawiki how many columns the table will have. This is a must! Otherwise the table won’t work properly
{| class="RP6c-grid"
In this example we have defined a 6 columns table ( RP5c-grid would define a 5 columns table, and so on, down to RP2c-grid with a 2 columns table). There are no rules for 7 columns and up tables, but it shouldn’t be too difficult to add if needed, although the columns would be too narrow
  • table title: you just need to point to the tablegrid-caption class. No colspan needed anymore
! class="tablegrid-caption" | Magna aliquyam erat, sed diam voluptua.
  • column headers: every table should have table headers, where you declare what kind of data lies in that column cells, so the first group of cells (the first row of cells) will all be column headers, and that should be coded like this:
! role="columnheader"
The role is mostly for semantic purposes, but it’s also needed for styling purposes (it must be present)
  • attributes of cells (metadata ): now comes the tricky and tedious part, because to make the table responsive you have to manually add the appropriate attribute to each cell.
Let’s take a look at how the first column header has to be coded:
data-colh1="Ipsum" | Ipsum
The data-colh1 part is an attribute that has to be set to every cell that will be a part of that column. data-colh2 would be present in every cell that is part of the second column, and so on.
NOTE: The contents of the attribute must be the same text as the header text.
  • full code for the first column header:
! role="columnheader" data-colh1="Ipsum" | Ipsum
  • full code for the first 3 column headers:
! role="columnheader" data-colh1="Ipsum" | Ipsum
! role="columnheader" data-colh2="Hendrerit" | Hendrerit
! role="columnheader" data-colh3="Adipiscing" | Adipiscing
  • what if you want row headers too? Then you have to add a new empty column header at the beginning (we will see how to set the row headers below):
! role="columnheader" |
! role="columnheader" data-colh1="Ipsum" | Ipsum
! role="columnheader" data-colh2="Hendrerit" | Hendrerit
! role="columnheader" data-colh3="Adipiscing" | Adipiscing
Note that there’s a new first column , but you don’t take it into account when setting the column attributes (that’s odd, but it has to be that way in case you don’t need row headers, so the stylesheet is the same for both kind of tables). Don’t miss the fact that in tables without row headers you will have up to 6 columns of comparison data, while in tables with row headers you will only have up to 5 columns of comparison data, plus an extra column of row headers
  • how to add row headers, then? The first cell in a row will be the row header , and will be coded as:
! role="rowheader"| Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Don’t forget the exclamation mark (!) at the beginning
  • now the data to be compared in the table: when adding the cells with the data you will have to set the appropriate attribute for the column it will be in:
! role="rowheader"| Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
| data-colh1="Ipsum" | At vero eos et accusam et justo duo dolores et ea rebum. 
| data-colh2="Hendrerit" | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
| data-colh3="Adipiscing" | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
I have added the row header for completeness, and for you to see which one is the first column , according to the stylesheet. If you were to create a 3 columns table without row headers, the full row will be coded as this:
| data-colh1="Ipsum" | At vero eos et accusam et justo duo dolores et ea rebum. 
| data-colh2="Hendrerit" | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
| data-colh3="Adipiscing" | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
That is, no row header cell, and everything else the same
  • the final code: after you had coded all the cells in every row of the table, it will look similar to this:
{| class="RP6c-grid"
! class="tablegrid-caption" | Magna aliquyam erat, sed diam voluptua. 
|-
! role="columnheader" |
! role="columnheader" data-colh1="Ipsum" | Ipsum
! role="columnheader" data-colh2="Hendrerit" | Hendrerit
! role="columnheader" data-colh3="Adipiscing" | Adipiscing
! role="columnheader" data-colh4="Consequat" | Consequat
! role="columnheader" data-colh5="Consectetuer" | Consectetuer
|-
! role="rowheader"| Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
| data-colh1="Ipsum" | At vero eos et accusam et justo duo dolores et ea rebum. 
| data-colh2="Hendrerit" | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
| data-colh3="Adipiscing" | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
| data-colh4="Consequat" | Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
| data-colh5="Consectetuer" | Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.
|-
! role="rowheader"| Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
| data-colh1="Ipsum" | Vel illum dolore eu feugiat nulla facilisis at vero accumsan et iusto odio dignissim qui blandit.
| data-colh2="Hendrerit" | Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
| data-colh3="Adipiscing" | Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod.
| data-colh4="Consequat" | Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
| data-colh5="Consectetuer" | At vero eos et accusam et justo duo dolores et ea rebum.
|-
! role="rowheader"| Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
| data-colh1="Ipsum" | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
| data-colh2="Hendrerit" | Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
| data-colh3="Adipiscing" | Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
| data-colh4="Consequat" | Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id.
| data-colh5="Consectetuer" | Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
|}
Don’t miss the fact that in this example we have defined a 6 columns table, but only 5 columns will be used for actual data, because we have used an extra column for row headers
And this is how it will look:
Magna aliquyam erat, sed diam voluptua.
Ipsum Hendrerit Adipiscing Consequat Consectetuer
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Vel illum dolore eu feugiat nulla facilisis at vero accumsan et iusto odio dignissim qui blandit. Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

The green green column headers visible on large screens become small green flags on medium to smaller displays, and that transformation happens because of the cell attributes added. That’s why those attributes must have the same text as the column header.

7 Sidebar links

Those are the links with an icon shown on the left side of the screen, either always shown or after clicking the top left hamburguer. It goes without saying that the procedure to create or edit them needs that you have special (high) privileges in the server.

The procedure is a bit convoluted, so let's take it one step at a time.

7.1 Creating the links

  1. the MediaWiki Sidebar has to be edited, so search for «MediaWiki:Sidebar» and follow the link
  2. edit the existing list adding the target and the text to be shown on the appropriate group (section)
  3. save the Sidebar page and force a reload of the website
  4. open the Developer Tools of your browser (press F12)
  5. look for the li id=" value of your newly added link and copy the id
  6. create a new rule in the stylesheet:
    • it has to start with # then paste the copied id (it will look like #n-xxxxxxx)
    • follow it with a:before {content: “\fXXX”;}, where XXX is the unicode number of the fontawesome icon to be used (it has to be one of the v.4.7 icons)
    • if the id has a reserved character (typically a dot .), you WILL HAVE to escape it, so Eek.21 becomes Eek\.21 in the css rule
  7. save the stylesheet and force reload the browser.

7.2 Creating the tooltips

If you also wish to create or edit a tooltip for the links, follow this steps:

  1. browse this page on the wiki: index.php/MediaWiki:Sidebar
  2. copy the li id=" value of the link that’s gona receive the tooltip
  3. browse this page: index.php/MediaWiki:Tooltip-xxxxxxxxxxxxx, where xxxxxxxxxxxxx is the copied id (you have to paste the id as it is, without escaping any character)
  4. edit the page (or most probably, create it) and add the desired tooltip text: the way it looks in the editor is how it will look in the tooltip, so if you force new lines, the tooltip will look as it shown in the editor
  5. save the page and you will already have the tooltip working

And now a warning: if the text shown in a link changes, the stylesheet has to be edited or the corresponding icon won’t show up, and the tooltip page has to be created again with the new id (the page with the old text will become useless).

On the other hand, the text shown in the tooltips can be freely changed by just editing the appropriate page (Mediawiki:Tooltip-n-xxxxxxx)