CSS examples

tbd @

Background

It is possible to define CSS directly in wiki pages. Depending on what page it is, the CSS will then be loaded for some group of users.

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

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

Actually in use are the following pages:

• MediaWiki:Common.css
• MediaWiki:Group-user.css
• MediaWiki:Timeless.css
• And the pages linked from Spezial:Helferlein

Basics

Concerning selection of colors, please do remember Congenital red–green color blindness and choose appropriately distinct colors. Hilfe:Farbtabelle could help, or some Web services.

Manual

Manual:CSS

Help

wiki.selfhtml.org

Selection of elements

by id: "#element"

by class: ".element"

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

MediaWiki:Common.css

/* automatic link to [[Special:SpecialPages]] removed, because manually added in MediaWiki:Sidebar */
#t-specialpages {
	display: none;
}

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 Benutzer:Schnark/js/bkl-check#Alternativen), but JavaScript could be deactivated by the user, so we at Wiki Aventurica prefer this solution.

used in

MediaWiki:Group-user.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;
	}
}

expand image with mouse hover

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

used in

MediaWiki:Gadget-ImageExpand.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);
}

change link colors

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

used in

MediaWiki:Common.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;
}