TEMPLATE: Bootstrap4 für Shop 2.x - freies responsive Template

[hpzeller]

Vielen Dank fürs Bereitstellen.
aber hab auch etwas gefunden, im linken Seiten Menü werden lange Kategoriebezeichnungen nicht umgebrochen, sondern reichen weit in das mainframe rein.  wie bekomme ich den Umbruch hin ?
[...]

Die Ursache liegt wahrscheinlich in der Datei templates/bootstrap4/css/bootstrap/bootstrap.min.css bei folgendem Regelsatz.

Code: CSS  [Auswählen]

.dropdown-toggle {
 white-space:nowrap
}

Füge doch mal testweise in der Datei templates/bootstrap4/stylesheet.css folgenden Regelsatz ein.

Code: CSS  [Auswählen]

#categorymenu .dropdown-toggle {
 white-space: normal !important;
}

Gruss
Hanspeter

[Scubi]

Hallo Karl,

ich bin immer noch bei Materia.
Ich habe Bootstrap4 in mein-bootstrap4 umbenannt, Thema 1 gewählt, vorlage geladen, änderungen vorgenommen, aktualisiert, dann auf allgemein und Fertig geklickt. Folgende rote Fehlermeldung:
Die CSS-Datei /var/www/vhosts/xxxxxx.com/xxxxxxx.de/templates/mein-bootstrap4/css/bootstrap/bootstrap.min.css konnte nicht umbenannt werden!

Die XXXX ist nur zum maskieren der url für das Forum.

Edit: In einem anderen Testshop bootstrap4 nicht umbenannt. Selbe Fehlermeldung.
Cache undKomprimierung sind aus. Muss ich noch Rechte vergeben?

[pcsdg]

@Hanspeter
hab deinen Tip probiert,  schaut erstmal gut aus..
Hat das eventuell noch weitere Auswirkungen ?

Gruss Dirk

[hpzeller]

Hallo pcsdg,

das die Änderung noch weitere Auswirkungen hat ist nicht auszuschliessen, erwarten tue ich aber keine.

Ich habe aber noch ein anderes Problem, bezüglich Umbruch langer Namen gesehen, siehe Bilder, welches in Zusammenhang mit display:flex in der class nav steht.

vorher:
[ Für Gäste sind keine Dateianhänge sichtbar ]

nachher:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Teste doch mal folgende Regelsätze, anstelle des von mir geposteten Vorschlags aus Antwort #15, um obiges Problem mit zu lösen.

Code: CSS  [Auswählen]

#categorymenu {
  display: inline-block !important;
}
#categorymenu a {
  white-space: normal !important;
  word-wrap: break-word !important;
}
 

Gruss
Hanspeter

[pcsdg]

Hallo Hanspeter

klappt auch, aber solange zusammenhängende Kategorienamen haben wir zum Glück nicht.

ich schau mal weiter durch,  um von der 3 Version umzusteigen, müssen wir eh das Layout  in die 4 Version übernehmen, um unsere Kunden nicht alzu sehr zu stressen. 
Denke da kommen noch ein paar Stolpersteine.

Aber vielen Dank an Karl für das tolle Template, und besonders das teilen..  

Gruss Dirk

[Karl1]

Hallo Zusammen,
danke an alle die hier mithelfen.

Das Problem, dass Timm mit den Popup-Bildern hat, kann ich auch mit den unterschiedlichsten Browsern nicht nachstellen.
Hat jemand das selbe Problem, wenn ja, dann am besten mit einem Link?

Ich hab ein neues Paket angehängt, dass alle bisherigen Fehler (Cache in der Vorschau, PayPal-Button, lange Artikelnamen im Menü usw.) und Vorschläge (Unterstreichung beim Hovern) berücksichtigen sollte.

Gruß Karl

[EDIT Tomcraft 26.04.2019: Template in Beitrag 1 aktualisiert.]

[Scubi]

Hallo Karl,

ich habe Timm sein Problem eben mit dem neuen Paket getestet.
Punkt 1 trift bei mir nicht zu.
Aber das Popup ist auch an meinem Laptop zu groß.
Ich kann es oben schließen, oder muß scrollen um es unten zu schließen.

Gruß Alois

[Karl1]

Hallo Alois,
danke für deine Antwort.

Könntest du bitte mal ausprobieren, ob folgendes Abhilfe schafft.

In der Datei templates/bootstrap4/css/bs4.css die Zeilen 466-470 so ändern:

Code: CSS  [Auswählen]

@media screen and (min-width: 768px) {
.modal-dialog.src {
        max-width: 745px;
}
}

In der Datei templates/bootstrap4/javascript/bs4.js in der function updateModal() nach

Code: Javascript  [Auswählen]

                                        var src = $sel.data('src');

diese Zeile einfügen

Code: Javascript  [Auswählen]

                                        $('#modal .modal-dialog').addClass('src');

Ein paar Zeilen weiter unten steht diese Anweisung

Code: Javascript  [Auswählen]

                $("#modal").on('hidden.bs.modal', function () {

nachher bitte diese Zeile einfügen

Code: Javascript  [Auswählen]

                        $('#modal .modal-dialog').removeClass('src');

Damit werden Textinformationen in der Popup-Modalbox weiterhin breit dargestellt und bei Bildern die Fensterbreite auf Bootstrap-Standardbreite reduziert.

Gruß Karl

[Scubi]

Hallo Karl,

ich habe es geändert, aber es bringt nichts. Cache und Komprimierung sind aus.
Bei der nächsten Testreihe bitte bei allen Änderungen die Zeilen Nr. mit angeben. Ich arbeite hier mit Notepad++ . Habe leider nichts besseres

[Timm]

@karl
Bei mir ist das zu große popup auf einem 15 Zoll Mac Laptop. Vielleicht liegt’s an retina? Ich teste deinen Vorschlag auch nochmal am WE.

Gruß Timm

[Timm]

@karl
dein Vorschlag aus Antwort #22 funktioniert siehe Screenshot. Könnte fast noch einen Tick größer sein. Vermutlich hat @Scubi nicht auch den Browsercache gelöscht.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Weiter oben beim Zoom des Artikelbildes:
Wenn man da zoomt, wird man vermutlich das Bild auch komplett in den sichtbaren Bereich rücken, um an alle Stellen zu kommen. Dann allerdings fehlt einem die zweite Zeile an Vorschaubildern der weiteren Produktfotos. Ich würde diese kleiner machen, damit der Kunde schnell alle Bilder im Blick hat.

[ Für Gäste sind keine Dateianhänge sichtbar ]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Die Änderung der nicht mehr unterstrichenen Links finde ich optisch sehr vorteilhaft!

@Scubi
in notepad++ kannst du mit Strg+h auch suchen. Gib da einfach die Codezeile ein und du benötigst nicht die Zeilenangabe, sofern die Zeile nicht zweimal vorkommt. Und danke fürs testen. Aber bitte immer im Backend die beiden Caches und den Browsercache löschen. Sonst kann es sein, das gemachte Änderungen nicht sichtbar sind.

Gruß Timm

[cayuco]

Hallo Karl,
auch von mir ein herzliches Danke schön - ganz großes Kino wieder einmal.

[Timm]

Superfishmenü:

Ich persönlich finde, dass die Unterkategorien zu weit auseinander sind. Auf einem Mac mit Trackpad muss man ziemlich viel mit dem Finger arbeiten, um alle Unterkategorien zu erreichen, weil sie sich über die gesamte #navbar Breite verteilen.

Eine Lösung wie bei Stoffundstilpunktde oder Traumbeerepunktde find ich besser.

Außerdem ist das sich öffnende Feld für die Unterkategorien sofort weg, wenn man mit der Maus aus dem Bereich ist, was schnell passiert mit dem Trackpad bei so langen Strecken und man sich schnell von linker zu rechter Unterkategorie bewegt. Dann muss man wieder erst auf die Kategorie hoovern, damit sich das Feld wieder öffnet. Das ist bei stoffundstilpunktde ganz gut gelöst, dass man eine kurze Zeit außerhalb des Bereichs hat, in der man wieder zurück kann ohne das sich die Unterkategorien schließen.

Javascript-Fehler in der Konsole:

In der Konsole wird mir als Fehler angezeigt, dass die /templates/bootstrap4/javascript/bootstrap.bundle.min.js.map nicht geladen werden kann. Solch eine Datei gibt es gar nicht im Paket.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm

[Scubi]

Hallo Timm,

ich habe den Cache und die Komprimierung aus. Allerdings habe ich unterschiedlich große Bilder im Shop. So passen die Bilder mal rein und mal nicht.
Hast Du es auch mit unterschiedlich großen Bildern testen können?

Gruß Alois

[Timm]

Hallo Alois,

der Browsercache ist nochmal was anderes, als der Cache des Shops. Den Browsercache musst du oftmals auch löschen, um Änderungen zu sehen, egal ob Cache im Shop angestellt oder nicht. Bei mir hat es mit der Änderung von Karl funktioniert.

Die Größe der Popupbilder stellst du im Backend unter Bildoptionen ein. Dann wird beim imageprocessing aus den original Images unter anderem ein Popup_image erzeugt, dass genau so groß ist, wie in der Einstellung vorgegeben. Kann deshalb eigentlich nicht unterschiedlich groß sein. 

Hast du die Einstellung vielleicht mal geändert und danach nicht für alle Bilder nochmal das imageprocessing durchlaufen lassen? Dann könnte es unterschiedlich große Bilder geben.

Gruß Timm