Cassiopeia Kategorie Blog mit Bildern

Hallo zusammen,

im Backend von Joomla 4.x gibt es beim Erstellen eines neuen Moduls so eine Art Kachelansicht.

Diese gefällt mir sehr gut und ich würde sie gerne auf meiner Seite verwenden.

Ich habe ein Banner (Position. Banner) und würde gerne 4 dieser Kacheln darunter setzen.

Gefüllt mit einem Hintergrundbild und einem kleinen Text soll die Kachel wie im Backend auch auf einzelne Beiträge verlinken.

Wie kann ich das realisieren?

Meine aktuelle Seite liegt auf dem Localhost, ein Link dorthin ist also schlecht.

Ich meine diese Kacheln:

So hatte ich mir das vorgestellt:

Ich möchte solche Kacheln auch auf einer anderen Unterseite verwenden, um den Inhalt eines Menüs mit allen Untermenüpunkten darzustellen.

Ist das ohne weiteres möglich?

Oder müsste ich dafür eine Erweiterung kaufen?

gruß Mücke

Zitat von Elwood

Ich nutze dafür die kostenlose Erweiterung Astroid-Framework.

Gibt es das als Erweiterung? ich konnte nichts finden

oder ist das etwas anderes als die normalen Erweiterungen?

Zitat von scoutrz

3. Es ist in Joomla von Haus aus möglich Module innerhalb von Artikel Module einzufügen. Das geht relativ einfach. Es lassen sich auch Module dadurch verschachteln.

Das klingt interessant.

Gibt es dafür ein Tutorial?

Hmm, ich habe gerade ein wenig mit dem Kategorie-Blog gespielt.

Wenn ich die entsprechenden Beiträge editiere:

Tab: Bilder und Likes

einfügen => Einleitungsbild

Reiter Optionen

Text eingeben => Eigener „Weiterlesen“-Text

Dann habe ich schon fast, was ich will.

Jetzt müsste ich nur noch den "Weiterlesen"-Button mit CSS so bearbeiten, dass er die Breite des Bildes einnimmt und im unteren 5tel des Bildes transparent und grau erscheint.

Dann hätte ich meine Kacheln und einen Link zum Anklicken für den Beitrag, der dahinter stehen würde.

Was mir dabei durch den Kopf geht.

Wofür sind die Links A, B und C im TAB: Bilder und Links?

Und was ist, wenn ich den Weiterlesen-Button per CSS verändere, wird er dann überall richtig angezeigt oder besteht die Gefahr, dass ich auf manchen Plattformen das Layout kaputt mache?

Eventuell könnte man den Weiter lesen Link auch einfach in der Breite des Bildes direkt unter das Bild ohne die Transparenz setzen.

Ich habe den eindruck das ich noch eine Weile Spilen muss damit.

Ich habe jetzt eine Lösung gefunden:

user.css

.btn-secondary {
  background-color:     #255E8F;
  border-color:         #4082BF;
  color:                 #ffffff;
  width:                 100%;
  height:                 50px;
  border-radius:         0px 0px 5px 5px;
}
.btn-secondary:focus,
.btn-secondary:hover {
  background-color:     #4082BF;
  border-color:         #255E8F;
  color:                 #000000;
}
.blog-item .item-image {
  margin-bottom:        -40px;
  border-radius:         5px 5px 0px 0px;
}
.icon-chevron-right:before {
  visibility: hidden;
}

Der Beitrag hat als erstes einen Link zum Weiterlesen im Beitragstext.

Dann habe ich ein Einleitungsbild für den Beitrag hinterlegt.

Dann habe ich einen eigenen Text für den Weiterlesen-Link eingegeben.

Dann habe ich die user.css mit dem obigen Code erweitert.

Das Ergebnis sieht dann so aus.

Damit bin ich sehr zufrieden.

Insgeheim hoffe ich, dass ich mir mit dem User.css Code nicht noch andere Stellen auf der Seite versaut habe.

Jetzt muss ich nur noch die Bilder raussuchen (erstellen) und darauf achten, dass sie alle gleich groß sind, damit alles symmetrisch aussieht, .

Stef: Ja, du hast recht.

Hmm, kann man das noch ergänzen, so dass der Button vom LogIn verschont bleibt?

Ich benutze den LogIn auf der Seite momentan nicht, aber man weiß ja nie.

z.B. dass mein user.css Code für Schaltflächen nur verwendet werden soll, wenn sie sich von den Klassen

.grid-child .container-component

eingeschloßen wurden.

Zitat von Stef

Nur mit Link zum Problem, auf einem Subdomain vielleicht ?

Bei einer Localhost-Seite funktioniert das nicht.

Aber ich habe es ausprobiert und es scheint zu funktionieren.

Ich habe überall die Klasse

.container-component

vorangestellt.

.container-component .btn-secondary {
  background-color:     #255E8F;
  border-color:         #4082BF;
  color:                 #ffffff;
  width:                 100%;
  height:                 50px;
  border-radius:         0px 0px 5px 5px;
}

.container-component .btn-secondary:focus,
.container-component .btn-secondary:hover {
  background-color:     #4082BF;
  border-color:         #255E8F;
  color:                 #000000;
}

.container-component .blog-item .item-image {
  margin-bottom:        -40px;
  border-radius:         5px 5px 0px 0px;
}

.container-component .icon-chevron-right:before {
  visibility: hidden;
}

Jetzt sieht es so aus: