Explore style tabs

[Kenny2github]

Here's some doctored screenshots: enwiki homepage, transplanted to my local instance (hence the missing images): My sandbox, with the pencil menu now just a button: My sandbox, with the pencil menu shown:

[Kenny2github]

In German (and therefore presumably other languages) the buttons have long enough text to wrap. This is the best I can do unless others have suggestions:

[Ascor8522]

How about using icons instead of wrapping text? Everybody would be able to understand them, and they don't take as much place as text.

Here is a screenshot of what it would look like. I made it in like 2 mins, so they icons don't really match and I guess the spacing could be adjusted, but anyway.

You could even hide all the icons on the left under some kind of dropdown.

[Kenny2github]

@Ascor8522 Once you figure out how to make MediaWiki's content_actions data member produce icons, I will go right ahead. Dropdown is out though, because we are still keeping the pencil menu.

[Ascor8522]

@Ascor8522 Once you figure out how to make MediaWiki's content_actions data member produce icons, I will go right ahead. Dropdown is out though, because we are still keeping the pencil menu.

It's fairly easy with a bit of css.

For example, I changed the dropdown menu only with css, so it must be possible to do the same for other parts of the skin.

For the dropdown: All the links have a different id, all starting with ca-, we can use this at our advantage.

ul.dropdown > li[id^=ca-] > a {
	content-visibility: hidden; /* hide the previous text, if any */
	width: 25px; /* width of the icon */
	height: 25px; /* height of the icon */
	margin: 5px; /* margin for men */
	padding: 0; /* remove the padding of the icons */
	background-size: cover; /* make the icon take the whole width and height */
        background-position: center; /* center the icon */
}

ul.dropdown {
    min-width: unset; /* make the dropdown resize to the fitting width */
}

and for every single element of the dropdown

ul.dropdown > li[id=ca-nstab-main] > a { /* here, it is the first entry of the dropdown, aka. "Main Page" */
    background-image: url(); /* enter the url of the icon here */
}

And here is your css dropdown. Now replace the random images with actual icons...

[Kenny2github]

@Ascor8522 Good one! It might also be a good idea to have the icon expand into the text when hovered over (not just hover text). I'll see what I can do with that in the coming days.

[Kenny2github]

@Ascor8522 I've added the framework - do you mind either finding or making icons (that we're allowed to use, and credit if necessary) to put into the tabs?