View source for Help:-show classes

{{information page}}
'''-show classes''' are a set of [[CSS]] classes that make content visible only to members of certain [[WP:user groups|user groups]].<ref>As well as anyone with custom CSS disabled or anyone who has modified their own CSS as described later in this document.</ref> For instance, if you are [[WP:autoconfirmed|autoconfirmed]], <span class="autoconfirmed-show">{{green|these words are green}}</span><span class="unconfirmed-show">these words are green</span>; while if you are not, <span class="unconfirmed-show">{{green|these words are}}</span><span class="autoconfirmed-show">these words are</span>. The -show classes are named in the format <code>[group name]-show</code>, where the group name is the technical name used by the software.<ref>Each group's technical name is mentioned in prose at [[Wikipedia:User access levels]]. You can also go to [[Special:Statistics]] and click {{int:listgrouprights-members}}, and then see what group shows up in the URL.</ref> They are initially defined in [[MediaWiki:Common.css]], where they are set to visibility <code>hidden</code>. Then, in the relevant [[mw:Manual:User group CSS and JavaScript|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 {{slink||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 <code>extendedconfirmed-show</code> and nothing else, for instance, will make content that [[WP:extendedconfirmed|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. <span class="extendedconfirmed-show">This means that administrators cannot read this line that says non-admins are cooler.</span> <span class="sysop-show">Meaning admins can't read the hidden message right here.</span>

One current edge-case is that [[WP:confirmed|confirmed]] users do not see anything inside an <code>autoconfirmed-show</code>.

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 [[Special:MyPage/common.css|your common.css]]—supposing for the purposes of this example that you are an extendedconfirmed new page reviewer: <syntaxhighlight lang="css">
.extendedconfirmed-show,
.patroller-show {
	background: lightgray !important;
}
</syntaxhighlight>
Change classes and CSS details as desired (or see {{slink||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 <code>checkuser-show</code> and <code>sysop-show</code> content:
<syntaxhighlight lang="css">
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;
}
</syntaxhighlight>
You can combine this with the above, for instance by adding
<syntaxhighlight lang="css">
.checkuser-show,
.sysop-show {
	border: 3px orange solid !important;
}
</syntaxhighlight>
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 <code>anonymous-show</code> and <code>unconfirmed-show</code>. Defaults to using blue border.
# Group 1: Highlights content for "entry-level" classes <code>user-show</code>, <code>autoconfirmed-show</code>, and for non-admins <code>extendedconfirmed-show</code>. 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 <code>extendedconfirmed-show</code> that is not paired with a <code>sysop-show</code>.

To set this up:
# Copy the following template
# Go either to [[Special:MyPage/common.css|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 "{{int:publishchanges}}". 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 <syntaxhighlight inline lang="css">@import url('//en.wikipedia.org/w/index.php?action=raw&title=User:{{subst:REVISIONUSER}}/-show_classes.css&ctype=text/css');</syntaxhighlight> 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).
<syntaxhighlight lang="wikitext">
{{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.) -->
}}
</syntaxhighlight>

==== Examples ====
{{cot|An extendedconfirmed new page reviewer and page mover}}
<syntaxhighlight lang="wikitext">
{{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.) -->
}}
</syntaxhighlight>
{{cot|Output}}
<syntaxhighlight lang="css">
/* 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;
}
</syntaxhighlight>
{{cob}}
{{cob}}
{{cot|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}}
<syntaxhighlight lang="wikitext">
{{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.) -->
}}
</syntaxhighlight>
{{cot|Output}}
<syntaxhighlight lang="css">
/* 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 */

/* Not enabled */

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

.user-show,
.autoconfirmed-show,
.extendedconfirmed-show {
	color: green !important;
}

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

.extendedmover-show,
.patroller-show,
.sysop-show {
	color: red !important;
}

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

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

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

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

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

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. */


</syntaxhighlight>
{{cob}}
{{cob}}

== See also ==
* [[mw:Manual:User group CSS and JavaScript]]

== References ==
{{reflist}}