Can I move the edit links of page sections?

[SteveMann]

I moved my local MediaWiki form a Raspberry Pi to an Intel NUC, and in the process upgraded to the latest MediaWiki version.

I was using the vector skin in both the old and the new location.

In the older version, the [edit] links were all on the right side of the page, and now they immediately follow the heading text.

Can I move the [edit] links to the right side of the pages?

Thanks

 

[Skizzerz]

The first one will cause issues so I wouldn't recommend it. For options 2 or 3:

• Make a very heading, such that it wraps around multiple lines on a desktop browser. See which of the options looks better there.
• Try it on tablet and mobile devices (or use browser dev tools to emulate those device sizes if you don't have any actual devices available), focusing mostly on normal-sized headings. These headings will probably not wrap on tablet, but may wrap on mobile. See which of the options looks better there.

As for where to put it: depends. Common.css affects every skin, Vector.css affects only the vector skin. Given that skins can put edit links pretty much wherever they want, there's no guarantee that your change for vector will work properly on other skins.

[Skizzerz]

You can add custom CSS to your wiki to move it back to the right; you may wish to test that your edits look good across a variety of screen sizes from mobile phones up to desktops. The edit section tag is in a class called "mw-editsection", so you can use that for your selector.

To add custom CSS to your wiki, edit the page MediaWiki:Common.css while logged into an administrator account, or MediaWiki:Vector.css if you wish for those changes to only apply to the Vector skin. See the manual page on mediawiki.org for more information.

[SteveMann]

Thanks. I am a complete novice at CSS but the class name should help with my experiments.  I did try a few things in my Common.css such as align:right, but the only thing that moved the [edit] links was to increase the spacing.

[SteveMann]

One more question, please.

All three of the following definitions work- which is correct?

.mw-editsection {
  position: absolute;
  right: 0px;
}

.mw-editsection {
  text-align: right;
}

.mw-editsection {
  float: right;
}
 

And would you put it into Custom.css or Vector.css?