Help:Cascading Style Sheets: Difference between revisions

Revision as of 06:48, 31 July 2022

Latest revision as of 02:46, 29 August 2025

(32 intermediate revisions by 22 users not shown)

Line 56:

===Usage===

An HTML element may be just taken from the wikitext (see [[Help:HTML in wikitext|HTML in wikitext]]), e.g., span, or the result of translating wikitext, e.g., the <code><nowiki>'''...'''</nowiki></code> code is changed into <nowiki><{{tag|b></nowiki>}}, or part of the code for the skin.

A class may be produced by the software, e.g., ns-''namespace number'' for the HTML-element "body", and extiw for an interwiki link in the page body, or taken from the wikitext.

Line 71:

== CSS in wikitext ==

You can use CSS styling in HTML elements in your code pin(see [[Help:HTML in wikitext]] for a list of elements supported by MediaWiki) like you would in normal element with a greenHTML bordermarkup.

Here comes a short paragraph that

contained in a element that is

floated to

Here comes a short paragraph that

contained in a element that is

floated to the right.

For example, a {{tag|div}} element with a green border and its contents floated to the right would be created with

<syntaxhighlight lang="html">

<div style="float:right; border:thin solid green;">

Here comes a short paragraph that is<br />

contained in a "div" element that is<br />

floated to the right.

</prediv>

</syntaxhighlight>

<div style="float:right; border:thin solid green;">

Here comes a short paragraph that is<br />

contained in a "div" element that is<br />

floated to the right.

</div>

which would produce the box to the right.

Some wikitext elements allow you to insert CSS styling directly into them. An example is the table syntax:

{{-}}

<syntaxhighlight lang="wikitext">

{| style="your style here"

|-

|your table stuff

|}

</syntaxhighlight>

{{Further2|[[Help:Tables]]}}

== MediaWiki existing styles ==

Line 98 ⟶ 113:

One extreme "style" for a text is not displaying it, with

<syntaxhighlight lang="css">

.''classname'' {display: none}

#.''idclassname'' {display: none}

.#''classnameid'' {display: none}

</syntaxhighlight>

etc.

Line 107 ⟶ 124:

It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.

To view hidden text, download the Web Developer Toolbar for Firefox [https://addons.mozilla.org/en-US/firefox/addon/60 here], then choose Misc. ->&rarr; show hidden elements in that toolbar. It will make all hidden elements appear.

=== Non-print ===

One can exclude content from being printed (if the browser supports CSS) by declaring the content to be of the "noprint" class:

<syntaxhighlight lang="html">

<pre>

<div class="someclass noprint">This will not appear in the print version.</div>

</syntaxhighlight>

</pre>

== Major style blocks ==

Line 124 ⟶ 141:

* ''bodyContent'' – the main page content within the content box

The portlet class is the style used by all the div blocks around the main content. Identified blocks using that class:

*''p-cactions'' – id for the list of page-related tabs above the main content (page, talk, edit, etc.), top.

*''p-personal'' – id for the list of user-related links above the main content (username, talk, etc.), top.

*''p-logo'' – id for the block that contains the logo, top left.

*''p-navigation'tthat' – id for the block that contains the navigation links on the left of the page

*''p-search'' – the block that contains the search buttons

*''p-tb'' – the block that contains the toolbox links

*''p-lang'' – the block that contains interlanguage links

The footer at the bottom of the page includes blocks with the following ids

*''footer'' – overall footer container block

*''f-poweredbyico'' – the powered by MediaWiki image that normally resides to the right of the page

*''f-list'' – id for the list that contains all the bits of text at the bottom of the page

== Style depending on a parameter or variable ==

=== Variable class or id ===

A class or id can depend on the result produced by a template or on a template parameter, e.g. <syntaxhighlight lang="wikitext" inline>class="abc<nowiki>{{{1|def}}}"</nowikisyntaxhighlight>". For one or more of the possible class names the style of that class can be defined. If the class is undefined it is ignored, so the standard style is used.

In the simplest case we have e.g. <syntaxhighlight lang="wikitext" inline>class="abc<nowiki>{{{1}}}"</nowikisyntaxhighlight>" and define class abcdef. If the parameter value is "def" it applies.

If a page for general use only makes sense when styles are defined for certain classes, then these have to be specified in the page [[MediaWiki:Common.css]], which applies for all users and all skins, as far as not overridden.

Line 150 ⟶ 167:

Wikitext that reads

<nowikisyntaxhighlight lang="html"><span style="display:{{{3|none}}}">Wed</span></nowikisyntaxhighlight>

will display "Wed" if parameter 3 is defined, but its value is not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than "none", that style is applied.

==Wiki headings==

Wiki headings use the following default CSS:

<section begin="HTML_section" />

{| class="wikitable"

|-

! Wikimarkup !! [[HTML]] !! Style

|-

| {{nowrap|1=<code>= Heading =</code>}} || {{tag|h1|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;

</syntaxhighlight>

|-

| {{nowrap|1=<code>== Heading ==</code>}} || {{tag|h2|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;

</syntaxhighlight>

|-

| {{nowrap|1=<code>=== Heading ===</code>}} || {{tag|h3|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.2em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

| {{nowrap|1=<code>==== Heading ====</code>}} || {{tag|h4|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

| {{nowrap|1=<code>===== Heading =====</code>}} || {{tag|h5|o}} ||

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-

| {{nowrap|1=<code>====== Heading ======</code>}} || {{tag|h6|o}} ||

| {top: 0.5em; padding-bottom: 0;

<syntaxhighlight lang="css">

color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

</syntaxhighlight>

|-