Help:Cascading Style Sheets: Difference between revisions

Revision as of 06:48, 31 July 2022

Revision as of 06:50, 31 July 2022

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 <nowiki><div></nowiki> 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.

</div>

</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:

{{-}}

<pre>

{| style="your style here"

|-

|your table stuff

|}

</pre>

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

== MediaWiki existing styles ==

Line 124 ⟶ 139:

* ''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 ==

Line 153 ⟶ 168:

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>

|-