Der Joomla-Content-Editor, allgemein als JCE bekannt, wird von vielen Benutzern als die Referenz für Joomla! gesehen. Auch ich setze den JCE fast ausschließlich auf allen Seiten ein, die ich erstelle und betreue.

Mit dem Update des Editor-Plugins auf die Version 1.5.5 (aktuell ist 1.5.6) wurde wieder an vielen Schräubchen gedreht und manche liebgewonnene Eigenschaft des JCE ist plötzlich verschwunden.

Wenn man mit Bildern im Text arbeitet, weiß man zu schätzen, dass der JCE erlaubt, eingefügte Bilder per Drag&Drop zu verschieben. Durch einen Klick auf ein Bild und ein anschließendes Verschieben des Cursors lassen sich die Bilder von einem Ende des Textes zum anderen Ende verschieben - sehr komfortabel!

Seit Version 1.5.5 war diese bequeme Funktion offenbar verschwunden - doch das ist zum Glück nicht so. Die Funktion ist lediglich per Standard nicht eingerichtet. Folgender Worakround aktiviert die Funktion wieder:

JCE-Administration -> Configuration -> Erweitert -> Eigene Variablen - dort eintragen:

paste_block_drop:0 

...und schon lassen sich die Bilder im Editor wieder "bewegen"!

Nachdem ich auf der Suche nach einer Lösung für den Einsatz von Joomla! 1.5.X & MenuMatic  letztendlich beides zur Zusammenarbeit bewegen konnte, möchte ich anhand eines kleinen Tutorials davon berichten.

Aber fangen wir von vorn an:
Die schicke Menü DropDown-Animation von MenuMatic stach mir schnell ins Auge und so suchte ich nach Möglichkeiten, die Mootools-Klasse für Joomla! 1.5.X tauglich zu bekommen.

MenuMatic von greengeckodesign (Jason J. Jaeger) ist eine auf  SuckerFish und Mootools basierende JavaScript-Applikation. Das heißt, man muss

1. a) mit verschachtelten Listen das Menü erstellen und
2. b) die Mootools-Bibliothek in der richtigen Version einbinden.

a) realisiert man am besten mit dem Media 65 Joomla Menu Module (Registrierung für Download notwendig). Im Gegensatz zum "herkömmlichen" mod_mainmenu hat man noch weitere Möglichkeiten, IDs und Klassen für CSS zu definieren (siehe Screenshot):

<ul class="menu" id="ptm-nav">
  <li class="current"><a href="#"><span>Startseite</span></a>
  <ul>
    <li><a href="#"><span>Joomla!-Lizenz</span></a></li>
    <li><a href="#"><span>Mehr über Joomla!</span></a>
    <ul>
      <li><a href="#"><span>FAQ</span></a></li>
    </ul>
    </li>
  </ul>
  </li>
  <li>[...]</li>
</ul>

So sollte die Struktur aussehen, wenn die "klassische" Suckerfish-Syntax (Suckerfish- Dropdowns by D. Griffiths and D. Webb )angewendet wird.

b) ist etwas tricky, da Joomla! - derzeit  in Version 1.5.10 - Mootools in der Version 1.11 verwendet und MenuMatic die Version 1.2 verlangt.

Nun sollte man nicht einfach die vorhandene Bibliothek [joomla-root]/media/system/js/mootools.js ersetzen, sondern dern Core möglichst in Ruhe lassen, damit 1. die Funktion und 2. die Updatefähigkeit des Systems erhalten bleibt. Abgesehen davon wird an verschiedenen Stellen berichtet, dass ein Adhoc-Upgrade auf Mootools 1.2 Probleme mit dem Backend-Menü verursacht.

Aus diesen Gründen lassen wir die originale Mootools-Bibliothek von Joomla! in Ruhe und beschränken uns ausschließlich auf die Integration in das Template. Auf der Grundlage dieser Anleitung gehen wir die Sache an:

• Mootools-Dateien in das Template-Verzeichnis hochladen. (Quelle support.pillwax.com/open-source/doku.php?id=joomla:general:mootools - "3. When using Mootools 1.2")
• Wir brauchen dazu nicht nur die Mootols-Core-Dateien, sondern auch die Kompatibilitätsklassen:

1. [joomla-root]/templates/[mein-template]/js/mootools-1.2.1-core.js
2. [joomla-root]/templates/[mein-template]/js/mootools-1.2-more.js
3. [joomla-root]/templates/[mein-template]/js/mootools-compact-core.js
4. [joomla-root]/templates/[mein-template]/js/mootools-compact-more.js
5. [joomla-root]/templates/[mein-template]/js/mootools-compact-custom.js

• Da aber mit dem Befehl <jdoc:include type="head" /> im Template (index.php) u.a. die Joomla-eigene Mootools-Bibliothek eingebunden wird, muss dieser Aufruf unschädlich gemacht werden. Dazu benötigen wir einige PHP-Aufrufe:

zuerst "head" ganz nurmal einbinden:

        <jdoc:include type="head" />

danach die Einbindung von mootools.js verhindern:

<?php
/* --- This removes any default Scripts from the Header Buffer --- */
$header = $this->getHeadData();  // Get the current HEAD buffer
$header['scripts'] = array();    // Clear all current 'scripts' entries
$this->setHeadData($header);     // Update the HEAD buffer
/* --- We add the MooTools Framework manually, see below --- */
?>

zuletzt die eigenen Klassen für Mootools 1.2.1 "manuell" einbinden:

<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵
<?php echo $this->template ?>/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵
<?php echo $this->template ?>/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵
<?php echo $this->template ?>/js/mootools-compact-core.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵
<?php echo $this->template ?>/js/mootools-compact-more.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵
<?php echo $this->template ?>/js/mootools-compact-custom.js"></script>

Damit haben wir die Grundlagen für MenuMatic abgeschlossen.

Zuguterletzt muss MenuMatic selbst eingebunden anhand einer Instanz der Klasse zum Arbeiten bewegt werden:

<!-- Load the MenuMatic Class -->
<script language="JavaScript" type="text/javascript" src="/↵
<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>↵
/js/MenuMatic_0.68.2.js"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
</body>
</html> 

Im Beispiel wird mit Absicht die Version MenuMatic_0.68.2.js verwendet.
Mit der aktuellen Version MenuMatic_0.68.3.js ließ sich das Script leider nicht zur Mitarbeit überreden.

Ich hoffe, die Anleitung hilft dem ein- oder anderen weiter. Über Resonanz freue ich mich.

Jeder, dessen CSS-Definitionen nicht nur mit aktuellen Browsern (Firefox > 1.0.x und IExplorer 7) korrekt ausgegeben werden sollen steht irgendwann einmal vor dem Dilemma des Border-Box-Modells.

Genauer gesagt: er steht vor dem Problem, dass IExplorer 5.x und 6.0  das Border-Box-Modell mit Innen-/Außenabständen, Breite und Rand in Eigeninterpretation betrachten (Box Model Bug).

Solange vor allem der IExplorer 6 (laut Zugriffs-Statistik sämtlicher (Kunden-)Webseiten) nach wie vor die Nase vorn hat und CSS3 noch nicht in greifbare Nähe rückt, muß man als Web-Developer sich diesem Problem wohl oder übel stellen.

Aus diesem Grund ist bei jeder Template-Frickelei das geliebte Border-Box-Modell Grund für diverse Nervenzusammenbrüche...

Einige Grundregeln für ein identisches Aussehen eines Templates in allen Browsern habe ich heute von Marcus erfahren:

1. Nutze, wenn möglich, für Boxen (DIV & Co.) nie feste Breiten kombiniert mit Abständen (padding /margin).
2. Zum Zentrieren niemals fixe Abstands-Definitionen nehmen, das erfordert meistens Hacks für den IExplorer:
   margin 0 auto; /* funktioniert nur in neueren Browsern */text-align: center; /* für alle anderen */

Vor allem mit (1.) lassen sich marginale Probleme umgehen.

BTW, die "CSS-Spickzettel" (CSS cheat sheets) von lesliefranke.com oder www.ilovejackdaniels.com helfen auch - bei grundlegenden Problemen ;-)

To be continued... 

Im Rahmen der Web Content Accessibility Guidelines, die vom W3C-Konsortium für Web-Designer herausgegeben werden, um die Zugänglichkeit zu Internetangeboten zu fördern, findet sich auch die Forderung nach Kennzeichnung von Links. Ein kleines Icon () hilft bei der Unterscheidung von internen und externen Links oder Downloads.

Eine Möglichkeit, dies mit Hilfe von JavaScript zu realisieren, beschreibt Ask the CSS Guy. Besser noch ist jedoch die Variante per CSS: Wie das funktioniert zeigen Martin Terber und userstyles.org.