Beiträge von winterman

winterman

Hallo Rolf Dautrich : Vielen Dank für deine Tipps!

Die Items als Module anzulegen ist ein guter Tipp.

So könnte ich auch die Reihenfolge beeinflussen.

winterman

Hallo zusammen,

ich würde gerne ein Override für mein "Hauptmenü" erstellen.
Für eine Intranetseite habe ich auf der Startseite ein "Buttonmenü" erstellt.
Bisher ist das ein einfacher Beitrag, in dem ich die jeweils benötigten Buttons händisch ein- und auskommentiere.
Ich würde die einzelnen Buttons gerne als Beitrag anlegen und per Override aus Liste ausgeben, dmait ich ich die Menüpunkte zeitgesteuert veröffentlichen und sperren kann.

Das ganze sieht momentan so aus:

Spoiler anzeigen

Code

<div class="mt-1 row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-6 g-4">
	<div class="col">
		<a href="link1" style="color:inherit;text-decoration:none">
			<div class="p-4 border-primary border border-1 rounded-2 bg-secondary bg-opacity-10">
				<img src="images/svg/icon1.svg" height="64" width="64">
				<h1 class="startboxenueberschrift">Überschrift 1</h1>
				<p>Erklärtext Menülink 1</p>
			</div>
		</a>
	</div>
	<div class="col">
		<a href="link2" style="color:inherit;text-decoration:none">
			<div class="p-4 border-primary border border-1 rounded-2 bg-secondary bg-opacity-10">
				<img src="images/svg/icon2.svg" height="64" width="64">
				<h1 class="startboxenueberschrift">Überschrift 2</h1>
				<p>Erklärtext Menülink 2</p>
			</div>
		</a>
	</div>
	<div class="col">
		<a href="link3" style="color:inherit;text-decoration:none">
			<div class="p-4 border-primary border border-1 rounded-2 bg-secondary bg-opacity-10">
				<img src="images/svg/icon3.svg" height="64" width="64">
				<h1 class="startboxenueberschrift">Überschrift 3</h1>
				<p>Erklärtext Menülink 3</p>
			</div>
		</a>
	</div>
</div>

Alles anzeigen

Habt Ihr eine Idee, ob es eine Vorlage oder Tutorial gibt, an dem ich mich orientieren kann?
Die Frage ist auch welches Modul oder Komponente ich als Vorlage nehmen sollte.

Leider scheint meine erste Anlaufstelle https://j-over.de/ offline zu sein.

Pro Item brauche ich ein Icon, ein Link, eine h1-Überschrift un einen kurzen Erklärtext.
Ich könnte die 4 Teile wahrscheinlich auch mit Custom-Fields lösen, aber ich würde jetzt erstmal mit einem Override anfagen.

Über eine Tipp würde ich mich sehr freuen.

Vielen Dank und viele Grüße

winterman

Ich habe etwas ähnliches mit Visforms (Subscription 20€/Jahr) gelöst.

Es gibt ein Formular, mit dem Daten eingegeben werden können und es gibt eine Tabelle, in der die Daten angezeigt und editiert werden können.

Der Support ist wirklich super - sehr kompetent, individuell, schnell und freundlich.

Habe ich wirklich schon viel individuelle Sachen mit gemacht!

winterman

Hallo Marek,

mit CSS geht (fast) alles.

Welches Template / Framework verwendest du?

Bei Designfragen bitte immer einen Link zur Homepage angeben, sonst ist konkrete Hilfe nicht möglich.

winterman

Hallo,

ich kann mir vorstellen was du meinst. Eine Ad-Hoc-Lösung habe ich aber leider nicht, würde mich aber auch interessieren.

Ich stelle mir das mit Bordmitteln schwierig vor. Evtl. musst du dir dafür ein passendes Custom-Plugin erstellen.

Man müsste ja das Datenfeld abfragen, bevor die Mail zusammengebaut wird.

Wenn du (wie ich) eine Visforms-Subscription hast, würde ich direkt dort im Forum fragen.

Der Support dort ist in aller Regel schnell, individuell und kompetent.

winterman

Hallo,

das ist in der Doku ganz gut beschrieben.

winterman

Ich dachte, es sei mit einem angepassten Code aus #7 auf Modul-Ebene möglich.

Das es auf Astroid-Ebene schwierig wird, habe ich befürchtet. Es sei denn man trennt Schräge und Bild wieder auf zwei Module.

winterman

Hallo nochmal,

ich habe jetzt in der Section eine Modulposition angegeben.

Im Modul selbst habe ich nun das Bild und die Schräge darüber eingefügt.

Inhalt Modul

Code: Modul

<style>
.footer-shape {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.footer-shape svg {
    position: absolute;
    display: block;
    width: calc(100% + 1.3px);
    height: 10vw;
    transform: rotateY(180deg);
   
}

.footer-shape .shape-fill {
    fill: #fff;
}

.footer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 20%, rgba(128, 0, 0, 1) 100%);
}
</style>

<div class="footer-shape">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M1200 118L0 16.48 0 0 1200 0 1200 118z" class="shape-fill"></path>
    </svg>

<img src="../images/footer/footer.jpg" class="img-fluid">
<div class="footer-overlay"></div>
</div>

Alles anzeigen

Mit der Bootstrap-Anweisung ist das Bild nun responsive. Das klappt schonmal

Hat jemand eine Idee, wie das Bild Fixed wird und sich unter die Schräge und den Rest der Seite schiebt?

winterman

WM-Loose: Vielen Dank, das war die Lösung!

Code: Vordergrund-Modul

<div style="height: 100vh;">
  &nbsp;
</div>

Kann man das ganze irgendwie so konfigurieren, dass das Bild sich an die Bildschirmbreite anpasst?

winterman

Hallo WM-Loose: Wenn ich in der Section kein Element habe und stattdessen direkt in der Section ein Hintergrundbild einstelle, kann ich dort ja das Attribut "Fix" auswählen.

Dann ist die Section allerdings im Frontend leer.

Ich glaube dasProblem ist, dass das Attribut "Fix" nur für Hintergrundbilder ausgewählt werden kann. Aber was ist dann das "Vordergrund-Element"?

Oder bin ich komplett auf dem Holzweg..?

winterman

Hallo zusammen,

ich bekomme es einfach nicht hin mit Astroid einen Fussbereich mit einem Bild zu versehen, was nicht mitscrollt und bei kleinen Bildschirmen mit schmaler wird...

Ich habe eine "Section" erstellt, darin habe ich ein Element vom Typ "image" erstellt. Dort habe ich dann das Bild ausgewählt und die benutzerdefinierte ID "footer-image" vergeben.

Astroid macht daraus diesen Quelltext:

Spoiler anzeigen

Code

<section class="astroid-section" id="f-6110f05dc728d01456035">
    <div class="astroid-row row no-gutters gx-0" id="ar-6110f05dc723f03709837">
        <div class="astroid-column col-lg-12 col-md-12 col-sm-12 col-12" id="ac-6110f05dc70fe073127107">
            <div class="astroid-image" id="footer-image">
                <div class="d-inline-block position-relative overflow-hidden">
                    <img src="/images/footer/footer.jpg" alt="Image">
                </div>
            </div>
        </div>
    </div>
</section>

Alles anzeigen

Wie bekomme ich es hin, dass das Bild nicht mitscollt? Momentan wird das Bild bei Mobilgeräten auch leider so "niedrig", dass mann nichts mehr erkennt.

Übere einen Tipp würde ich mich sehr freuen

winterman

Hallo WM-Loose: MIt ein paar kleinen Anpassungen funktioniert es nun.

Vielen Dank!

Javascript

JavaScript

<script>
    document.addEventListener('DOMContentLoaded', function() {
    // Prüfe, ob das DIV Nächster Termin eine Ausgabe hat
    var naechsterTerminDiv = document.querySelector('.naechster_termin-position.moduletable');
    
    if (!naechsterTerminDiv || naechsterTerminDiv.innerHTML.trim() === '') {
      // Wenn keine Ausgabe vorhanden ist, blende das div aus
      var elementIdNaechsterTermin = document.getElementById('ac-gkghds668');
      if (elementIdNaechsterTermin) {
        elementIdNaechsterTermin.style.display = 'none';
      }
    }
  });
  
  
  document.addEventListener('DOMContentLoaded', function() {
    // Prüfe, ob das DIV Nächste Probe eine Ausgabe hat
    var naechsteProbeDiv = document.querySelector('.naechste_probe-position.moduletable');
    
    if (!naechsteProbeDiv || naechsteProbeDiv.innerHTML.trim() === '') {
      // Wenn keine Ausgabe vorhanden ist, blende das div aus
      var elementIdnaechsteProbe = document.getElementById('ac-q3jn3kk2x');
      if (elementIdnaechsteProbe) {
        elementIdnaechsteProbe.style.display = 'none';
      }
    }
  });
</script>

Alles anzeigen

winterman

Hallo WM-Loose: Vielen Dank fü deine Antwort! Damit kann ich arbeiten.

Ich hatte auch schon darüber nachgedacht, das ganze mit zwei Modulen zu machen und mit Javascript die Astroid-Spalte dann auszublenden, wenn dessen DIV-Klasse keine Ausgabe hat.

Mit Javascript kenne ich mich nur leider garnicht aus. Mal sehen...

winterman

Hallo zusammen,

ich habe jetzt nochmal rumprobiert.

Meine Idee war das ich eine Astroid-Sektion anlege. Dort muss ich ja mit dem Grid-Layout die Spaltenbreite angebe.

Um die komplette Breite zu nutzen habe ich col-12 verwendet.

Dann habe ich ein neues Modul auf einer eigenen Modulposition erstellt,.

Dort habe ich ein Modul mit eigenem Layout veröffentlicht, was die Inhalte aus diesmal nur einer PHP Datei übernimmt.

In meiner PHP-Datei steht folgendendes:

Spoiler anzeigen

HTML: test.php

    <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="mt--5 mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
            <h3 class="module-title">Nächster Termin</h3>
            <h5>Sonntag, der 7. April</h5>
            <p>Event Musterstadt</p>
        </div>
    </div>

    <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="mt--5 mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
            <h3 class="module-title">Nächste Probe</h3>
            <h5>Freitag, der 23. Februar</h5>
            <p>um 19:30 Uhr im Proberaum</p>
        </div>
    </div>

Alles anzeigen

Wenn ich beide Ausgaben in eine PHP-Datei packe, kann die kompletten DIV's ausblenden (lassen), wenn es dort keine Inhalte gibt.

Astroid macht daraus

Spoiler anzeigen

HTML: index.php

<section class="astroid-section" id="as-61233bbc164e0053981628">
    <div class="container">
        <div class="astroid-row row" id="ar-61233bbc164e0090858980">
            <div class="astroid-column col-lg-12 col-md-12 col-sm-12 col-12" id="ac-61233bbc164e0091891679">
                <div class="astroid-module-position" id="test-id">
                    <div class="test-position moduletable ">
                        <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="mt--5 mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                                <h3 class="module-title">Nächster Termin</h3>
                                <h5>Sonntag, der 7. April</h5>
                                <p>Event Musterstadt</p>
                            </div>
                        </div>
                        <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="mt--5 mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                                <h3 class="module-title">Nächste Probe</h3>
                                <h5>Freitag, der 23. Februar</h5>
                                <p>um 19:30 Uhr im Proberaum</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Alles anzeigen

Leider werden so die beiden DIV'S "Nächster Termin" und "nächste Probe" untereinander statt nebeneinander dargestellt...

Hat noch jemand eine Idee wie ich das ändern kann.

winterman

Hallo Elwood: Vielen Dank für deine Antwort!

Die Möglichkeit hatte ich noch garnicht in Betrach gezogen.

Ich habe jetzt in Astroid beiden Elementen jeweils eine Benutzerdefinierte ID gegeben.

Das ist die Quelltext-Ausgabe:

Spoiler anzeigen

HTML: index.php

<section class="astroid-section" id="aa-mb5m785ei">
    <div class="container">
        <div class="astroid-row row" id="ar-19zgq8uij">
            <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12" id="ac-gkghds668">
                <div class="astroid-module-position" id="benutzerdefinierte-element-id-naechster-termin">
                    <div class="naechster_termin-position moduletable ">
                        <!-- # TEST SCRIPT START -->
                        <div class="mt--5 mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                        <h3 class="module-title">Nächster Termin</h3>
                        <h5>Sonntag, der 7. April</h5>
                        <p>Event Musterstadt</p>
                        </div>
                        <!-- # TEST SCRIPT ENDE-->
                    </div>
                </div>
            </div>
            <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12" id="ac-q3jn3kk2x">
                <div class="astroid-module-position" id="benutzerdefiniert-element-id-naechste-probe">
                    <div class="naechste_probe-position moduletable ">
                        <!-- # TEST SCRIPT START -->
                        <div class="mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                        <h3 class="module-title">Nächste Probe</h3>
                        <h5>Freitag, der 23. Februar</h5>
                        <p>um 19:30 Uhr im Proberaum</p>
                        </div>
                        <!-- # TEST SCRIPT ENDE-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Alles anzeigen

Leider liegt die Element-ID ja oberhalb der PHP-Scipte, so dass ich die ID alleine mit den Scripten nicht mit "nicht ausgeben lassen" kann.

Oder habe ich dich falsch verstanden?

winterman

Hallo zusammen,

ich stehe vor einem verzwickten Problem, vielleicht kann mir ja jemand helfen...

Für einen befreundeten Musikverein erstelle ich die Homepage mit J5 neu.

Dazu habe ich das Astroid-Framework verwendet.

Mit Astroid habe ich eine Sektion mit zwei Spalten erstellt. Jede dieser Spalten ist jeweils eine selbstgewählte Modulposition zugewiesen. "naechster_termin" und "naechste_probe".

Auf diesen Modulpositionen habe ich jeweils ein Modul vom Typ "Eigenes Modul" veröffentlicht. Einmal auf der Modulposition "naechster_termin" sowie "naechste_probe".

Soweit so gut.

Auf den Modulpositionen möchte ich jeweils den nächsten Auftritt und die nächste Probe ausgeben. Dies mache ich über ein eigenes PHP-Script, welches die Daten per API von einer externen Anwendung abruft.

Funktioniert auch.

Das ist die Ausgabe der php-Dateien

PHP-Ausgabe Nächster Termin

PHP: /templates/TEMPLATE/html/mod_custom/naechster-termin.php

<?php
echo '<div class="mx-3 mb-5 moduletable shadow-lg border border-primary p-3">';
echo '<h3 class="module-title">Nächster Termin</h3>';
echo '<h5>' . $naechster_termin_datum . '</h5>';
echo '<p>' . $naechster_termin_beschreibung . '</p>';
echo '</div';
?>

PHP-Ausgabe Nächste Probe

PHP: /templates/TEMPLATE/html/mod_custom/naechste-probe.php

<?php
echo '<div class="mx-3 mb-5 moduletable shadow-lg border border-primary p-3">';
echo '<h3 class="module-title">Nächste Probe</h3>';
echo '<h5>' . $naechste_probe_datum . '</h5>';
echo '<p>um 19:30 Uhr Proberaum</p>';
echo '</div';
?>

Die Ausgabe im Quelltext sieht so aus:

Auswahl-Quelltext index.php

HTML: index.php

<section class="astroid-section" id="aa-mb5m785ei">
    <div class="container">
        <div class="astroid-row row" id="ar-19zgq8uij">
            <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12" id="ac-gkghds668">
                <div class="astroid-module-position" id="nt-onma4gsyg">
                    <div class="naechster_termin-position moduletable ">
                        <!-- # TEST SCRIPT START -->
                        <div class="mt--5 mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                        <h3 class="module-title">Nächster Termin</h3>
                        <h5>Sonntag, der 7. April</h5>
                        <p>Event Musterstadt</p>
                        </div>
                        <!-- # TEST SCRIPT ENDE-->
                    </div>
                </div>
            </div>
            <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12" id="ac-q3jn3kk2x">
                <div class="astroid-module-position" id="tc2-5znil40ay">
                    <div class="naechste_probe-position moduletable ">
                        <!-- # TEST SCRIPT START -->
                        <div class="mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                        <h3 class="module-title">Nächste Probe</h3>
                        <h5>Freitag, der 23. Februar</h5>
                        <p>um 19:30 Uhr im Proberaum</p>
                        </div>
                        <!-- # TEST SCRIPT ENDE-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Alles anzeigen

Wenn nun in der externen Anwendung kein aktueller Termin oder keine nächste Probe eingepflegt worden ist, möchte ich nicht stumpf von dem jeweiligen php-Script einen entsprechenen Text ausgeben lassen, sondern das entsprechene Modul nicht anzeigen lassen.

Wenn nun kein Auftritt hinterlegt ist, sieht der Quelltext der index.php so aus:

Auswahl-Quelltext index.php

HTML: index.php

<section class="astroid-section" id="aa-mb5m785ei">
    <div class="container">
        <div class="astroid-row row" id="ar-19zgq8uij">
            <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12" id="ac-gkghds668">
                <div class="astroid-module-position" id="nt-onma4gsyg">
                
                </div>
            </div>
            <div class="astroid-column col-lg-6 col-md-12 col-sm-12 col-12" id="ac-q3jn3kk2x">
                <div class="astroid-module-position" id="np-5znil40ay">
                    <div class="naechste_probe-position moduletable ">
                        <!-- # TEST SCRIPT START -->
                        <div class="mx-3 mb-5 moduletable shadow-lg border border-primary p-3">
                        <h3 class="module-title">Nächste Probe</h3>
                        <h5>Freitag, der 23. Februar</h5>
                        <p>um 19:30 Uhr im Proberaum</p>
                        </div>
                        <!-- # TEST SCRIPT ENDE-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Alles anzeigen

Die Ausgabe des ersten DIV's (Nächster Auftritt) ist leer, es belegt aber trotzdem durch die Astroid-Spalte den Platz und in der zweiten Spalte veröffentlichte Modul (Nächte Probe" belegt den Platz.

Aber über meine PHP-Scripte habe ich ja keinen Zugriff auf die Android-Sections...

Hat jemand eine Idee, wie ich das Problem lösen könnte?

winterman

Eigentlich muss man garkeine (Core)-Dateien bearbeiten, um den Text eine Systemausgabe zu ändern. Das sollte komplett über Sprach-Overrides gemacht werden.

In diesem Video ist das ganz gut beschrieben:

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

winterman

Hast du mal im Backend unter System > Sprachen-Overrides gesucht?

Das wäre meine erste Anlaufstelle Ausgabetexte zu ändern.

winterman

Die Token-Funktion von ECC ist doch nur für das Backend, oder?

winterman

Hallo Elwood,

wenn ich z.B. auf einen anderen Server ziehe, schreibe ich in die .htaccess DirectoryIndex index.php off.html.

Es gibt dann aber keine index.php, sodern nur die off.html. Also wird diese angezeigt.

Dann packe ich die Wartungs/Offline-Seite als off.html darauf und lade dann den Rest (z.B. Joomla) hoch.

Wenn dann alles hochgeladen ist, wird eine index.php angezeigt.

Aktueller Anwendungsfall:

Ich betreue für einige kleine Vereine deren Joomla-Homepages ehrenamtlich.

Ein Verein kommt aber nicht dazu die Infos für einen Neuaufbau mit J5 zu liefern.

Der Hoster schaltet aber PHP 7.x und 8.0. ab. PHP 8.1 zerschießt die aktuelle J3-Installation.

Daher lösche ich nun J3 (Natürlich Backup vorher herunterladen) und nutze dann eine solche Wartungs/Offline-Seite bis die Kollegen liefern.

Der Anblick der Wartungsseite beschleunigt bestenfalls die Zusammenarbeit...

Darum auch explizit non-Joomla. Die Joomla-eigene offline.php oder die Offline / Coming-Soon-Funktion z.b. von Astroid ist auch sehr praktisch.

Beiträge von winterman

Hauptmenüboxen als Override

Hauptmenüboxen als Override

Joomla KVP Einträge

Seitenhöhe an Bildschirm anpassen bzw. minimale Seitenhöhe

VisForms - Felder ohne Dateneingabe im Ergebnis ausblenden

Frage zu Visforms

Astroid Bild was nicht mitscrollt

Astroid Bild was nicht mitscrollt

Astroid Bild was nicht mitscrollt

Astroid Bild was nicht mitscrollt

Astroid Bild was nicht mitscrollt

Module per PHP ein- und ausblenden / Astroid-Framework

Module per PHP ein- und ausblenden / Astroid-Framework

Module per PHP ein- und ausblenden / Astroid-Framework

Module per PHP ein- und ausblenden / Astroid-Framework

Module per PHP ein- und ausblenden / Astroid-Framework

Finde Änerung nicht wieder

Finde Änerung nicht wieder

Zugriff nur mit URL-Parameter

Wartungsseite - unabhängig von Joomla