eigenes Modul mit CSS ansprechen. Wie?

Hallo zusammen

Ich möchte auf meiner Webseite ein "Webseite zuletzt aktualisiert am: ...." einfügen. Dafür habe ich ein Modul erstellt und in einen Artikel eingefügt, eigener HTLM-Code, der da lautet:

<b>Webseite zuletzt aktualisiert am:</b> {{last_update}} {{form::date}}

Das hat soweit geklappt. Jetzt möchte ich dem Inhalt aber noch einen Rahmen geben. Das geht ja per CSS. Eine CSS-Datei habe ich auch erstellt. Nur wie verbinde ich jetzt die beiden? Ich habe was von IDs, Klassen und Selektoren gelesen und auch verschiedenes ausprobiert, nur ist bisher noch kein Rahmen erschienen. Jetzt hoffe ich, dass mir jemand schrittweise erklären kann, was zu tun ist.

Zitat:

---

Zitat von swissmiss

<b>Webseite zuletzt aktualisiert am:</b> {{last_update}} {{form::date}}

---

Zitat:

---

<div class="renew">Webseite zuletzt aktualisiert am: {{last_update}} {{form::date}}</div>

---

Und jetzt renew mit CSS formatieren. Sowas schon getestet?

Ansonsten guck mal was es Dir im firebug an klassen ausgibt im Frontend. Und wenn Du ein modul hast solltest Du doch auch noch eigene Klasse vergeben können.

Also ich hatte was in der Richtung, einfach einen anderen Begriff gewählt für "renew". Dann eine neue CSS-Datei erstellt, Rahmen definiert... und jetzt wie weiter. Hat sicher was mit dem Selektor zu tun. Ich stehe in der CSS-Lernphase, sehe die Zusammenhänge noch nicht so.

Zitat:

---

Zitat von ciaobello

Ansonsten guck mal was es Dir im Firebug an klassen ausgibt im Frontend.

---

Firebug ist ein add on für den Firefox welches Du installieren kannst.

Wenn Du zum Beispiel mit Chrome (auch FF) die F12 Taste drückst öffnen sich die Developer Tools (Standardmässig dabei). Damit kannst du den Quelltext analysieren.

Da gibt es zum Beispiel das Lupen Symbol. Dass klickst Du an und fährst mit der Maus über die Ausgabe Deines Moduls und klickst da den Bereich an den Du bearbeiten willst. Da siehst Du dann was für klassen hast die Du dreckt auch bearbeiten kannst (rechts im CSS). Du siehst sofort was sich ändert (Bis Du die Seite neu aufbaust und die Änderung ist wieder weg) und schreibst die Änderungen im Nachhinein genau so in Deine CSS Datei.

Wenn es um CSS Grundlagen geht, dann musst halt vielleicht auch mal eine CSS spezifische Seite angucken um herauszufinden wie das generell funktioniert. (Oder sind die CSS Probleme nur im Zusammenhang mit Contao?)

Jetzt weisst ja wie den Quelltext analysieren kannst. Mal eine Contao Demo damit angucken (Devloper Tools) schadet auch nicht. So siehst Du was Contao für einen Quelltext generiert und dessen CSS findest ja immer neben an.

Interessenhalber könntest Du Dir auch mal folgenden Link ansehen:
https://community.contao.org/de/show...284#post312284

Hallo

Danke Euch beiden. Ich bin in der Lernphase, wälze gerade zwei Contao-Bücher. Im Moment brauche ich einfach rasche Hilfe, um meine Arbeit abschliessen zu können.

Den Firebug werde ich mal studieren. last_change habe ich installiert, nur erscheint es nicht in meiner Modulliste! Kann's also nicht in meinen Artikel einbauen .

last_change ist eine Erweiterung, die du in der Erweiterungsverwaltung findest. Dann funktioniert das wie Insert-Tags.

Hilfetext/Anleitung steht bei der Erweiterung selbst.

Einfach mal als Test im Text an der gewollten Stelle eintragen
das Beispiel von pyretta in meinem Link oben : zuletzt aktualisiert am: {{last_change_page::{{page::id}}::all::date}}

dann müsste irgendwas im Frontend der Seite zu sehen sein, oder du machst den Eintrag wie von pyretta beschrieben im Seitentemplate, dann gilt es für alle Seiten

Ok, habe ich gemacht. Dann stehe ich aber wieder an gleicher Stelle wie vorher: da ist ein Eintrag ohne Rahmen :).

Hat mich grad noch auf eine Idee gebracht. HTML-Element einfügen mit folgendem Text:

HTML-Code:

---

<p style="width:212px;padding:5px;border: 1px dotted #cccccc;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-top-left-radius:10px;">
<b>Webseite zuletzt aktualisiert am:</b> {{last_update}} {{form::date}}
</p>

---

Klappt :).
Vielen Dank für Eure Zeit und Hilfe!