Bildgröße in Kontaktkomponente

svenhn · 14. Juni 2022

Hallo,

ich habe über die Kontaktkomponente mehrere Kontakte angelegt und diese einer Kategorie zugeordnet. Über den Menüpunkt "Kontakte - Kontakte in Kategorie auflisten" lasse ich mir die Kontakte mit Bild auflisten. Die Bilder in den jeweiligen Kontakten sind relativ groß, was für den einzelnen Kontakt auch so sein soll. Im Listenlayout möchte ich die Bilder allerdings kleiner darstellen. Gibt es hier eine Möglichkeit? Ich verwende hier das normale Cassiopeia Template.

Gruß

Sven

Elwood · 14. Juni 2022

Versuche es mal mit diesem Code in der user.css in /media/templates/site/cassiopeia/user.css

Code

.img-fluid, .img-thumbnail {
  height: 10%;
  max-width: 10%;

%-Wert nach Gusto anpassen.

svenhn · 15. Juni 2022

habe es der CSS hinzugefügt. Hat allerdings keine Auswirkungen.

WM-Loose · 15. Juni 2022

Poste mal den Link zur Webseite, dann kann man auch richtig feststellen was zu tun ist.

JoomlaWunder · 15. Juni 2022

Zitat von svenhn

habe es der CSS hinzugefügt. Hat allerdings keine Auswirkungen.

Am Ende des Codes aus #2 fehlt noch die Klammer "}".

Den Code selber habe ich jetzt aber nicht getestet.

Ansonsten: Wurden die Caches mal geleert?

svenhn · 15. Juni 2022

Cache habe ich geleert. Die Klammer hatte ich auch gesetzt. user.css sieht wie folgt aus (unterer Teil):

Code

/* Grundsätzliche Farben */
:root {
--cassiopeia-color-primary: green; --cassiopeia-color-link: green; 
--cassiopeia-color-hover: red;
}
  
/* Hintergrundfarbe Header */
.container-header {
  background-color: white;
  background-image: none;
}  
/* Farbe horizontale Navigation */
.container-header .mod-menu {
  color: green;
}

/* Hintergrundfarbe Footer */
.container-footer {
  background-color: white;
  background-image: none;
}  

/* Bildgröße Kontakteliste verkleinern  - funktioniert aber nicht*/
.img-fluid, .img-thumbnail {
  height: 10%;
  max-width: 10%;
}

Alles anzeigen

Die Seite ist noch nicht online, da ich gerade erst am Aufbau mit XAMPP bin. Screenshot im Anhang.

WM-Loose · 15. Juni 2022

OK, dann mal mit folgenden Code ausprobieren:

Code

.img-thumbnail {
  max-width: 20%;
}

auch hier dann die 20% anpassen.

svenhn · 15. Juni 2022

Hat leider - auch nach Cacheleerung - kein Erfolg

WM-Loose · 15. Juni 2022

Dann klick mit der rechten Maustaste auf das entsprechende Bild und wähle "Untersuchen" aus. Poste das was unten (oder rechts, je nachdem wie du deinen Broweser konfiguriert hast) als Code bei

Code

.img-thumbnail ...

angezeigt wird.

Bildausschnitt ist nur ein Beispiel.

Noch eine persönliche Anmerkung zu diesen immer häufiger werdenden Aussagen "ich hab die Seite nicht online und mach lokal". Es nervt , da nicht umsonst in den Forenregeln das ganze auch noch fett und unterstrichen steht:

Gerade bei CSS-Problemen ist es wichtig zu sehen wo das Problem liegt.

christine2 · 15. Juni 2022

Hallo

Hab noch schnell so ne Liste temporär angelegt. Komisch, bei mir geht's auch nicht.

Probiers so (funktioniert bei mir):

Code

img.contact-thumbnail.img-thumbnail {
  max-width: 20%;
}

Liebe Grüße

Christine

Elwood · 15. Juni 2022

Sorry, mein Fehler!

Die user.css muss hier liegen, also Ordner /css vergessen:

/media/templates/site/cassiopeia/css/user.css

Ggf. noch Joomla- und Browsercache leeren.

svenhn · 15. Juni 2022

Vielen Dank Christine, dein Tipp hat funktioniert.

Elwood · 15. Juni 2022

Mein Tipp hat nicht funktioniert?