Extension [subcolumns] um Kopf und Fuß Berech im Spaltenbereich erweitern

Hi, ich möchte gerne in die Subcolms integrierte Funktion "gleiche Spaltenhöhe" noch über und unter jeder Spalte einen div Container anlegen der einen Kopf und einen Fuß pro Spalte erzeugt. Dabei geht es darum das ich in den kopf und in den Fuß abgerundete Bereiche als Hintergrundbild einfügen möchte während ich inder Mitte das per CSS mit background-repeat:repeat-y; eine 1px hohe Grafik wiederholen möchte. So das es in der Mitte einheitlich große Bereiche gibt.
Ich hab das erst so versucht das ich Innerhalb der Textbereiche jeweils ein Layout mit Kopf und Fuß Bereich gemacht habe, das ergab aber immer unterschiedliche hohe "div" - Container, je nachdem wie groß der Text halt ist.
Wenn ich mir die Templates dazu angucke weis ich nicht wo ich die veränderrung einbauen soll so das jedem Spaltenset seinen Eigene Klasse zuordnen kann. Kann ich das irgendwie auch so per PHP machen? In etwa so:
Am jeweiligen Anfang eine DIV Container mit der Bezeichnung:

PHP-Code:

---

<div class="<? echo "top".$ClassNameSpalte_alsProzent_spaltenbreite_spaltennummer . "cls";?>></div>
<div class="<? echo "body".$ClassNameSpalte_alsProzent_spaltenbreite_spaltennummer. "cls";?>></div>
<div class="<? echo "bottom".$ClassNameSpalte_alsProzent_spaltenbreite_spaltennummer."cls";?>></div>

---

Ich hoffe mit diesem "Quasi" -PHP code oben ist deutlich gewroden was ich erreichen möchte.
Dazu müsste man natürlich die Menthoden und Ihre Klassen gut Kennen. (das habe ich hier nciht berücksichtigt.
Leider habe ich im Moment nicht so die Zeit mich damit auseinanderzusetzen.
Ich schätze mal ca einen halben bis einen Tag Arbeit wurde das den Programmier schon kosten.
Vielleicht sogar weniger.
Ganz super wäre natürlich wenn man den obigen Vorschlag soga noch dahingehend erweitert das man insgesamt vier Ecken mit einem dazugehörigen Mittelteil zur verfügung hätte.

Ich hoffe einen Spanneden Diskussionsbeitrag geschrieben zu haben:cool:, und freue mich sehr über eure Antworten.

michael p

Hallo tl_mipro_user,
subcolumns bietet ja schon die Möglichkeit gleich hohe Spalten zu erreichen (kann man einfach anklicken).
Für das Design würde ich schauen, das man die schon vorhandenen divs nimmt.
Zumindest 2 Stück hast du ja immer drum herum, da kannst du dann oben und unten als background drann hängen. Das reicht eigentlich auch schon, wenn du den unteren Bereich zum Beispiel sehr hoch machst (die Grafik) und die Grafik im Background bottom positionierst (die Technik ist auch auf zig CSS-Tutorial Seiten genauer beschrieben).

Ansonsten den mittleren Bereich dann an ein div drann hängen was du immer findest oder an 2 (musst du dann mal schauen was als Quellcode raus kommt bei den Content Elementen die du da drinn hast).

Viele Grüße

Zitat:

---

Zitat von MacKP

Für das Design würde ich schauen, das man die schon vorhandenen divs nimmt.
Zumindest 2 Stück hast du ja immer drum herum, da kannst du dann oben und unten als background drann hängen.

---

Das Problem stellt sich wie folgt dar wenn man sich mal den HTML output anschaut, dann erkennt man schnell das die Container die, die gleichhohen Spalten beinhalten die Container

HTML-Code:

---

<!-- Spaltenset Start //-->
<!-- dies ist der Umschließende Container--><div class="ce_colsetStart equalize subcolumns" id="home-start-allcol">
        <!-- first Column //-->
<!-- diesen Div braucht um Abstände vernünftig darzustellen --><div class="c50l first">
<!-- Hier müsste der erste Top Div für die Start Seite drinn sein-->
                <div class="subcl"> <!-- hier drin wird die Hintergrundgrafik geladen per CSS -->
                       
<div class="ce_text block" id="home-col1">
<p>
Ich berate Sie umfassend zu allen Themen im IT-Bereich
... mehr Text im orgnial...
</p>
</div>

                </div>
        </div>
        <!--  second last Column //-->
        <div class="mod_colsetPart c50r second last">
                <div class="subcr">
<div class="ce_text block" id="home-col2">
<p>Dazu gehört natürlich der Datenschutz von außen und innen. Das letztere wird oft vernachlässigt.....viel mehr Text im orgninal...</p>
</div>
                </div>
        </div>
</div>
<!-- Spaltenset End //-->

---

Hier mal die ce_colsetStart.tpl wie ich sie mir dachte: Nur das der PHP Code nicht ausgeführt wird, denn dann würde es gehen.

PHP-Code:

---

<!-- Spaltenset Start //-->
<!-- <?php echo $this->colID ?> Column //--> <!-- Sollte mir zum anzeigen der Inhalte der colId dienen, wird aber nicht interpertiert, Warum? -->
<!-- Folgender Code war von mir gedacht: um weitere Div Container einzusetzten damit über und unter jeder Spalte ein oberer und ein Unter Container erzeugt wird. Dabei soll allerdings die Höhe über alle Spalten gleich sein. (Hacken im BE)  
Folgendes habe ich vor gehabt: //-->
<?php
//<!-- dient zum Auslesen der Classe und um eine neue eindeuteige Variable für die class="..." zu erzeugen die pro Spalte und Spalten-Set eindeutig ist -->
//Wie gesagt der folgende Code ist zwar Syntaktisch Richtig aber er funktioniert nicht!
$o_var=$this->claas;
if (isset($o_var)){
$a_class_content=array();
$a_class_content=explode(" ",$o_var);
$class_name_mix =$a_class_content[0];
if (isset($a_class_content[1])) { $class_name_mix=$a_class_content[0]."-".$a_class_content[1];} 
else {$class_name_mix ="defaultcls";}}
?>
<!-- evtl. wollte ich aus dem String der Erzeugt wird mit $this->class auch nur die Leerzeichen entfernen und dann so einen Classennamen bekommen wie:-->
<div class="<?php echo $this->class; ?> <?php echo $this->scclass; ?>"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <!-- first Column //-->
        <!-- meine eigener Div Container für den Top-Bereich der ERSTEN Spalte --><div class="<?php echo $class_name_mix."-TopStartCol"?>" ><!--  content TopStartCol //--><div>
    <div class="<?php echo $this->column; ?>">
        <div class="<?php echo $this->inside; ?>"<?php if($this->gap['right']): ?> style="padding-right:<?php echo $this->gap['right']; ?>;"<?php endif; ?>>

---

Der Kürze halber verzichte ich hier auf die Weiteren tpl Datei ausschnitte, werde sie aber falls gewünscht gerne hier nachreichen.
Meine Hauptfragen sind diese bezüglich Template Erweiterrungen:
Wie kann ich eigenen PHP -Code in den Templates ausführen?
Muss ich die Klasse zuerst installieren?
und sind diese <!-- ausdruck //--> Anweisungen für einen Parser?
Wo bekomme ich ausführliche Informationen über das Anpassen dieser Templates bzw. dem selbsterstellen von erweiterrugne bzw. dem Anpassen solcher Erweiterungen*?
*Logischer Weise nur wen diese unter einer freien Lizenz stehen.

Also Danke erst mal an MacKP
ich hoffe auch noch andere können weiterhelfen, ein dickes dankeschön an alle die sich die Zeit nehmen und hier zu Antworten...

Micha P (tl_mipro_user)

....war ich zu kompliziert?
Oh man ich weis fasse Dich kurz...
... schön und gut, aber wie soll ich das sonst schreiben?


mfg

tl_mipro_user

Ich versuch mal n bissgen aufzuräumen.

Wenn du eine Variable mit echo ausgibst und es erfolgt keine Ausgabe, dann existiert die Variable nicht.

Wenn du wissen möchtest was das hier ist "<!--- --->" dann kannst du dich hier in HTML einlesen http://de.selfhtml.org/. Soviel vorweg, es ist ein Kommentar.

Um Templates anpassen zu können brauchst du einen Editor (geht notfalls auch im BE). Z.B. PSpad, HTML und PHP-Kenntnisse.

PHP kriegst du z.B. hier http://tut.php-quake.net/ und das Nachschlagewerk hier http://php.net/.

PHP-Code wird in den Templates ausgeführt, sonst würde Contao nicht laufen.

Quellen für Entwickler findest du im Entwicklerforum in einem der ersten Sticky-Threads von Nina.

Solch ein Problem zu beschreiben bringt meiner Meinung nach nichts. Am besten du zeigst mal eine Grafik mit dem was du möchtest und bietest uns dann eine Seite auf der drei Spalten mit subcolumns vorzufinden sind (ohne Template-Anpassungen). Dann können wir mit firebug versuchen deine Wünsche umzusetzen.

Gruß

Zitat:

---

PHP-Code wird in den Templates ausgeführt, sonst würde Contao nicht laufen.

---

Aber warum wird mein PHP-Code nicht ausgeführt??? liegt es evtl. an YAML???


Nur wenn man sich mal bitte meinen PHP-Code oben genauer anguckt ist das schon klar was ich will: mit Hilfe von einfachen PHP- Befehlen die class-Namen für meine Eigenen divs so anpassen wie ich es brauche.

Um es jetzt genau zu beschreiben was mein Problem ist, werde ich alles ganz ausführlich von der Ausgangs Basis zu meinem gedachten Ziel schildern.

zuerst die original *.tpl - Dateien nach dem Kopieren über das BE.
Hier die Datei "ce_colsetStart.tpl" im Orginal

PHP-Code:

---

!-- Spaltenset Start //-->
<div class="<?php echo $this->class; ?> <?php echo $this->scclass; ?>"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <!-- first Column //-->
    <div class="<?php echo $this->column; ?>">
        <div class="<?php echo $this->inside; ?>"<?php if($this->gap['right']): ?> style="padding-right:<?php echo $this->gap['right']; ?>;"<?php endif; ?>>

---

Hier die Datei "ce_colsetPart.tpl" im Orginal

PHP-Code:

---

        </div>
    </div>
    <!-- <?php echo $this->colID ?> Column //-->
    <div class="<?php echo $this->class; ?> <?php echo $this->column; ?>"<?php echo $this->cssID; ?>>
        <div class="<?php echo $this->inside; ?>"<?php if ($this->gap['left'] || $this->gap['right']) : ?> style="<?php if ($this->gap['right']) : ?>padding-right:<?php echo $this->gap['right']; ?>;<?php endif; ?><?php if ($this->gap['left']) : ?>padding-left:<?php echo $this->gap['left']; ?>;<?php endif; ?>"<?php endif; ?>>

---

Und nun die dritte und letzte im original:

PHP-Code:

---

</div>
    </div>
</div>
<!-- Spaltenset End //--> 


---

So und nun meine gedachten Anpassungen in denen mein PHP Code nicht ausgeführt wird.

Also hier der Code der Datei "ce_colsetStart.tpl" angepasst von mir

PHP-Code:

---


<?php
$o_var=$this->class;
if (isset($o_var)){ 
$a_class_content=array();
$a_class_content=explode(" ",$o_var); 
$class_name_mix =$a_class_content[0];
if (isset($a_class_content[1])) { 
$class_name_mix=$a_class_content[0]."-".$a_class_content[1];} 
else {$class_name_mix ="defaultcls";}
}
?>

<!-- Spaltenset Start //--><!-- Orginalcode //-->
<div class="<?php echo $this->class; ?> <?php echo $this->scclass; ?>" <?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <!-- first Column //-->
        <!-- meine eigener Div Container für den Top-Bereich der ERSTEN Spalte -->
        <div class="<?php echo $class_name_mix."-TopStartCol"; ?>" >
      <?php echo $class_name_mix ?>1.Div Container<div>
    <div class="<?php echo $this->column; ?>">
        <div class="<?php echo $this->inside; ?>" <?php if($this->gap['right']): ?> style="padding-right:<?php echo $this->gap['right']; ?>;"<?php endif; ?>>

---

Der Kürze halber erstmal nur die ce_colsetStart.tpl.
Vielleicht funktioniert mein Code deshalb nicht weil ich versuche Contao eigne Klassenvariablen aufzurufen und diese einfach ignoriert werden? Kann ich mir zwar nicht vorstellen aber wo sonnst liegt mein Denkfehler?

Ganz zum guter letzt mal eine Einfache Beispielgrafik die ich mit Hilfe der DIV und dem PHP in den Beiträgen immer dieses Hintergrund Konstrukt ausgeben möchte.

Auf Antworten wartend und
mit freundlichen Grüßen

tl_mipro_user

Also ich kenne das Problem, mit dem Umgestalten der Inhalte innerhalb der gleichhohen (.equalize) Spaltenbereiche, genriert per [subcolums] sehr gut.

Der Klassiker sind Umrandungen die bei dem klassischen CSS-Trick mit margin-bottom: -1000px; und padding-bottom: 1000px; unten abgeschnitten werden. Irgendwie logisch, aber nicht zu vermeiden.

Ich löse das mittlerweile immer mit JavaScript und mootools, was dafür sehr vereinfachende und hilfreiche Funktionen liefert. Das hier folgende Beispiel holt sich alle Blöcke innerhalb der mit 'gleiche Höhe verwenden' markierten Subcolumns. Holt im Durchlauf die Abmessungen, speichert den größten Y-Wert und macht im weiteren Verlauf noch einen Durchlauf und setzt die Höhe aller Blöcke auf einen einheitlichen Wert. Wenn Du jetzt noch abgerundeten Header und Footer benötigst, könntest Du relativ einfach dort noch neue Kindelemete einfügen, die dann per zugewiesenem Style eine Hintergrundgrafik darstellen.

HINWEIS: Ein kleiner Tip noch, sich wiederholende Farbverläufe beanspruchen weniger Arbeitsspeicher und sind beim Rendering der Seite performanter, wenn sie nicht nur 1px breit/hoch sondern eher 16px oder 32px. Unsere heutigen Rechner sind zwar meistens leitungsfähig genug, aber es gibt durhcaus auch noch alte Maschinen, ältere Software und nicht zu vergessen die kleinen mobilen Geräte. Bei GIF und PNG hat man da auch kaum einen Unterschied in der Dateigröße, da diese flächig sehr gut komprimieren (polygonal) im Vergleich zu JPG (benachbarte Pixel).

Code:

---

<script type="text/javascript">
<!--/*--><![CDATA[/*><!--*/
window.addEvent('domready',function() {
        var y = 0;
        $each($$(".equalize .block"), function(el) {
                var size = el.getSize();
                if ( y < size.y ) { y = size.y }
        });
        $each($$(".equalize .block"), function(el) {
                el.setStyle('height', y);
        });
});
/*]]>*/-->
</script>

---

Das werde ich mal verdauen und Dich dann noch mal dazu ansprechen über das Forum aber jedenfalls mal eine Lösungsidee.
Nach dem ich mir mein "Kauerwelsch" mal durch gelesen habe merke ich das es vieleicht garnicht so einfach ist meine Idee zu verstehen. Die Sache mit den Mootols hat einen Nachteil, wenn jemand man kein Javascript anhat denn ist das für die Katz!....

Mit PHP und zusätlichem HTML geht ja sehr einfach das mein PHP-Code wird nicht interpretiert wird, außer der Orginal-Code. Warum nicht??? Wer nicht glaubt probiert es aus!

Code Beispiele habe ich ja genug gegeben

Danke für alle Hilfe, ich habe den Thred noch nicht geschlossen!

Bitte noch mal mein Problem genauer anschauen!


tl_mipro_user