Einbauanleitung

Aus Unibrennt Wiki (Archiv)
Zur Navigation springen Zur Suche springen

Zurück zur Übersichtsseite

Bitte Eintrag auf der Liste der teilnehmenden Blogs und Websites nicht vergessen!

Das Eselsohr lässt sich in alle Seiten deiner Website einbinden. Es ist (so gut wie) mit allen Browsern kompatibel.

Hinweise

Nach dem Einbauen bitte nicht vergessen, deine Webseite in die Liste "Teilnehmende Websites" einzutragen!

Die Quelldateien der Grafiken im Photoshop-Format können hier downgeloaded und verändert werden. Falls jemand Vorschläge für einen besseren Text oder Grafiken hat, nur her damit!

Allgemeine Einbauanleitung

Deutsche Version

Folgenden HTML-Code vor dem </head>-Tag einbauen: 

<!-- AKVS head start v1.5 -->
<style type="text/css">
<!--
div#akct {
	position: absolute; top:0px; right: 0px; z-index: 2342; width:187px; height:84px;
	background-image: url(http://unibrennt.at/resources/img/Unsereuni-klein.gif);
	background-repeat: no-repeat;
	background-position: right top;
	border:none;
	padding:0;
	margin:0;
	text-align: right;
}

div#akct img {
	border:none;
	padding:0;
	margin:0;
	background: none;
}

div#akct a#akpeel img {
        width: 187px;
        height: 84px;
}

div#akct a, div#akct a:hover {
	text-decoration: none;
	border:none;
	padding:0;
	margin:0;
	display: block;
	background: none;
}

div#akct a#akpeel:hover {
	position: absolute; top:0px; right: 0px; z-index: 4223; width:500px; height:435px;
	display: block;
	background-image: url(http://unibrennt.at/resources/img/Unsereuni-gross.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
div#akct a#akpreload {
	background-image: url(http://unibrennt.at/resources/img/Unsereuni-gross.gif);
	background-repeat: no-repeat;
	background-position: 234px 0px;
}
-->
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#akct a#akpeel:hover {
		right: -1px;
}
</style>
<![endif]>
<![endif]-->
<!-- AKVS head end -->

Folgenden HTML-Code vor dem </body>-Tag einbauen: 

<!-- AKVS body start v1.5 -->
<div id="akct"><a id="akpeel" href="http://www.unsereuni.at" target="_blank" title="#unsereuni-Onlinedemo - Zeig dich solidarisch unter http://www.unsereuni.at"><img src="http://unibrennt.at/resources/img/Unsereuni-blank.gif" width="20" height="20" alt="blank" /></a>
<a id="akpreload" href="https://unibrennt.jvales.net/wiki/Online-Demo" target="_blank" title="Willst du auch an der Online-Demo teilnehmen? Hier findest du alle relevanten Infos und Materialien: https://unibrennt.jvales.net/wiki/Online-Demo"><img src="http://unibrennt.at/resources/img/Unsereuni-info.gif" width="20" height="12" alt="info" /></a></div>
<!-- AKVS body end -->

Animation?

Wer statt des animierten Eselsohrs lieber ein nicht-animiertes verwendet, der tausche die ganz am Anfang des Codes die Zeile mit dem "Background-Image" gegen diese Zeile aus: 

div#akct {
	position: absolute; top:0px; right: 0px; z-index: 2342; width:187px; height:84px;
	background-image: url(http://unibrennt.at/resources/img/Unsereuni-fix.gif);

Bereitgestellt von Robert, basierend auf der Online-Demo gegen Überwachung von Helge und ursprünglich entwickelt von dirk/dataloo.

English Version

Add the following code before the </head>-Tag: 

<!-- AKVS head start v1.5 -->
<style type="text/css">
<!--
div#akct {
	position: absolute; top:0px; right: 0px; z-index: 2342; width:187px; height:84px;
	background-image: url(http://unibrennt.at/resources/img/Unsereuni-klein.gif);
	background-repeat: no-repeat;
	background-position: right top;
	border:none;
	padding:0;
	margin:0;
	text-align: right;
}

div#akct img {
	border:none;
	padding:0;
	margin:0;
	background: none;
}

div#akct a#akpeel img {
        width: 187px;
        height: 84px;
}

div#akct a, div#akct a:hover {
	text-decoration: none;
	border:none;
	padding:0;
	margin:0;
	display: block;
	background: none;
}

div#akct a#akpeel:hover {
	position: absolute; top:0px; right: 0px; z-index: 4223; width:500px; height:435px;
	display: block;
	background-image: url(http://unsereuni.at/resources/img/unsereuni_gross_en.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
div#akct a#akpreload {
	background-image: url(http://unsereuni.at/resources/img/unsereuni_gross_en.gif);
	background-repeat: no-repeat;
	background-position: 234px 0px;
}
-->
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#akct a#akpeel:hover {
		right: -1px;
}
</style>
<![endif]>
<![endif]-->
<!-- AKVS head end -->

Add the following code before the </body>-Tag: 

<!-- AKVS body start v1.5 -->
<div id="akct"><a id="akpeel" href="http://www.unsereuni.at" target="_blank" title="#unsereuni-Onlinedemo - declare your solidarity: http://www.unsereuni.at"><img src="http://unibrennt.at/resources/img/Unsereuni-blank.gif" width="20" height="20" alt="blank" /></a>
<a id="akpreload" href="https://unibrennt.jvales.net/wiki/Online-Demo" target="_blank" title="Do you want to join this online-demo with your website? Then please visit https://unibrennt.jvales.net/wiki/Online-Demo for further information!"><img src="http://unibrennt.at/resources/img/Unsereuni-info.gif" width="20" height="12" alt="info" /></a></div>
<!-- AKVS body end -->

Animation?

You want a static small image instead of the moving one? Then please replace the beginning of the code above with the following: 

div#akct {
	position: absolute; top:0px; right: 0px; z-index: 2342; width:187px; height:84px;
	background-image: url(http://unibrennt.at/resources/img/Unsereuni-fix.gif);

Einbau in Wordpress

Wordpress-Plugin

automatisch

Das Plugins kann direkt über die Administrationsoberfläche von Wordpress installiert werden. Dazu auf Plugins / Installieren klicken, nach "unsereuni" suchen und danach auf "Jetzt Installieren" klicken. Plugin-Adresse: http://wordpress.org/extend/plugins/unsereuni-online-demo-austria

manuell

  1. das Wordpress-Plugin hier downloaden (rechte Maustaste / Ziel speichern unter)
  2. die Dateiendung von txt in php ändern
  3. auf den Webserver ins Wordpress-Plugin-Verzeichnis kopieren (/wp-content/plugins)
  4. als Administrator in Wordpress einloggen und Plugins verwalten aufrufen
  5. Plugin "Unsereuni Online Demo Austria" aktivieren

fertig Hinweis: die Einstellungsmöglichkeit "Sonderhinweis anzeigen" unter Plugins / "Unsereuni Online Demo Austria" hat keine Auswirkung in dieser Version des Plugins.

Wordpress auf englisch

Mit Admin-Rechten einloggen. Unter "Presentation" und "Theme Editor" in die Datei "header.php" den ersten Teil kurz vor </head> und den zweiten Teil in "footer.php" kurz vor </body> kopieren. Siehe die allgemeine Anleitung (oben).

Wer das Plugin "WP-Cache" nutzt, sollte den Cache leeren (Options > WP-Cache), um die Änderung sehen zu können.

Wordpress auf deutsch

Mit Admin-Rechten einloggen. Unter "Themes" und "Theme Editor" in den Seitenkopf ("header.php") den ersten Teil kurz vor </head> und den zweiten Teil in den Fußteil ("footer.php") kurz vor </body> kopieren. Siehe die allgemeine Anleitung (oben).

Wer das Plugin "WP-Cache" nutzt, sollte den Cache leeren (Einstellungen > WP-Cache), um die Änderung sehen zu können.

Wordpress und Mobile Themes

Wird das Theme WP-Touch für mobile Geräte verwendet, bitte unter Einstellungen / WP-Touch die Option "Enable WPtouch exclusive mode" aktivieren, dann wird das Eselsohr auf der mobilen Version der Seite nicht angezeigt und man kann sich z.B. über das iPhone weiterhin einloggen.

Einbau in andere Blog-Systeme

Twoday.net-blogs

Layout anpassen --> Skins (HTML)--> Den <head>-code in die "Hauptseite" einsetzen, den <body>-code unter "Beitragsanzeige". Speichern, fertig.

Serendipity

  • Für den Header-Code das Ereignis-Plugin "HTML-Code für den head-Bereich (HTML-Kopf Klotz)" aktivieren und dort den Code eintragen.
  • Für den Body-Code das Ereignis-Plugin "HTML Nugget on page" aktivieren, dort die Option "Top of the content" aktivieren und den Code in die Textbox kopieren. Am Ende des Plugins die Textformatierung ausschalten, speichern, fertig.

b2evolution

Im Verzeichnis skins/Name_des_verwendeten_Skins den Code in die Datei _main.php einfügen. So erscheint das Eselsohr auf allen Seiten.

Blogger.com

  • Verwaltungsseite des Blogs aufrufen -> Vorlage
  • In der Textbox nach <head> und <body> suchen und den entsprechenden Code darunter einfügen

Blogger.de

  • Layouts -> skins -> Site Layout -> Main page
  • In der Textbox nach <head> und <body> suchen und den entsprechenden Code darunter einfügen

Thingamablog

Einfach die angegebenen Codeschnippsel in den/die beschriebenen <head>- und <body>-Bereich/e des/der Templates mittels Copy 'n' Paste einfügen. (Je nachdem, auf welchen Unterseiten es zusätzlich erscheinen soll.)

Blog.de und Verwandte

  • Im Blog Design Wizard die CSS-Informationen in den eigenen CSS kopieren. In der 2. Zeile top:0px durch top:30px ersetzen, damit die blog.de-Toolbar nutzbar bleibt.
  • unter Module -> FreeHTML I oder FreeHTML II den html-Code reinkopieren.
  • Falls noch nicht geschehen das FreeHTML-Modul zur Seitenleiste hinzufügen

Einbau in diverse CMS, Diskussionsforen und Wikis

Weiß jemand, wie es auf jimdo eingebaut werden kann?


Joomla

Die Datei /templates/TEMPLATENAME/index.php mit einem Texteditor bearbeiten. Siehe die allgemeine Anleitung (oben).

TYPO3

  • In den Setup-Bereich des Template-Datensatzes, wenn das zentrale PAGE-Objekt den Namen "page" hat...
  • ...für den head-Bereich:
    page.headerData.10 = TEXT
    page.headerData.10.value (
      HEAD-CODE
    )
  • ...für den body-Bereich:
    page.5 = TEXT
    page.5.value (
      BODY-CODE
    )

Website Baker

Wenn nicht vorhanden das Modul Template Edit installieren, über OPTIONEN - Erweiterte Optionen anzeigen, unten am Ende dieser Seite dieses Modul aufrufen und die index.php des verwendeten Templates öffnen. Dort unmittelbar über </head> und über </body> den entsprechenden Code einbauen und speichern.


Gallery2, xt:Commerce, b1gMail, und alle anderen auf der Template-Engine Smarty basierenden

vBulletin

Das Administrator Kontrollzentrum öffnen, Styles verwalten, Style auswählen, Templates ändern, Forumhome, den entsprechenden Code direkt über dem </head>-Tag und unter dem <body>-Tag einfügen, Speichern.

Falls ihr TMS installiert hab könnt ihr einfach folgendes Add-On importieren: http://www.ragtek.org/ragtek_antibanner_1-0.zip

PHP-Nuke

  • Eine Datei anlegen mit dem Namen "custom_head.php" anlegen und den HTML-Code für den Head-Bereich hineinkopieren und abspeichern. Auf den FTP-Server deiner Seite in dem Verzeichnis "includes/custom_files" ablegen.
  • In der Datei header.php aus dem Wurzelverzeichnis, die function "head()" suchen und folgende Zeilen vor der Zeile [ echo "\n\n\n</head>\n\n"; ] einfügen wenn sie nicht schon vorhanden sind!
  • Einzufügener Code : [ if (file_exists("includes/custom_files/custom_head.php")) { include_once("includes/custom_files/custom_head.php"); } ]
  • Danach in die "theme.php" im Verzeichnis "themes/(dein Thema)" die Zeile für den Body-Bereich direkt hinter dem "<body bgcolor=\..." (so um die Zeile 120-130) einfügen

MediaWiki

Quick&Dirty, für die standard-Skin (MonoBook):

  1. öffne die Datei skins/MonoBook.php:
  2. finde die Zeile, die </head> enthält. Unmittelbar vor dieser Zeile, füge den Head-Schnipsel ein.
  3. finde die Zeile, die </body> enthält. Unmittelbar vor dieser Zeile, füge den Body-Schnipsel ein.
  4. Um ein Verdecken des Anmelden-Links zu verhindern öffne den Artikel MediaWiki:Monobook.css und füge folgende Zeile hinzu: #p-personal ul { margin-right:200px }. Damit verschiebst du diesen um 200px nach links. (Alternativ kannst du diese Änderung auch in der Datei skins/MonoBook/main.css durchführen.)

Für andere Monobook-basierten Skins (wohl den meisten) sollte das analog funktionieren. Für "old style" Skins wie CologneBlue wird es hässlich.

artmedic CMS

Quick&Dirty:

  1. Lade die Datei index.php (mit FTP/SecureCopy) herunter und bearbeite sie mit einem Texteditor:
  2. finde die Zeile, die </head> enthält. Unmittelbar vor dieser Zeile, füge den Head-Schnipsel ein.
  3. finde die Zeile, die <body> enthält. Unmittelbar nach dieser Zeile, füge den Body-Schnipsel ein.
  4. Lade die Datei index.php wieder auf den Server.

phpBB

  • Zu editieren ist das Template overall_header.tpl:
  • Getestet mit Version 2-2.0.22, Version 3 sollte auch funktionieren
    1. Es befindet sich unterhalb des Ordners templates, in dem Ordner, der den verwendeten Skin enthält, also beispielsweise phpBB/templates/subSilver (default)
    2. overall_header.tpl vom Server herunterladen und mit einem Texteditor öffnen
    3. Head-Schnipsel vor der Zeile, die </head> enthält, einfügen.
    4. Nach der Zeile, die mit <body anfängt, Body-Schnipsel einfügen.
    5. Lade die Datei wieder auf den Server hoch.

Dofus est un [url=http://www.bawwgt.com/fr]dofus kamas[/url], le joueur incarne un ou plusieurs personnages. On y retrouve une multitude [url=http://www.bawwgt.com/fr]acheter des dofus kamas[/url] et d'¨¦quipements en tout genre, une vingtaine de m¨¦tiers diff¨¦rents et plus d'une centaine de monstres r¨¦partis en diff¨¦rentes zones sur les 10 000 [url=http://www.bawwgt.com/fr]dofus kamas pas cher[/url] (portions de carte, sur lesquelles l'on se d¨¦place d'ailleurs comme sur une carte) formant l'univers de [url=http://www.bawwgt.com/fr]achat dofus kamas[/url], dont 99% ne sont accessibles qu'aux abonn¨¦s.

MoinMoin Wiki

Zumindest zum (Default-)"Modern"-Theme inkompatibel, da das Eselsohr die Knöpfe zur Titel- und Volltextsuche überlagert. Da man das Eselsohr nicht ausblenden kann, ist dadurch die Suchfunktion nicht mehr einfach benutzbar.

Drupal

Version 5.x --> Datei:Akv pagepeels-5.x-1.2.zip
Version 6.x --> Datei:Akv pagepeels-6.x-1.2.zip

Einfach ZIP-Datei in "modules"-Verzeichnis von Drupal entpacken und in der grafischen Administrationsansicht das Modul aktivieren. Fertig! HTML anpassungen können in der pagepeel.module datei vorgenommen werden und css in der pagepeel.css.

Posterous

  • Login mit eigenem User
  • Klick auf Settings
  • Look and Feel / Button "Theme and customize my site" auswählen
  • Advanced auswählen
  • den ersten Teil des Codes in die Zeile vor </head> reinkopieren
  • den zweiten Teil des Codes eine Zeile vor </body> reinkopieren
  • auf "Save, I´m done" rechts unten klicken
  • fertig

Zikula

Oben genannten Code einfügen in /themes/DEINTHEME/templates/master.htm

Browser-Kompatibilität

Achtung - Liste ist veraltet!; von den deutschen Kollegen - wiki.vorratsdatenspeicherung.de - wurden folgende Browser getestet:

  • Firefox, Version:3.1.* (Windows 32bit, FreeBSD, MacOSX Intel C2D, OS/2, eComStation)
  • Epiphany 2.14.3+; FLOCK 0.7.8; Opera 9.20; Iceweasel 2.0.0.3 (Debian GNU/Linux 4.0)
  • IE, Version 6,7,8 (Windows, auch 64bit Version von Browser und OS)
  • Konqueror, Versionen:
    • 3.5.2 (Kubuntu 6.06 LTS) :hover funktioniert nicht
    • 3.5.5 (Debian GNU/Linux 4.0)
    • 3.5.6 (Kubuntu 7.04)
    • 3.5.7 (Debian GNU/Linux Lenny/testing) (Fedora 7 - Moonshine)
  • Opera, Version 9.1 (Windows, Linux), Version: 9.2 (Windows, FreeBSD, Linux)
  • Seamonkey, Version: 1.1.1 (FreeBSD)
  • Firefox 2.0.0.3 (W2K, aktuell gepatched)
  • Firefox 2.0.0.3 (Intel Mac OS X)
  • Safari 2.0.4 (Mac OS X (Intel und PPC)) (Darstellung nicht ganz korrekt - oranger Balken unten - aber nicht tragisch)
  • Safari 3.0.2 (Windows XP)
  • Safari 3.0.3 (Mac OS X (Intel))
  • Firefox/BonEcho 2.0.0.3 (NetBSD/amd64 3.1)
  • Firefox 2.0.0.3 (Linux/Ubuntu 6.10, Linux/Gentoo-2006.1 x86_64)
  • Firefox 2.0.0.4 (Linux/Ubuntu 7.04) / (SuSE Linux 10.2)
  • Mozilla 1.7 (SunOS/sparc Solaris 10)
  • IE NetRenderer (Windows)
    • IE 7
    • IE 6
    • IE 5.5
    • funktioniert nicht unter IE 5.0 (der Link funktioniert nicht)
  • Camino 1.5 (Mac OS X 10.4.10, Intel C2D)
  • Firefox 2.0.0.6 (Windows XP SP2)
  • Firefox 2.0.0.7 (MacOSX Intel 10.4.10 als auch 10.5.0 - kleiner Darstellungsfehler (blinkender oranger (jetzt ein grauer) Balken unter dem bild zu sehen)
Abgerufen von „https://unibrennt.jvales.net/index.php?title=Einbauanleitung&oldid=398“