WiWöPedia:Eselsohr Kids: Unterschied zwischen den Versionen

Aus WiWöPedia
Wechseln zu: Navigation, Suche
(Drupal)
(Drupal)
Zeile 198: Zeile 198:
  
 
===Drupal===
 
===Drupal===
Einfach [http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/pagepeel-drupal Zip-Datei] in "modules"-Verzeichnis von Drupal entpacken und in der grafischen Administrationsansicht das Modul aktivieren. Fertig!
+
Einfach [http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/pagepeel-drupal.zip Zip-Datei] in "modules"-Verzeichnis von Drupal entpacken und in der grafischen Administrationsansicht das Modul aktivieren. Fertig!
 
Derzeit ist es mit Drupal Version 5.x getestet.
 
Derzeit ist es mit Drupal Version 5.x getestet.
 
HTML anpassungen können in der pagepeel.module datei vorgenommen werden und css in der pagepeel.css.
 
HTML anpassungen können in der pagepeel.module datei vorgenommen werden und css in der pagepeel.css.

Version vom 6. April 2008, 14:26 Uhr

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

Allgemeine Einbauanleitung

Folgenden HTML-Code in den <head>-Bereich einbauen:

<!-- AKVS head start v1.5 -->
<style type="text/css">
<!--
div#akct {
	position: absolute; top:0px; right: 0px; z-index: 2342; width:113px; height:88px;
	background-image: url(http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/wiwoe_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: 113px;
        height: 88px;
}

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:500px;
	display: block;
	background-image: url(http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/wiwoe_kids.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

div#akct a#akpreload {
	background-image: url(http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/wiwoe_kids.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 in den <body>-Bereich einbauen:

<!-- AKVS body start v1.5 -->
<div id="akct"><a id="akpeel" href="http://www.ppoe.at/kids/wiwo/" target="_blank" title="WiWö-Kinderhomepage - klick vorbei!"><img src="http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/wiwoe.gif" alt="WiWö-Kinderhomepage - klick vorbei!" /></a>
<a id="akpreload" href="http://www.ppoe.at/leiter/wiwo/wiki/index.php/WiWöPedia:Eselsohr_Kids" target="_blank" title="Du willst die Kinderhomepage auch bewerben? Hier eine Einbauanleitung..."><img src="http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/info.gif" alt="Du willst die Kinderhomepage auch bewerben? Hier eine Einbauanleitung..." /></a></div>
<!-- AKVS body end -->

Bereitgestellt von Bundes-WiWö-Team, ursprünglich entwickelt von dirk/dataloo.


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:

	background-image: url(http://www.ppoe.at/kids/wiwo/kinderhomepage/eselsohr/wiwoe_klein_ohne.gif);

Einbau in Wordpress

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-Plugin

Im Spannungsraum gibt's ein selbstgebasteltes Wordpress-Plugin für diese Sache.

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

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

Woltlab Burning Board 2.3.x

Das ACP öffnen, Templates bearbeiten, Template headinclude auswählen, den Teil für head-Bereich hinter $css einfügen, speichern. Erneut Templates bearbeiten, Template header auswählen, den Teil für body-Bereich ganz oben einfügen, speichern. (getestet mit 2.3.6)

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:90px }. Damit verschiebst du diesen um 90px 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
    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.

FudForum 2.x

  • Die Datei /var/FudForum2/thm/default/template/header.tmpl (in der Standardinstallation) in einem Editor öffnen (oder im Admin-Bereich unter Template-Editor die Datei header.tmpl->header editieren).
    1. Das Head-Schipsel vor dem </head> einfügen und das Body-Stück nach dem <body>
    2. Das ganze für jedes verwendete Template machen.
    3. Unter Theme-Manager oben auf Rebuild all Themes klicken.

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

Einfach Zip-Datei in "modules"-Verzeichnis von Drupal entpacken und in der grafischen Administrationsansicht das Modul aktivieren. Fertig! Derzeit ist es mit Drupal Version 5.x getestet. HTML anpassungen können in der pagepeel.module datei vorgenommen werden und css in der pagepeel.css.

Browser-Kompatibilität

Bisher (von den deutschen Kollegen) getestet unter:

  • Firefox, Version:2.0.* (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 (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)

Anmerkungen zur Lizenz

Das Modul basiert auf einer Aktion aus Deutschland und steht unter CC-BY-SA.