2 Antworten zu diesem Thema

[suelzi]

Hallo Zusammen,

 

das "i" auf der Produktlistenseite habe ich in dern Versionen vor 5 ändern können und so wurde das "i" und der Zusatz "Produktinfos"  in der gleichen Art angezeigt wie der Button "In den Warenkorb" da drüber.

 

Dies geht seit der Version 5.0 mit der bisherigen Methode nicht.

 

Ich habe es in der Product.List.Item.Buttins.cshtml gemacht. (angehängt)

 

Hier konnte ich jetzt aber nur das "i" in das "info-circle" ändern und Produktinfos hinzufügen.

 

Ich bekomme es aber nicht mehr hin, dass es auch in einer Art Button umrandet wird - der gleiche Button wie "in den Warenkorb", nur in hellgrau hinterlegt und gerne auch die gleiche Schriftart. (screenshot beigefügt)

 

Haben jemand einen Tipp für mich?

Vielen Dank.

 

 

Angehängte Bilder

• 

Angehängte Bilder

•  Proct.List.Item.Buttons.txt   4.31K   24 Anzahl Downloads

[Marcus Gesing]

<a href="#" class="btn btn-light btn-block d-md-block">
  <i class="fa fa-info-circle"></i>
  <span>Produktinfos</span>
</a>

Anstatt der Farbe btn-light kann man auch btn-secondary verwenden.

[stefanmueller]

Das Markup class="btn btn-light btn-block d-md-block" ist eine Kombination von CSS-Klassen, die typischerweise im Zusammenhang mit dem Bootstrap-Framework verwendet werden. Diese Klassen definieren das Aussehen und Verhalten von Schaltflächen in Webanwendungen:

• btn: Eine Basisklasse für alle Schaltflächen in Bootstrap.
• btn-light: Eine Klasse, die die Schaltfläche mit einem leichten (hellen) Farbschema gestaltet.
• btn-block: Diese Klasse macht die Schaltfläche block-level, sodass sie die volle Breite des übergeordneten Elements einnimmt.
• d-md-block: Eine responsive Klasse, die die Anzeige der Schaltfläche auf mittelgroßen und größeren Geräten (wie Tablets und Desktops) als Blockelement steuert.
  
  Viel mehr Infos und Beispiele bei Bootstrap: https://getbootstrap...ns/#button-tags
   
• fa fa-info-circle kommen aus der bekannten "Font Awesome", das fa schaltet sie ein und fa-info-circle malt das eingekreiste ( i ) vor das Wort "Produktinfos". In so einer Font Awesome gibt es natürlich noch viele weitere Bilder mehr, die man nutzen kann. Wobei es hier wichtig ist, auf die Version der Font Awesome zu achten. In V4 soll das funktionieren, ab V5 hat sich wohl etwas geändert. https://fontawesome....con/info-circle