Seitenabhängiges Template

[pmschulze]

Mit Hilfe der drei Reiter im Bearbeiten-menü kann ich einer spezifischen Seite ein neues Template zuweisen.
Kann man dies aber auch direkt im Template tun, d.h. per if-Abfrage auf einen Seitennamen?
Damit müsste man nur ein Template entwickeln.

Hintergrund: Mein Content läuft in einer 70%-breiten Box, daneben mit 30% das Sub-Menü (angepasstes Lauyout von Ludwig )
Ist aber kein Untermenü vorhanden, dann "klafft" eine leere Box.

Alternative Frage zu oben: Kann man testen, ob Untermenü-Punkte existieren und wenn nein, dann das Layout angepasst und die Box verbreitert wird?

Gruß Peter

[frase]

Hintergrund: Mein Content läuft in einer 70%-breiten Box, daneben mit 30% das Sub-Menü (angepasstes Lauyout von Ludwig )
Ist aber kein Untermenü vorhanden, dann "klafft" eine leere Box.

Alternative Frage zu oben: Kann man testen, ob Untermenü-Punkte existieren und wenn nein, dann das Layout angepasst und die Box verbreitert wird?

Ohne genau zu wissen wie das bei dir aussieht, wird's schwierig.

Zunächst gibt es den :empty-Selector für CSS.
Damit könntest du prüfen, ob das Submenü leer ist und die "leere Box" komplett ausblenden (display:none;).

Wahrscheinlich wird dir das nichts nützen, weil "Content" dann immer noch auf 70% steht - oder?
Da hilft wahrscheinlich nur noch jQuery oder JavaScript.
Ein Beispiel HIER

VIelleicht gibt es aber auch noch eine PHP-Lösung?
Warte mal ab, da kommt sicher noch was ...
Welches Ludwig-Template ist es denn?

[pmschulze]

Ohne genau zu wissen wie das bei dir aussieht, wird's schwierig.

Ich bereite hier auf einem raspberry-pi den Umzug unserer Schulhomepage vor:
Webseite http://schulzes-web.de
Ludwigs SimpleCrazy Template wurde farblich angepasst, die beiden News-Boxen 2/3 entfernt.

Da hilft wahrscheinlich nur noch jQuery oder JavaScript.

Es wäre schön, wenn ich auf jquery und script verzichten könnte.

Ludwig verwendet so etwas - das ich mir für fehlende unterseiten wünsche

<?php if ($s === 0): ?>
<div>
<?php echo newsbox('Neues');?>
</div>
<?php endif ?>

[lck]

Es wäre schön, wenn ich auf jquery und script verzichten könnte.

Das geht mit 2 kleinen Änderungen in der template.htm und etwas CSS.
template.htm Locator und subnav außerhalb der Content-Box verschieben:

Code: Select all

<!-- ************************* Container ************************* -->
<div id="tpllck_content_box">
	<!-- Bread-Crumbs-Locator -->
    <div class="tpllck_locator">
        <p><?php echo locator();?></p>
    </div>

ändern zu

Code: Select all

<!-- Bread-Crumbs-Locator -->
 <div class="tpllck_locator">
<p><?php echo locator();?></p>
</div>
<div id="tpllck_content_box">

Code: Select all

<!-- Next/Previous Page Navigation -->
    <table class="tpllck_subnav">
        <tr>
            <td class="tpllck_previous"><?php echo previouspage();?></td>
            <td class="tpllck_top"><?php echo top();?></td>
            <td class="tpllck_next"><?php echo nextpage();?></td>
        </tr>
    </table>
</div>

ändern zu

Code: Select all

</div>
<!-- Next/Previous Page Navigation -->
    <table class="tpllck_subnav">
        <tr>
            <td class="tpllck_previous"><?php echo previouspage();?></td>
            <td class="tpllck_top"><?php echo top();?></td>
            <td class="tpllck_next"><?php echo nextpage();?></td>
        </tr>
    </table>

stylsheet.css ergänzen (Änderungen gekenzeichnet mit /* NEU */)

Code: Select all

#tpllck_content_box {
	text-align: left;
	margin: 0 auto;
	padding: 0;
	display: table; /* NEU */
	width: 100%; /* NEU */
}

Code: Select all

.tpllck_content {
	/* float: left; */ /* NEU */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: auto; /* NEU */
	min-height: 500px;
	margin: 0;
	background-color: #FFF;
	border: 1px solid #000080;
	padding: 1em;
	display: table-cell; /* NEU */
}

Code: Select all

#tpllck_sidebar {
	/* float: left; */ /* NEU */
	width: 30%;
	padding: 0 0 0 1%;
	margin: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: table-cell; /* NEU */
}

Code: Select all

@media only screen and (max-width: 768px) {
...
.tpllck_content {
	clear: both;
	float: none;
	min-height: inherit;
	width: 100%;
	display: block; /* NEU */
}
#tpllck_sidebar {
	clear: both;
	float: none;
	width: 100%;
	padding: 0;
	display: block; /* NEU */
}
...

Oder Frank weiß eine Lösung per Flexbox, darin ist er firm.

[frase]

Oder Frank weiß eine Lösung per Flexbox, darin ist er firm.

[pmschulze]

Die Idee ist gut, aber es funktioniert nicht
Alle sind Änderungen eingearbeitet...
In der Firefox-eigenen Seitenuntersuchung wird der Content wird auf 100% angezeigt, die Darstellung hört aber nach ca. 70& auf.
Am besten sieht man das auf der Blog-Seite.
Übersehe ich etwas??

Vielleicht sieht das System in der Sidebar die beiden leeren ><div> [toc und news mit php-Abfrage] als nicht leer an.

ggf. mache ich einfach ein Template mit einem 100% Container und weise ihn händisch zu.

[frase]

Vielleicht sieht das System in der Sidebar die beiden leeren ><div> [toc und news mit php-Abfrage] als nicht leer an.

Das ist tatsächlich so, nämlich in der "tpllck_nav2" sind irgendwelche Leerräume drin (Leerzeichen oder Tabulatoren).

Du könntest mal folgendes versuchen:
Prinzipiell alles so wie von Ludwig beschrieben.
Nur:
Beide (tpllck_content UND tpllck_sidebar) -> width: auto;
Dann den Inhalt der Sidebar auf eine feste Breite setzen, z.B.:

Code: Select all

.tpllck_nav2 {
	width: 350px;
}

Und, falls leer, ausblenden

Code: Select all

.tpllck_nav2:empty {
	display: none;
}

Das funktioniert aber nur, wenn du die Leerräume rausbekommst. Da habe ich so meine Bedenken ...

[frase]

Code: Select all

<!-- ************************* Navigation 2./3. menulevel *************************-->
<div class="tpllck_nav2"><?php echo xxxxx; ?></div>

So müsstest du die Leerräume heraus bekommen - xxxxx = die Funktion.

[olape]

Alternative Frage zu oben: Kann man testen, ob Untermenü-Punkte existieren und wenn nein, dann das Layout angepasst und die Box verbreitert wird?

Gruß Peter

Ohne jetzt grossartig darüber nachzudenken.

Code: Select all

<?php if(submenu()!=´´){
Code für 70/30;
}else{
Code für 100;
}?>

[frase]

Ohne jetzt grossartig darüber nachzudenken ...

Gute Idee.
Etwas abgewandelt:

Code: Select all

<style>
<?php if(!submenu()) :?>
.tpllck_content {
    width: 100% !important;
}
.tpllck_sidebar {
    display: none;
}
<?php endif ?>
</style>

Das alles oben in den <head>-Bereich als letztes vor </head>
Das könnte evtl. klappen.

Ich weiß jetzt nicht genau, wie das bei dir auf der Startseite geregelt ist. (Kontakt + Termine)
Evtl. musst du nur tpllck_nav2 ausblenden, statt tpllck_sidebar.