WebDesigner: individueller Skin für WikiMedia Wiki

Ben · 26.05.2006, 03:27

Hallo,
wer gerade nichts zu tun hat, der darf mir mal zeigen, was für ein toller Hecht er doch ist.

Ich habe diesen Quellcode hier:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Hauptseite" />
<link rel="shortcut icon" href="/favicon.ico" />
		<title>Hauptseite - Developer's Guide</title>
		<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "/WikiMedia/skins/simple/main.css?7"; /*]]>*/</style>
		<link rel="stylesheet" type="text/css" media="print" href="/WikiMedia/skins/common/commonPrint.css" />

		<!--[if lt IE 5.5000]><style type="text/css">@import "/WikiMedia/skins/simple/IE50Fixes.css";</style><![endif]-->
		<!--[if IE 5.5000]><style type="text/css">@import "/WikiMedia/skins/simple/IE55Fixes.css";</style><![endif]-->
		<!--[if IE 6]><style type="text/css">@import "/WikiMedia/skins/simple/IE60Fixes.css";</style><![endif]-->
		<!--[if IE 7]><style type="text/css">@import "/WikiMedia/skins/simple/IE70Fixes.css?1";</style><![endif]-->
		<!--[if lt IE 7]><script type="text/javascript" src="/WikiMedia/skins/common/IEFixes.js"></script>
		<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
		<script type="text/javascript">var skin = 'simple';var stylepath = '/WikiMedia/skins';</script>
		<script type="text/javascript" src="/WikiMedia/skins/common/wikibits.js"><!-- wikibits js --></script>
		<script type="text/javascript" src="/WikiMedia/index.php?title=-&amp;action=raw&amp;smaxage=0&amp;gen=js"><!-- site js --></script>

		<style type="text/css">/*<![CDATA[*/
@import "/WikiMedia/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css&smaxage=18000";
@import "/WikiMedia/index.php?title=MediaWiki:Simple.css&action=raw&ctype=text/css&smaxage=18000";
@import "/WikiMedia/index.php?title=-&action=raw&gen=css&maxage=18000";
/*]]>*/</style>
		<!-- Head Scripts -->
			</head>
<body  class="ns-0 ltr">
	<div id="globalWrapper">
		<div id="column-content">
	<div id="content">
		<a name="top" id="top"></a>
				<h1 class="firstHeading">Hauptseite</h1>

		<div id="bodyContent">
			<h3 id="siteSub">From Developer's Guide</h3>
			<div id="contentSub"></div>
									<div id="jump-to-nav">Jump to: <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>			<!-- start content -->
			<p>Die Wiki Software wurde erfolgreich installiert.
</p><p>Siehe die <a href="http://meta.wikipedia.org/wiki/MediaWiki_i18n" class='external text' title="http://meta.wikipedia.org/wiki/MediaWiki_i18n" rel="nofollow">Dokumentation zur Anpassung der Benutzeroberfläche</a>

und das <a href="http://meta.wikipedia.org/wiki/MediaWiki_User%27s_Guide" class='external text' title="http://meta.wikipedia.org/wiki/MediaWiki_User%27s_Guide" rel="nofollow">Benutzerhandbuch</a> für Hilfe zur Benutzung und Konfiguration.
</p>
<!-- Saved in parser cache with key wiki:pcache:idhash:1-0!1!0!0!!de!2 and timestamp 20060526010928 -->
<div class="printfooter">
Von "<a href="http://localhost/WikiMedia/index.php/Hauptseite">http://localhost/WikiMedia/index.php/Hauptseite</a>"</div>
						<!-- end content -->
			<div class="visualClear"></div>
		</div>

	</div>
		</div>
		<div id="column-one">
	<div id="p-cactions" class="portlet">
		<h5>Views</h5>
		<ul>
				 <li id="ca-nstab-main" class="selected"><a href="/WikiMedia/index.php/Hauptseite">Artikel</a></li>
				 <li id="ca-talk" class="new"><a href="/WikiMedia/index.php?title=Diskussion:Hauptseite&amp;action=edit">Diskussion</a></li>

				 <li id="ca-edit"><a href="/WikiMedia/index.php?title=Hauptseite&amp;action=edit">bearbeiten</a></li>
				 <li id="ca-history"><a href="/WikiMedia/index.php?title=Hauptseite&amp;action=history">Versionen</a></li>
				 <li id="ca-protect"><a href="/WikiMedia/index.php?title=Hauptseite&amp;action=protect">schützen</a></li>
				 <li id="ca-delete"><a href="/WikiMedia/index.php?title=Hauptseite&amp;action=delete">löschen</a></li>
				 <li id="ca-move"><a href="/WikiMedia/index.php/Spezial:Movepage/Hauptseite">verschieben</a></li>
				 <li id="ca-watch"><a href="/WikiMedia/index.php?title=Hauptseite&amp;action=watch">beobachten</a></li>

		</ul>
	</div>
	<div class="portlet" id="p-personal">
		<h5>Persönliche Werkzeuge</h5>
		<div class="pBody">
			<ul>
				<li id="pt-userpage"><a href="/WikiMedia/index.php/Benutzer:TechAdmin" class="new">TechAdmin</a></li>
				<li id="pt-mytalk"><a href="/WikiMedia/index.php/Benutzer_Diskussion:TechAdmin" class="new">Meine Diskussion</a></li>

				<li id="pt-preferences"><a href="/WikiMedia/index.php/Spezial:preferences">Einstellungen</a></li>
				<li id="pt-watchlist"><a href="/WikiMedia/index.php/Spezial:Watchlist">Beobachtungsliste</a></li>
				<li id="pt-mycontris"><a href="/WikiMedia/index.php/Spezial:Contributions/TechAdmin">Meine Beiträge</a></li>
				<li id="pt-logout"><a href="/WikiMedia/index.php?title=Spezial:Userlogout&amp;returnto=Hauptseite">Abmelden</a></li>
			</ul>
		</div>
	</div>

	<div class="portlet" id="p-logo">
		<a style="background-image: url(/WikiMedia/skins/common/images/wiki.png);" href="/WikiMedia/index.php/Hauptseite" title="Hauptseite"></a>
	</div>
	<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
		<div class='portlet' id='p-Hauptnavigation'>
		<h5>Hauptnavigation</h5>
		<div class='pBody'>
			<ul>

				<li id="n-Startseite"><a href="/WikiMedia/index.php/Hauptseite">Startseite</a></li>
				<li id="n-Nachrichten"><a href="/WikiMedia/index.php/Developer%27s_News">Nachrichten</a></li>
				<li id="n-Tutorials"><a href="/WikiMedia/index.php/Kategorie:Tutorials">Tutorials</a></li>
				<li id="n-Kategorie:Literatur"><a href="/WikiMedia/index.php/Literatur">Kategorie:Literatur</a></li>
				<li id="n-Forum"><a href="http://forum.developers-guide.net">Forum</a></li>
			</ul>

		</div>
	</div>
		<div class='portlet' id='p-Informationen'>
		<h5>Informationen</h5>
		<div class='pBody'>
			<ul>
				<li id="n-Über-dieses-Projekt"><a href="/WikiMedia/index.php/Developer%27s_Guide">Über dieses Projekt</a></li>
				<li id="n-Qualitätssicherung"><a href="/WikiMedia/index.php/Tutorial-Team">Qualitätssicherung</a></li>

				<li id="n-Impressum"><a href="/WikiMedia/index.php/Impressum">Impressum</a></li>
				<li id="n-Datenschutz"><a href="/WikiMedia/index.php/Datenschutz">Datenschutz</a></li>
			</ul>
		</div>
	</div>
		<div id="p-search" class="portlet">
		<h5><label for="searchInput">Suche</label></h5>

		<div id="searchBody" class="pBody">
			<form action="/WikiMedia/index.php/Spezial:Search" id="searchform"><div>
				<input id="searchInput" name="search" type="text" accesskey="f" value="" />
				<input type='submit' name="go" class="searchButton" id="searchGoButton"	value="Los" />&nbsp;
				<input type='submit' name="fulltext" class="searchButton" value="Suche" />
			</div></form>
		</div>
	</div>
	<div class="portlet" id="p-tb">

		<h5>Werkzeuge</h5>
		<div class="pBody">
			<ul>
				<li id="t-whatlinkshere"><a href="/WikiMedia/index.php/Spezial:Whatlinkshere/Hauptseite">Was zeigt hierhin</a></li>
				<li id="t-recentchangeslinked"><a href="/WikiMedia/index.php/Spezial:Recentchangeslinked/Hauptseite">Verlinkte Seiten</a></li>
<li id="t-specialpages"><a href="/WikiMedia/index.php/Spezial:Specialpages">Spezialseiten</a></li>
				<li id="t-print"><a href="/WikiMedia/index.php?title=Hauptseite&amp;useskin=simple&amp:printable=yes">Druckversion</a></li>				<li id="t-permalink"><a href="/WikiMedia/index.php?title=Hauptseite&amp;oldid=1">Permanentlink</a></li>			</ul>

		</div>
	</div>
		</div><!-- end of the left (by default at least) column -->
			<div class="visualClear"></div>
			<div id="footer">
				<div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/WikiMedia/skins/common/images/poweredby_mediawiki_88x31.png" alt="MediaWiki" /></a></div>
			<ul id="f-list">
				<li id="lastmod"> Diese Seite wurde zuletzt geändert um 14:41, 16. Mai 2006.</li>

				<li id="viewcount">Diese Seite wurde bisher 11 mal abgerufen.</li>
				<li id="privacy"><a href="/WikiMedia/index.php/Developer%27s_Guide:Datenschutz" title="Developer's Guide:Datenschutz">Datenschutz</a></li>
				<li id="about"><a href="/WikiMedia/index.php/Developer%27s_Guide:%C3%9Cber_Developer%27s_Guide" title="Developer's Guide:Über Developer's Guide">Über Developer's Guide</a></li>
				<li id="disclaimer"><a href="/WikiMedia/index.php/Developer%27s_Guide:Lizenzbestimmungen" title="Developer's Guide:Lizenzbestimmungen">Lizenzbestimmungen</a></li>
			</ul>
		</div>
	<script type="text/javascript"> if (window.runOnloadHook) runOnloadHook();</script>

</div>
<!-- Served by localhost in 0.31 secs. -->
</body></html>

Und diese .css-Datei

Code:

#toolbar {
  display: none;
}

div.center {
  text-align: center;
}

#contentSub {
  padding-left: 2em;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#column-content {
  width: 100%;
  float: right;
  margin: 0 0 0.6em -12.2em;
  padding:0;
}

#content {
    margin: 0em 0 0 12.2em;
    padding: 0em 1em 1.5em 1em;
    border-left: 1px solid #959595;
    line-height: 1.5em;
}

#column-one {
  position: absolute;
  top: 0px; left: 0px;
}

#footer {
	display: none;
}

body {
    margin: 0;
    padding: 0;
}

#globalWrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.visualClear { clear: both; }

img {
    border: none;
}
p {
    margin: 0.4em 0em 0.5em 0em;
    line-height: 1.5em;
}
p img { margin: 0; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
}
fieldset {
    margin: 1em 0em 1em 0em;
    padding: 0em 1em 1em 1em;
}
.usermessage {
    background-color: #ffce7b;
    border: 1px solid #ffa500;
    color: Black;
    font-weight: bold;
    margin: 2em 0em 1em 0em;
    padding: 0.5em 1em;
    vertical-align: middle;
}
.error {
    color: red;
    font-size: larger;
}

table.rimage {
    float:right;
    position:relative;
    margin-left:1em;
    margin-bottom:1em;
    text-align:center;
}

div.townBox {
    position:relative;
    float:right;
    margin-left:1em;
    padding:0.3em;
    width: 200px;
    overflow: hidden;
    clear: right;
}
div.townBox dl {
    padding: 0;
    margin: 0 0 0.3em 0;
}
div.townBox dl dt {
    background: none;
    margin: 0.4em 0 0 0;
}
div.townBox dl dd {
    margin: 0.1em 0 0 1.1em;
}
.portlet {
    border: none;
    float: none;
    padding: 0;
    width: 11.8em;
    overflow: hidden;
}
.portlet h4 {
    font-weight: normal;
    white-space: nowrap;
}
.portlet h5 {
  padding: 0em 1em 0em 0.5em;
  display: inline;
  height: 1em;
  font-weight: normal;
  white-space: nowrap;
}
.portlet h6 {
    padding: 0em 1em 0em 1em;
    display: block;
    height: 1.2em;
    font-weight: normal;
    white-space: nowrap;
}
.pBody {
    border-collapse: collapse;
    padding: 0 0.8em 0.3em 0.5em;
}
.portlet h1,
.portlet h2,
.portlet h3,
.portlet h4 {
  margin: 0;
  padding: 0;
  font-size: small;
}

#p-search .pBody {
    text-align: center;
}

#searchInput {
  width: 100%;
  clear: both;
  margin: 0 0 0 0;
}

input.searchButton {
    margin-top:1px;
    padding: 0 0.4em;
    cursor: pointer;
}

#p-search .pBody {
    padding: 0.5em 0.4em 0.4em 0.4em;
}

textarea {
  width: 100%;
}

#p-personal li, #p-personal ul,
#p-tb li, #p-tb ul,
#p-navigation li, #p-navigation ul,
#p-cactions li, #p-cactions ul,
#p-newlinks li, #p-newlinks ul {
  padding-left: 0em;
  margin-left: 0.5em;
}

#p-cactions li, #p-cactions ul {
  margin-left: 0.7em;
}

pre {
  margin: 2em;
  border: solid 1px black;
}

h1.firstHeading, h2 {
  border-bottom: solid 1px black;
}
#bodyContent a[href ^="http://"],
#bodyContent a[href ^="gopher://"] {
    background: url("external.png") center right no-repeat;
    padding-right: 13px;
}
#bodyContent a[href ^="https://"],
.link-https {
    background: url("lock_icon.gif") center right no-repeat;
    padding-right: 16px;
}
#bodyContent a[href ^="mailto:"],
.link-mailto {
    background: url("mail_icon.gif") center right no-repeat;
    padding-right: 18px;
}
#bodyContent a[href ^="news://"] {
    background: url("news_icon.png") center right no-repeat;
    padding-right: 18px;
}
#bodyContent a[href ^="ftp://"],
.link-ftp {
    background: url("file_icon.gif") center right no-repeat;
    padding-right: 18px;
}
#bodyContent a[href ^="irc://"],
.link-irc {
    background: url("discussionitem_icon.gif")  center right no-repeat;
    padding-right: 18px;
}

#bodyContent a.extiw,
#bodyContent a.extiw:active {
  color: #5E7CFF;
  background: none;
  padding: 0;
}

td.diff-addedline {
    background-color: #B9FFB0;
}

td.diff-deletedline {
    background-color: #f8ffaa;
}

span.diffchange { background-color: #FFCDF3; }
.autocomment { color:  grey; }
#pagehistory span.user {
    margin-left: 1.4em;
    margin-right: 0.4em;
}
#pagehistory span.minor { font-weight: bold; }
#pagehistory li.selected {
    background-color:#f9f9f9;
    border:1px dashed #aaaaaa;
}
span.urlexpansion {
  display: none;
}

div.tocindent {
  margin-left: 2em;
}
#toc {
  text-align: left;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

div.floatright, table.floatright {
    clear: right;
    float: right;
    margin: 0;
    position: relative;
    border-width: 0.5em 0 0.8em 1.4em;
}
div.floatright p { font-style: italic; }
div.floatleft, table.floatleft {
    float: left;
    margin: 0.3em 0.5em 0.5em 0;
    position: relative;
    border-width: 0.5em 1.4em 0.8em 0;
}
div.floatleft p { font-style: italic; }
/* thumbnails */
div.thumb {
    margin-bottom: 0.5em;
    width: auto;
}
div.thumb div {
    padding: 3px !important;
    text-align: center;
    overflow: hidden;
}

div.thumb div div.thumbcaption {
    border: none;
    text-align: left;
    line-height: 1.4;
    padding: 0.3em 0 0.1em 0;
}
div.magnify {
    float: right;
    border: none !important;
    background: none !important;
}
div.magnify a, div.magnify img {
    display: block;
    border: none !important;
    background: none !important;
}
div.tright {
    clear: right;
    float: right;
    border-width: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    float: left;
    margin-right:0.5em;
    border-width: 0.5em 1.4em 0.8em 0;
}

a.stub { color: #772233; }
a.new,
#p-personal a.new {
	text-decoration: line-through;
}
li.new {
	text-decoration: line-through;
}
p.catlinks {
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
}

#mytabs {
  background-color: inherit;
}
#p-cactions {
  background-color: inherit;
}
div.printfooter {
  display: none;
}


#ca-addsection a:before {
  content: "Add section";
  font-size: 10pt;
}

#ca-addsection a {
  font-size: 0px;
}

#n-portal,
#n-currentevents,
#n-help,
#n-sitesupport {
  display: none;
}

span.searchmatch {
  font-weight: bold;
}

#preftoc {
    float: left;
    margin: 1em;
    width: 13em;
}
#preftoc li {
}
#preftoc li.selected {
    border: 1px dashed #aaa;
}
#preftoc a,
#preftoc a:active {
    display: block;
}
#prefcontrol {
    clear: both;
    float: left;
    margin-top: 1em;
}
div.prefsectiontip {
    font-size: 95%;
    margin-top: 1em;
}

#mw_trackbacks {
	border-style: groove;
	padding: 0.2em;
}

#jump-to-nav {
  display: none;
}

table.collapsed tr.collapsable {
	display: none;
}

Kurzum:
Wer Lust und Zeit hat, kann daraus ja mal ein nettes Layout basteln.

Es geht aber auch anders.
Es handelt sich dabei um den "Simple Skin" von WikiMedia.

Ihr könnt auch gerne den Quelltext des Wikis so verändern, dass sich auch der HTML-Code ändert.

Ich für meinen Teil habe einfach nicht hinbekommen, wie ich das erreichen kann und auch auf dieser Seite hier nicht wirklich etwas dazu finden können.

Wer also Lust hat .. kann sich auch gerne bei mir melden oder halt hier im Thread.

Es geht letztlich um ein Layout für das Portal.

hab ich da zu viel gesagt.

Es gibt keine Entlohnung. Wem das nicht passt, der hält einfach die Klappe. Danke!

Grüße, Ben.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken