View source for CSS examples

==Background==
It is possible to define [[med:CSS|CSS]] directly in wiki pages. Depending on what page it is, the CSS will then be loaded for some group of users.

If [[med:Extension:Gadgets|Extension:Gadgets]] is installed, these examples can also be made into a gadget, to be loaded only if a user enables it.

[[wde:Hilfe:CSS|Hilfe:CSS]] lists all the possible pages where JavaScript can be defined in Wiki Aventurica.

Actually in use are the following pages:
*[[wde:MediaWiki:Common.css|MediaWiki:Common.css]]
*[[wde:MediaWiki:Group-user.css|MediaWiki:Group-user.css]]
*[[wde:MediaWiki:Timeless.css|MediaWiki:Timeless.css]]
*And the pages linked from [[wde:Spezial:Helferlein|Spezial:Helferlein]]

==Basics==

Concerning selection of colors, please do remember [[wpen:Congenital red–green color blindness|Congenital red–green color blindness]] and choose appropriately distinct colors. [[wpde:Hilfe:Farbtabelle|Hilfe:Farbtabelle]] could help, or some [[Web services for server admins#Web colors|Web services]].

;Manual:[[med:Manual:CSS|Manual:CSS]]
;Help:[https://wiki.selfhtml.org/wiki/CSS wiki.selfhtml.org]
;Selection of elements:
:by id: <code><nowiki>"#element"</nowiki></code>
:by class: <code><nowiki>".element"</nowiki></code>
;Validator:[https://jigsaw.w3.org/css-validator/ jigsaw.w3.org]

==Examples==

===remove part of the UI===

Using selectors, it is possible to remove parts of the UI. In this example, the automatic link to [[Special:SpecialPages]] is removed, because it is added manually in [[MediaWiki:Sidebar]].

;used in:[[wde:MediaWiki:Common.css|MediaWiki:Common.css]]

<syntaxhighlight lang="css">
/* automatic link to [[Special:SpecialPages]] removed, because manually added in MediaWiki:Sidebar */
#t-specialpages {
	display: none;
}
</syntaxhighlight>

===mark links to disambiguation pages===

Links to disambiguation pages should be marked, so editors can fix them quickly. It is possible to use JavaScript for this (see  [[wpde:Benutzer:Schnark/js/bkl-check#Alternativen|Benutzer:Schnark/js/bkl-check#Alternativen]]), but JavaScript could be deactivated by the user, so we at Wiki Aventurica prefer this solution.

;used in:[[wde:MediaWiki:Group-user.css|MediaWiki:Group-user.css]]

<syntaxhighlight lang="css">
/**
 * mark disambiguation links
 * 
 * @source https://de.wikipedia.org/wiki/Benutzer:Schnark/js/bkl-check#Alternativen
 * @version 29.09.2015
 * @author [[wpde:Benutzer:Schnark|]] on https://de.wikipedia.org
*/

.mw-disambig {
	background-color: rgba(255, 0, 0, .43);
}
.mw-disambig::after {
	content: "BKL";
	font-size: 70%;
	line-height: 0;
	vertical-align: super;
}
@media print {
	.mw-disambig {
		background-color: transparent;
	}
	.mw-disambig::after {
		content: none;
	}
}
</syntaxhighlight>

===expand image with mouse hover===

This code expands images when hovering with the mouse over it.

;used in:[[wde:MediaWiki:Gadget-ImageExpand.css|MediaWiki:Gadget-ImageExpand.css]]

<syntaxhighlight lang="css">
/**
 * CSS Hover Gallery for Mediawiki
 * 
 * @source https://www.mediawiki.org/wiki/Snippets/Image_Expand_on_Hover
 * @author Unknown
 * current version crafted together by [[med:User:Christharp]] from several CSS sites. For my website: [http://www.yellpedia.com/wiki/Main_Page Yellpedia]
*/

.zoom_img img{
    transition:transform 0.1 ease-in;
}

.zoom_img img:hover{
    transform:scale(1.5);
}
</syntaxhighlight>

===change link colors===

This code will make the distinction between wiki-internal links and external links very obvious.

;used in:[[wde:MediaWiki:Common.css|MediaWiki:Common.css]]

<syntaxhighlight lang="css">
/* -----------------------------------------------------------------
default appearance for links
-------------------------------------------------------------------- */

a:link {
	color:#0000E0;
	text-decoration:none;
}
a:visited {
	color:#0101C6;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
.new {
	color:red ! important;
	text-decoration:none;
}
.new a {
	color:red ! important;
	text-decoration:none;
}
.new:visited {
	color:red ! important;
	text-decoration:none;
}
.new:hover {
	text-decoration:underline;
}
.stub {
	color:#559977 ! important;
}
</syntaxhighlight>