Thema: Saubere Abstände und Linien zwischen Contentblöcken realisieren

An alle Pixelzähler,

zugegeben, nicht jedem kommt es auf die pixelgenaue Postionierung des Contents an und nicht jeden stört der zu kleine Abstand zwischen den Spalten. Was aber wenn doch? Will man zum Beispiel einen einheitlichen linken Rand von 10 Pixeln für alle Elemente innerhalb des Inhaltsbereichs definieren, kommt man fast nicht umhin, sich eine Zeichnung zu machen. In der index.php des Templates: Tabellen mit cellpadding und cellspacing, im Stylesheet: diverse text-indent, margin und padding Einträge, hinzu kommen verschachtelte und unvollständig definierte Tabellen in den Dateien der Komponente com_content.

Die immer wieder gepriesene reine CSS-Löung hat ihren Reiz, lässt sich aber nicht 100% herstellen, wenn Abstandlinien eben nur zwischen den Blöcken und nicht auch am Anfang oder am Ende erscheinen sollen. Außerdem ignoriert der Internet Explorer auf Tabellen angewendete margin-right Anweisungen. Deshalb möchte ich im Folgenden eine Lösung vorstellen, die zunächst alle Abstanddefinitionen eliminiert (das bringt Ruhe ins Chaos) und dann echte vertikale und horizontale Abstandhalter zwischen die Contentblöcke einsetzt.
___________________________________________

1. SCHRITT: ABSTÄNDE ELIMINIEREN:

a) In der Datei "components\com_content\content.html.php" liegen Tabellen, die nicht explizit randlos definiert und obendrein verschachtelt sind. Das verschiebt den Content bereits um ein bzw. zwei Pixel nach innen. Es sind die Tabellen in den Zeilen 454, 475 und 496. In allen drei Fällen muss ein "border="0" cellspacing="0" cellpadding="0"" eingeschoben werden, also:

<table border="0" cellspacing="0" cellpadding="0" class="contentpaneopen...

b) In der Datei "template_css.css" des Templateordners sollten alle Einrückungen (text-indent) und Abstände (margin-x, padding-x) für Inhaltselemente entfernt werden. Dies sind die Klassen componentheading, contentheading, contentpaneopen, aber auch Elemente, wie body, tr, p, div etc.

c) In der Datei index.php des Templateordners kann nun für den Inhaltsbereich eine Tabelle mit einer Spalte und einer Zeile definiert werden. Hier kann man nun per cellpadding einstellen, wie groß der Rand sein soll. Alternativ kann dies auch über eine selbst definierte Class und CSS eingestellt werden.
___________________________________________

2. SCHRITT: ABSTANDSELEMENTE EINBAUEN

Für das Einsetzen der Abstandselemente muss die Datei "components\com_content\content.php" erweitert werden. Als vertikaler Abstand wird hier eine Linie (<hr/>) eingesetzt, die per CSS formatiert wird. Als horizontaler Abstand dient eine Spalte mit definierter Breite. Der Einbau der Abstandselemente ist so organisiert, dass diese nur zwischen Content Items eingesetzt werden. Hier nun der Code. Die Funktion BlogOutput muss ab Zeile 838 (Codeblock "Leading story output" ) folgendermaßen geändert werden:

PHP-Code:

        // Leading story output
        if ( $leading ) {
            echo '<tr>';
            echo '<td valign="top">';
            for ( $z = 0; $z < $leading; $z++ ) {
                if ( $i >= $total ) {
                    // stops loop if total number of items is less than the number set to display as leading
                    break;
                }
                show( $rows[$i], $params, $gid, $access, $pop, $option, $ItemidCount );

                $i++;

                // append a horizontal line if not last leading item  (added by Harry)
                if (( $z < $leading - 1 ) && ( $i < $total )) {
                    echo '<hr/>';
                }    

            }
            echo '</td>';
            echo '</tr>';
        }

        if ( $intro && ( $i < $total ) ) {
        
            // append a horizontal line if there have been one ore more leading items (added by Harry)
            if (( $leading > 0 ) && ( $i > 0 )) {
                echo '<tr><td><hr/></td></tr>';
            }    

            echo '<tr>';
            echo '<td valign="top">';
            echo '<table width="100%" border="0" cellpadding="0" cellspacing="0">';
            // intro story output
            for ( $z = 0; $z < $intro; $z++ ) {
                if ( $i >= $total ) {
                    // stops loop if total number of items is less than the number set to display as intro + leading
                    break;
                }

                if ( !( $z % $columns ) || $columns == 1 ) {
                    echo '<tr>';
                }

                echo '<td valign="top" '. $width .'>';

                // insert a horizontal line if not in first row (added by Harry)
                if ( $z > $columns - 1 ) {
                    echo '<hr/>';
                }

                // outputs either intro or only a link
                if ( $z < $intro ) {
                    show( $rows[$i], $params, $gid, $access, $pop, $option, $ItemidCount );
                } else {
                    echo '</td>';
                    echo '</tr>';
                    break;
                }

                echo '</td>';

                if ( !( ( $z + 1 ) % $columns ) || $columns == 1 ) {
                    echo '</tr>';
                }

                $i++;
                // insert a vertical distance column (added by Harry)
                echo '<td width="8"><img src="images/M_images/shim.gif" width="10" height="1" /></td>'; 
            }

            // this is required to output a final closing </tr> tag when the number of items does not fully
            // fill the last row of output - a blank column is left
            if ( $intro % $columns )  {
                echo '</tr>';
            }

            echo '</table>';
            echo '</td>';
            echo '</tr>';
        }

        // Links output
        if ( $links && ( $i < $total )  ) {
            echo '<tr>';
            echo '<td valign="top">';

            // append a horizontal line if there have been one ore more items before (added by Harry)
            if ( $i > 0 ) {
                echo '<hr/>';
            }    

            echo '<div class="blog_more'. $params->get( 'pageclass_sfx' ) .'">';
            HTML_content::showLinks( $rows, $links, $total, $i, 1, $ItemidCount );
            echo '</div>';
            echo '</td>';
            echo '</tr>';
        } 


Die Stellen, die überarbeitet wurden, sind markiert. Die Breite der vertikalen Spalte (vertical distance column) wird hier per "width=" eingestellt. Außerdem wird eine transparente Ein-Pixel-Grafik geladen und gestreckt (der Pfad muss hier individuell angepasst werden). Alternativ kann auch eine eigene Klasse definiert werden und im Stylesheet eine Hintergrundgrafik eingestellt werden, wenn z.B. eine vertikale Linie dargestellt werden soll.
___________________________________________

3. SCHRITT: DATEI TEMPLATE_CSS.CSS ERGÄNZEN

Für die horizontale Linie habe ich Folgendes eingetragen (Achtung: eine 1-Pixel Linie sieht im IE sch* aus):

hr {
background :none;
border :none;
border-top : 2px dotted #CCCCCC;
margin-top: 10px;
margin-bottom: 10px;
}
___________________________________________

FAZIT: Alle wichtigen Abstände können nun durch Ändern eines einzigen Wertes eingestellt werden.
- Abstand des Inhalts vom äußeren Rahmen: im Template oder besser per CSS
- horizontaler Abstand der Items: in Datei "content.php" per "width=" (ca. Zeile 906)
- vertikaler Abstand per CSS unter "hr {...}"

Die Lösung ist noch optimierbar, klar. Für mich funktioniert sie aber schon mal und vielleicht ist sie für die ein oder anderen von Euch ebenfalls nützlich.

gruß
colibri

Hallo newby2000,

freut mich, dass Du mit der Lösung etwas anfangen konntest.

Eine Seite, auf der man sehen kann, wie das Ergebnis aussieht, kann man nun unter http://www.blockhome.info erreichen (derzeit gibt es nur auf der Frontpage Spalten). Damit man nicht mühsam die einzelnen Code Fragmente einbauen muss, habe ich die beiden geänderten Dateien angehängt (Ordner: "components/content").

Meine Lösung ist natürlich ein Core-Hack, darauf will ich ausdrücklich hinweisen. Mir wäre ein Mambot wie mb_Append (http://mbaas.de/content/view/204/57/) auch viel lieber, wenn sich damit ausschließlich Zwischenlinien herstellen ließen (eine Zwischenlinie hinter dem letzten Artikel sieht nicht toll aus, vor allem nicht in den schmaleren Modulen). Die waagerechten Linien sehen außerdem besser aus, wenn sie eine gemeinsame horizontale Linie über die Spalten bilden anstatt spaltenweise ein Eigenleben zu führen. Wichtig war mir schließlich auch der Spaltenabstand - der spielt ja in der aktuellen Joomla Version eine eher untergeordnete Rolle.

gruß
colibri