Help:-show classes

This is an information page.

It is not an encyclopedic article, nor one of Wikipedia's policies or guidelines; rather, its purpose is to explain certain aspects of Wikipedia's norms, customs, technicalities, or practices. It may reflect differing levels of consensus and vetting.

-show classes are a set of CSS classes that make content visible only to members of certain user groups.^[1] For instance, if you are autoconfirmed, these words are greenthese words are green; while if you are not, these words arethese words are. The -show classes are named in the format [group name]-show, where the group name is the technical name used by the software.^[2] They are initially defined in MediaWiki:Common.css, where they are set to visibility hidden. Then, in the relevant group CSS page, the class's visibility is unhidden.

There exist also two "negative-rights" inverse -show classes, which reverse the above technique to make content visible only to people without these rights.

Like all CSS classes, the -show classes' display can be customized, including to make visible content that would normally be invisible to you. See § Easily generate a custom -show class style sheet for how to do this in under a minute.

Considerations

Unlike most things on MediaWiki, if something is available to members of one group, it is also available to groups which have the same permissions as that group. That is not the case with -show classes. Setting the class extendedconfirmed-show and nothing else, for instance, will make content that extendedconfirmed users can see but admins (who have the extendedconfirmed permission through the sysop rights bundle, but are not members of the extendedconfirmed group) cannot. This means that administrators cannot read this line that says non-admins are cooler. Meaning admins can't read the hidden message right here.

One current edge-case is that confirmed users do not see anything inside an autoconfirmed-show.

Note that while -show classes may have some applications for security through obscurity, the content within them is still sent to all users' devices, and can be viewed by others in a number of manners, as seen below.

Modifying -show class behavior

Knowing which content on your page is in a -show class

It may be useful to know which content on your page is not visible to all users. To do so, you can add something like the following to your common.css—supposing for the purposes of this example that you are an extendedconfirmed new page reviewer:

.extendedconfirmed-show,
.patroller-show {
	background: lightgray !important;
}

Change classes and CSS details as desired (or see § Template to customize -show class visibility and appearance).

Seeing content in other groups' -show classes

This one's a bit more complicated, as you have to account for four different visibility settings. Supposing you want to see checkuser-show and sysop-show content:

div.checkuser-show, p.checkuser-show,
div.sysop-show, p.sysop-show {
	display: block !important;
}

span.checkuser-show, small.checkuser-show,
span.sysop-show, small.sysop-show {
	display: inline !important;
}

table.checkuser-show,
table.sysop-show {
	display: table !important;
}

li.checkuser-show,
li.sysop-show {
	display: list-item !important;
}

You can combine this with the above, for instance by adding

.checkuser-show,
.sysop-show {
	border: 3px orange solid !important;
}

It is recommended to change a different CSS attribute than used in the above section's highlighter, so you can see if content is both visible to you and to some class you've made visible through this approach.

Easily generate a custom -show class style sheet

This includes five features:

Group 0: Makes visible and highlights content for "negative-right" classes anonymous-show and unconfirmed-show. Defaults to using blue border.
Group 1: Highlights content for "entry-level" classes user-show, autoconfirmed-show, and for non-admins extendedconfirmed-show. Defaults to using light gray background.
Group 2: Highlights content for all other groups you are in. Defaults to using khaki background.
Group 3: Makes visible and highlights content for groups you are not in, and that are not redundant with groups you are in. Defaults to using orange border.
Anomaly highlighter: Highlights anomalous class combinations like an extendedconfirmed-show that is not paired with a sysop-show.

To set this up:

Copy the following template
Go either to your common.css or to a standalone page like Special:MyPage/-show classes.css.
Paste the template there
Put "yes" for all user groups you're in according to the line right below your name in Special:Preferences.
Optionally, use the config settings to opt out of any of the five features offered, or to customize styling.
Click "Publish changes". Ignore the warning about error.
Consult /testcases to see if everything is to your liking.
If you used a standalone page rather than your common.css, add @import url('//en.wikipedia.org/w/index.php?action=raw&title=User:{{subst:REVISIONUSER}}/-show_classes.css&ctype=text/css'); to the top of your common.css (ignoring the error warning and changing "-show classes.css" to the page name you've used, if different).

{{subst:Help:-show classes/generate|

<!-- WHICH USER GROUPS ARE YOU IN?
     NOTE: This is about user *groups*, not individual *permissions*.
     Only the things that show up below your username in [[Special:Preferences]] -->
|autoconfirmed      = yes <!-- confirmed users: put "no". admins: leave as "yes". -->
|extendedconfirmed  = no <!-- admins: leave this and the next 4 as "no" -->
|abusefilter-helper = no <!-- a/k/a edit filter helper -->
|extendedmover      = no <!-- a/k/a page mover -->
|patroller          = no <!-- a/k/a new page reviewer -->
|templateeditor     = no
|abusefilter        = no <!-- a/k/a edit filter manager -->
|sysop              = no
|checkuser          = no

<!-- OPTIONAL CONFIG SETTINGS. Any of these, left blank, will default to the pre-filled value. -->
|group0 = yes <!-- Do you wish to see elements meant for anonymous and (assuming you are autoconfirmed) unconfirmed users? -->
|group1 = yes <!-- Do you wish to highlight elements visible only to registered users, and to autoconfirmed extendedconfirmed users assuming you have those rights? -->
|group2 = yes <!-- Do you wish to highlight elements visible only to groups you are in? -->
|group3 = yes <!-- Do you wish to see elements meant for groups you are not in, which are not redundant to groups you are in? -->
|anomaly_highlighter = yes <!-- Do you wish to highlight elements that have anomalous combinations of classes, e.g. they can be seen by extendedconfirmed users but not admins? -->
|attribute0_3 = border <!-- What attribute should be styled for groups 0 and 3? -->
|attribute1_2 = background <!-- What attribute should be styled for groups 1 and 2? -->
|style0 = 3px blue solid <!-- How should Group 0 be styled? (Ignore if group0=no.) -->
|style1 = lightgray <!-- How should Group 1 be styled. (Ignore if group1=no.) -->
|style2 = khaki <!-- How should Group 2 be styled? (Ignore if group2=no.) -->
|style3 = 3px orange solid <!-- How should Group 3 be styled. (Ignore if group3=no.) -->
}}

Examples

An extendedconfirmed new page reviewer and page mover

{{subst:Help:-show classes/generate|

<!-- WHICH USER GROUPS ARE YOU IN?
     NOTE: This is about user *groups*, not individual *permissions*.
     Only the things that show up below your username in [[Special:Preferences]] -->
|autoconfirmed      = yes <!-- confirmed users: put "no". admins: leave as "yes". -->
|extendedconfirmed  = yes <!-- admins: leave this and the next 4 as "no" -->
|abusefilter-helper = no <!-- a/k/a edit filter helper -->
|extendedmover      = yes <!-- a/k/a page mover -->
|patroller          = yes <!-- a/k/a new page reviewer -->
|templateeditor     = no
|abusefilter        = no <!-- a/k/a edit filter manager -->
|sysop              = no
|checkuser          = no

<!-- OPTIONAL CONFIG SETTINGS. Any of these, left blank, will default to the pre-filled value. -->
|group0 = yes <!-- Do you wish to see elements meant for anonymous and (assuming you are autoconfirmed) unconfirmed users? -->
|group1 = yes <!-- Do you wish to highlight elements visible only to registered users, and to autoconfirmed extendedconfirmed users assuming you have those rights? -->
|group2 = yes <!-- Do you wish to highlight elements visible only to groups you are in? -->
|group3 = yes <!-- Do you wish to see elements meant for groups you are not in, which are not redundant to groups you are in? -->
|anomaly_highlighter = yes <!-- Do you wish to highlight elements that have anomalous combinations of classes, e.g. they can be seen by extendedconfirmed users but not admins? -->
|attribute0_3 = border <!-- What attribute should be styled for groups 0 and 3? -->
|attribute1_2 = background <!-- What attribute should be styled for groups 1 and 2? -->
|style0 = 3px blue solid <!-- How should Group 0 be styled? (Ignore if group0=no.) -->
|style1 = lightgray <!-- How should Group 1 be styled. (Ignore if group1=no.) -->
|style2 = khaki <!-- How should Group 2 be styled? (Ignore if group2=no.) -->
|style3 = 3px orange solid <!-- How should Group 3 be styled. (Ignore if group3=no.) -->
}}

Output

/* This set of CSS rules was generated using {subst:Help:-show classes/generate}.
See [[Help:-show classes]] for more information */

/* Group 0. "negative-right" classes: .unconfirmed-show and .anonymous-show */

.anonymous-show,
.unconfirmed-show {
	border: 3px blue solid !important;
}
div.anonymous-show, p.anonymous-show,
div.unconfirmed-show, p.unconfirmed-show {
	display:block !important;
}
span.anonymous-show, small.anonymous-show,
span.unconfirmed-show, small.unconfirmed-show {
	display:inline !important;
}
table.anonymous-show,
table.unconfirmed-show {
	display:table !important;
}
li.anonymous-show,
li.unconfirmed-show {
	display:list-item !important;
}

/* Group 1. "Entry-level" rights: user, autoconfirmed, and (for non-admins) extendedconfirmed. */

.user-show,
.autoconfirmed-show,
.extendedconfirmed-show {
	background: lightgray !important;
}

/* Group 2. Other rights you have. */

.extendedmover-show,
.patroller-show {
	background: khaki !important;
}

/* Group 3. Rights you don't have, which are not redundant with rights you do have. */

.abusefilter-helper-show,
.sysop-show,
.templateeditor-show,
.abusefilter-show,
.checkuser-show {
	border: 3px orange solid !important;
}

div.abusefilter-helper-show, p.abusefilter-show,
div.sysop-show, p.sysop-show,
div.templateeditor-show, p.templateeditor-show,
div.abusefilter-show, p.abusefilter-show,
div.checkuser-show, p.checkuser-show {
	display: block !important;
}

span.abusefilter-helper-show, small.abusefilter-show,
span.sysop-show, small.sysop-show,
span.templateeditor-show, small.templateeditor-show,
span.abusefilter-show, small.abusefilter-show,
span.checkuser-show, small.checkuser-show {
	display: inline !important;
}

table.abusefilter-helper-show,
table.sysop-show,
table.templateeditor-show,
table.abusefilter-show,
table.checkuser-show {
	display: table !important;
}

li.abusefilter-helper-show,
li.sysop-show,
li.templateeditor-show,
li.abusefilter-show,
li.checkuser-show {
	display: list-item !important;
}

/* Anomaly highlighter: Elements with -show for "lesser included" perms but not their
"higher" cousins, e.g. patroller-show without sysop-show or abusefilter-helper-show
without abusefilter-show. */

.abusefilter-helper-show:not(.abusefilter-show),
.abusefilter-helper-show:not(.sysop-show),
.extendedconfirmed-show:not(.sysop-show),
.extendedmover-show:not(.sysop-show),
.patroller-show:not(.sysop-show),
.templateeditor-show:not(.sysop-show) {
	background: red !important;
}
div.abusefilter-helper-show, p.abusefilter-helper-show,
div.extendedconfirmed-show, p.extendedconfirmed-show,
div.extendedmover-show, p.extendedmover-show,
div.patroller-show, p.patroller-show,
div.templateeditor-show, p.templateeditor-show {
	display: block !important;
}
span.abusefilter-helper-show, small.abusefilter-helper-show,
span.extendedconfirmed-show, small.extendedconfirmed-show,
span.extendedmover-show, small.extendedmover-show,
span.patroller-show, small.patroller-show,
span.templateeditor-show, small.templateeditor-show {
	display: inline !important;
}
table.abusefilter-helper-show,
table.extendedconfirmed-show,
table.extendedmover-show,
table.patroller-show,
table.templateeditor-show {
	display: table !important;
}
li.abusefilter-helper-show,
li.extendedconfirmed-show,
li.extendedmover-show,
li.patroller-show,
li.templateeditor-show {
	display: list-item !important;
}

An admin with no other relevant rights, who wishes to disable Group 0 and the anomaly higlighter, and wants Group 1&2 styling to be on the text color, not the border

{{subst:Help:-show classes/generate|

<!-- WHICH USER GROUPS ARE YOU IN?
     NOTE: This is about user *groups*, not individual *permissions*.
     Only the things that show up below your username in [[Special:Preferences]] -->
|autoconfirmed      = yes <!-- confirmed users: put "no". admins: leave as "yes". -->
|extendedconfirmed  = yes <!-- admins: leave this and the next 4 as "no" -->
|abusefilter-helper = no <!-- a/k/a edit filter helper -->
|extendedmover      = yes <!-- a/k/a page mover -->
|patroller          = yes <!-- a/k/a new page reviewer -->
|templateeditor     = no
|abusefilter        = no <!-- a/k/a edit filter manager -->
|sysop              = yes
|checkuser          = no

<!-- OPTIONAL CONFIG SETTINGS. Any of these, left blank, will default to the pre-filled value. -->
|group0 = no <!-- Do you wish to see elements meant for anonymous and (assuming you are autoconfirmed) unconfirmed users? -->
|group1 = yes <!-- Do you wish to highlight elements visible only to registered users, and to autoconfirmed extendedconfirmed users assuming you have those rights? -->
|group2 = yes <!-- Do you wish to highlight elements visible only to groups you are in? -->
|group3 = yes <!-- Do you wish to see elements meant for groups you are not in, which are not redundant to groups you are in? -->
|anomaly_highlighter = no <!-- Do you wish to highlight elements that have anomalous combinations of classes, e.g. they can be seen by extendedconfirmed users but not admins? -->
|attribute0_3 = border <!-- What attribute should be styled for groups 0 and 3? -->
|attribute1_2 = color <!-- What attribute should be styled for groups 1 and 2? -->
|style0 = 3px blue solid <!-- How should Group 0 be styled? (Ignore if group0=no.) -->
|style1 = green <!-- How should Group 1 be styled. (Ignore if group1=no.) -->
|style2 = red <!-- How should Group 2 be styled? (Ignore if group2=no.) -->
|style3 = 3px orange solid <!-- How should Group 3 be styled. (Ignore if group3=no.) -->
}}