Einleitungs- oder/und komplettes Beitragsbild zentriert anzeigen

    Wenn die obigen Bilder kleiner als die Displaygröße sind, möchte ich, dass sie zentriert dargestellt werden. In Joomla 3 hatte ich ja zumindest die Möglichkeit, die Textumfließung auszuwählen (wenn auch nicht zentriert). In Joomla 4 existiert die Möglichkeit "Textumfließung" nicht mehr.

    Ich kann allerdings sowohl unter Joomla 3 als auch unter Joomla 4 eine CSS-Klasse angeben. Dazu habe ich eine mit dem Inhalt {display: block; margin-left: auto; margin-right: auto;} erstellt. In einem Beitrag sorgt die Angabe dieser Klasse dafür, dass das Bild zentriert dargestellt wird. Leider im Einleitung-/Beitragsbild nicht. Kann mir bitte jemand helfen?

    Dankeschön. Bringt schon mal etwas mehr Licht ins Dunkel :) Da war mein Ansatz ja nicht so verkehrt.

    Ich nutze allerdings nicht cassiopeia, sondern ein anderes Template. Deshalb habe ich das mit der eigenen class in user.css probiert und zwar genau so wie es im Artikel steht. Leider funktioniert das nicht wie erhofft. Liegt das vielleicht daran, dass es sich bei dem Objekt um ein Bild und nicht um einen Text handelt?

    Sorry für meine Fragen, ich habe mich bisher nur in Grundzügen mit eigenen classes beschäftigt.

    Zitat von firstlady

    Andere Templates nehmen nicht immer die user.css an.

    Ein link zum Problem könnte dir helfen.

    Ich verwende das custom-Template von joomlaplates. Die vorgeschlagene class habe ich dort im "benutzerdefinierte Code" eingetragen. Dort steht auch schon eine andere class, die ordnungsgemäss funktioniert. Ich probier aber auch nochmal, die class in der user.css einzutragen.

    Was meinst du bitte mit deinem letzten Satz?

    Öffne in Joomla das Template und schau nach ob es dort bei CSS eine custom.css gibt.

    Wenn ja musst du dort den Code eintragen. Wenn nein, erstelle eine Datei "custom.css".



    Die user.css funktioniert bei diesem Template nicht!

    Zitat von WM-Loose

    Die user.css funktioniert bei diesem Template nicht!

    Doch, gerade ausprobiert. Die custom.css ist (leer) im Ursprungs-Template vorhanden und funktioniert wie ich nach dem Eintragen eines anderen Code-Schnipsels festgestellt habe.

    Zitat von astrid

    Wenn du die URL der Website hier bekannt gibst, kann man Vieles im Quellcode sehen und Fragen so gezielter beantworten.

    Natürlich gerne. Ich habe auf einer Testseite das Einleitungs- und das Beitragsbild sowie das gleiche Bild im Artikel selbst mit einem Image in der Größe 640x480px erstellt.

    In der custom.css habe ich folgende class erstellt:

    .rg-img-center {text-align: center;}

    Diese class habe ich jeweils dem Einleitungs-, Beitrags- und Artikelbild zugeordnet. Leider ohne irgendwelche Effekte. Das Bild bleibt links.

    Erstelle ich die class folgendermaßen:

    .rg-img-center {display: block; margin-left: auto; margin-right: auto;}

    wird zumindest das Bild im Artikel zentriert angezeigt.

    Hier der Link zum Beitrag https://j4.mtb-heinsberg.de/le…onabschlusstour-2021.html

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Reigi mit diesem Beitrag zusammengefügt.

    Dankeschön! Es funktioniert. Ich habe die obigen Codes jeweils als eigene classes in der user.css angelegt. Als Nutzer mit nur grundlegende Kenntnissen in CSS verstehe ich es allerdings nicht.

    Ist "figure" nicht ein html-Element?

    Woran erkennt Joomla denn, das es sich um ein figure Element handelt?

    Die class text-rg-img-center wird doch erkennbar nirgendwo angesprochen. Im Joomla-Feld "CSS-Klasse Bild" gebe ich doch nur die Klasse rg-img-center ein. Woran erkennt Joomla dass es auch die class text-rg-img-center verwenden soll?

    Und, letzte Frage, warum wird das Artikel-Bild nicht zentriert?

    weiß nicht, wieso Du von einer user.css sprichst. Hast jetzt eh eine custom.css

    Zitat von Reigi

    warum wird das Artikel-Bild nicht zentriert?

    Du hast:

    Code
    .rg-img-center {
  margin 0 auto;
  display: block;
}

    statt so: #9

    Code
    .rg-img-center {
    margin: 0 auto;
    display: block;
}

    es fehlt der Doppelpunkt nach dem margin


    Liebe Grüße

    Christine

    Zitat von Reigi

    Dankeschön! Es funktioniert. Ich habe die obigen Codes jeweils als eigene classes in der user.css angelegt. Als Nutzer mit nur grundlegende Kenntnissen in CSS verstehe ich es allerdings nicht.

    Ist "figure" nicht ein html-Element?

    Woran erkennt Joomla denn, das es sich um ein figure Element handelt?

    Die class text-rg-img-center wird doch erkennbar nirgendwo angesprochen. Im Joomla-Feld "CSS-Klasse Bild" gebe ich doch nur die Klasse rg-img-center ein. Woran erkennt Joomla dass es auch die class text-rg-img-center verwenden soll?

    Und, letzte Frage, warum wird das Artikel-Bild nicht zentriert?

    Figure ist ein html Element, in deinem Template hat das figure Element für das Intro-Bild die Klasse "text-rg-img-center" (einfach im Browser auf das Bild mit der rechten Maustaste klicken und "Untersuchen" - oder ähnlich Wortlaut jenach Browser - auswählen, dann siehst du den Quellcode der Seite und wie dei Elemente aufgebaut sind).
    Ich weiß nicht wie dein Template funktioniert und wie die Klassen, die du angibst, verwendet.