Jump to content
okwelling

[Gelöst] Layout des Artikel - Beschreibungsfeldes in Version 1.7.2.2 zu schmal

Recommended Posts

Hallo Forum,

Kann mir jemand sagen, wie ich das Artikel Beschreibungs Layout breiter machen kann?

Bei zu viel Text wird dieses Feld zu sehr in die Länge gezogen.

Ich hätte es gern Breit, und es passt sich auch optisch dem Gesamtlayout besser an.

Danke für Eure Hilfe.

Olaf Welling

Edited by okwelling (see edit history)

Share this post


Link to post
Share on other sites

Um welche Shopversion geht es denn?

Bei 1.7 lässt sich mit dem margin in der letzten Zeile einiges machen:

.tabs {
    box-shadow: 2px 2px 11px 0px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    background: white;
    padding: 1.25rem 1.875rem;
    margin-left: -118%;
}

Man müsste natürlich auch in der CSS gucken ob bei kleinerem Bildschirm der Wert geändert werden müsste.

Share this post


Link to post
Share on other sites

Danke für Deine Antwort!

Shopversion ist 1.7.2.2

Wie komme ich in diesen Bereich um es abzuändern?

Danke!

Share this post


Link to post
Share on other sites
Am 1.12.2017 um 9:55 AM schrieb okwelling:

Hallo Forum,

Kann mir jemand sagen, wie ich das Artikel Beschreibungs Layout breiter machen kann?

Bei zu viel Text wird dieses Feld zu sehr in die Länge gezogen.

Ich hätte es gern Breit, und es passt sich auch optisch dem Gesamtlayout besser an.

Danke für Eure Hilfe.

Olaf Welling

 

du könntest wenigstens paar Screenshot machen, oder Link .

Außerdem Textlänge hat nichts mit Layout zu tun.

Share this post


Link to post
Share on other sites

@SliderFlash

Also in gewisser Weise hat die Textlänge schon was mit dem Layout zu tun. Wenn der Kasten so schmal ist das er aus dem Beschreibungstext so viele Zeilen macht, das der Kasten die ganze Seite füllt ist das fürs Layout definitiv unschön.

@okwelling

per FTP gehst du in folgenden Ordner: /themes/deintheme/assets/css und lädst dir die theme.css herunter. In der Kannst du dann nach ".tabs" suchen. Dort ändert du dann das margin-left, speicherst und lädst die Datei wieder hoch. Spätestens nach löschen aller Caches sollte es dann übernommen werden. Und nicht vergessen iene Sicherheitskopie von geänderten Dateien zu machen. Machst du irgendwas kaputt kannst du dann einfach die originale Datei hoch laden.

Share this post


Link to post
Share on other sites

Vielen Dank für die Beantwortung! Anbei ein Screenshot. Es handelt sich um den unteren Teil der Beschreibung, welcher in die Länge gezogen wird.

Olaf Welling5a254c81e1a10_LayoutShop1.7.2.2.thumb.jpg.9910de6d1dd0712d58c17aa69e7b058e.jpg

Share this post


Link to post
Share on other sites

Hallo,

ich glaube es gefunden zu haben. Anbei der Abschnitt. Wie soll das jetzt angepasst werden?

Danke!

Olaf Welling

tabs{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2);margin-top:2rem;background:#fff;padding:1.25rem 1.875rem}.tabs .tab-pane{padding-top:1.25rem}.tabs .nav-tabs{border:none;border-bottom:2px solid #f1f1f1}.tabs .nav-tabs .nav-link{color:#7a7a7a;border:0 solid transparent}.tabs .nav-tabs .nav-link.active{color:#2fb5d2}.tabs .nav-tabs .nav-link.active,.tabs .nav-tabs .nav-link:hover{border:none;border-bottom:3px solid #2fb5d2}.tabs .nav-tabs .nav-item{float:left;margin-bottom:-.125rem}.product-cover{margin-bottom:1.25rem;position:relative}.product-cover img{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2);background:#fff}.product-cover

Share this post


Link to post
Share on other sites

Das wäre dein bearbeiteter Code:

tabs{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2);margin-top:2rem;background:#fff;padding:1.25rem 1.875rem;margin-left:-118%;}.tabs .tab-pane{padding-top:1.25rem}.tabs .nav-tabs{border:none;border-bottom:2px solid #f1f1f1}.tabs .nav-tabs .nav-link{color:#7a7a7a;border:0 solid transparent}.tabs .nav-tabs .nav-link.active{color:#2fb5d2}.tabs .nav-tabs .nav-link.active,.tabs .nav-tabs .nav-link:hover{border:none;border-bottom:3px solid #2fb5d2}.tabs .nav-tabs .nav-item{float:left;margin-bottom:-.125rem}.product-cover{margin-bottom:1.25rem;position:relative}.product-cover img{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2);background:#fff}.product-cover

Das margin-left:-118%; musst du ausprobieren ob es bei dir gut aussieht. Ansonsten mit den Prozent dementsprechend hoch oder runter.

Share this post


Link to post
Share on other sites

Dann wär es das einfachste wenn du einen Link postest. Oder per PN sendest wenn du ihn hier nicht posten willst. Dann kann man direkt in deinem Shop gucken und leichter helfen.

Share this post


Link to post
Share on other sites

Der Shop ist im Wartungsmodus. So bringt uns der Link leider nichts.

Share this post


Link to post
Share on other sites

Hast du einen Cache aktiviert? Ich kann zwar sehen das es eine theme Datei ist und das es in Zeile 1 ist. Wenn du den Cache vorübergehend deaktivierst kan ich genau sehen in welche Datei und in welche Zeile du den Code einfügen müsstest. Aber

.tabs {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    margin-top: 2rem;
    background: #fff;
    padding: 1.25rem 1.875rem;
    margin-left: -100%;
}

scheint auf jeden Fall zu funktionieren wie du es möchtest:

beschreibung.thumb.png.68f13a9ecaedae1ad7062aa926312e23.png

Share this post


Link to post
Share on other sites

Ich habe gerade mal deine theme.css runtergeladen. Das man nichts sehen kann liegt nicht am Cache sondern daran das die Umbrüche in der Datei fehlen. Warum auch immer. Sieht etwas nach Google Optimierung aus...

Habe es jetzt in der Datei geändert und sie dir hier wieder angehangen. Mach mal von deiner Datei eine Sicherheitskopie und lad diese auf deinen Server.

theme.css

Share this post


Link to post
Share on other sites

Hallo Shad86,

Auf dem Desktop sieht es fantastisch aus, Gute Arbeit!

Hatte es eben auf dem Smatphone getestet, kann man leider nicht mehr lesen oder einzoomen.

Gruß

Olaf

Share this post


Link to post
Share on other sites

Dann probier mal diese Datei:

Ich habe da jetzt am Ende

@media (max-width: 767px) {
.tab {
margin-left: 0px;
}
}

eingefügt. Damit sollte bei einer Bildschirmbreite bis 767px das margin left von vorher wieder aufgehoben werden.

theme.css

Edited by Shad86 (see edit history)

Share this post


Link to post
Share on other sites

Ist eingefügt, Ein wenig mehr ist zu sehen, jedoch kommt man nicht an den Anfang des Textes.

Zwischen Beschreibung und Artikel details kann man auch nicht wechseln, da die Button nicht sichtbar werden.

Share this post


Link to post
Share on other sites

Ha schreibfehler...

@media (max-width: 767px) {.tabs {margin-left: 0px;} }

muss es heißen...

 

Edit: Wieso werden zwei } ohne leerzeichen da zwischen immer vom Spam filter ausgeblendet?

theme.css

Edited by Shad86 (see edit history)

Share this post


Link to post
Share on other sites

Jetzt geht es! Muss nur noch den Link verkleinern, da der jetzt über das Textfeld ragt im Hochformat.

Danke das hast Du Klasse gemacht,

Werde noch den gesamten Bestellverlauf prüfen ob der rund läuft.

Wie kann ich mich erkenntlich zeigen?

Share this post


Link to post
Share on other sites

Alles gut, ist nicht viel Arbeit wenn man weiß was man da tut.

Guck dir generell mal die "Element untersuchen" Funktion in Firefox (gibts auch in anderen Browsern, heißt dan naber anders) an. Ist auf dem Rechtsklick ganz unten. Damit kannst du chcken welche CSS Befehle auf ein Element zugreifen und kannst diese ändern. Ist aber nur eine Vorschau. Wenn funktioniert was du getan hast musst es so noch in die richtige Datei schreiben.

Und gerade die CSS Datei würde ich anfangs nicht Cachen oder kompilieren lassen. Das erschwert dir bei sowas die Arbeit. Das kannst du machen wenn der Shop live geht und du definitiv nichts mehr am Aussehen änderst.

Share this post


Link to post
Share on other sites

Herzlichen Dank!

Danke für den Hinweis, werde den Cache deaktiviert lassen.

Habe mir echt schon überlegt alles auf 1.6 nochmal zu machen, Da funktionierte noch Yopto, Sofortüberweisung, und viele andere

Sachen welche hier vorerst nicht gehen.

Gruß Olaf

Share this post


Link to post
Share on other sites

hallo, ich möchte auch gerne wissen wo ich das ändern muss damit es funktioniert. wer kann mir weiterhelfen?

danke

Share this post


Link to post
Share on other sites

Per FTP gehst du in folgenden Ordner: /themes/deintheme/assets/css und lädst dir die theme.css herunter. In der Kannst du dann nach ".tabs" suchen.

In den .tabs Befehl packst du: margin-left: -100%;

Dahinter als neuen Eintrag machst du: @media (max-width: 767px) {.tabs {margin-left: 0px;} }

So ging es beim Threadersteller.

Share this post


Link to post
Share on other sites

danke, ich habe nicht viel ahnung mit bearbeitungen von css. ist es möglich das du mir das vielleicht gerade am richtigen ort rein kopierst. im anhang meine datei.

theme(1).css

Share this post


Link to post
Share on other sites

Es gibt hier ein Unterforum für Jobangebote. Ansonsten solltest du dir schon die erforderlichen Kenntnisse selbst aneignen, wir können hier Hilfe zur Selbsthilfe geben aber nicht für dich die Arbeit machen.

Um es einmal wieder zu erwähnen: Prestashop ist (wie alle Open-Source-Shops) KEIN Shopsystem für absolute Anfänger und Laien! Grundkenntnisse in HTML, CSS, PHP / Javascript sind unbedingt erforderlich, wenn man sie nicht besitzt muß man sie sich aneignen oder man benötigt einen fähigen Mitarbeiter oder Dienstleister.

Share this post


Link to post
Share on other sites

Hallo, ok ich habe mir die mühe gemacht und einen editor runter geladen und es selber zu ändern. ist auch super gegangen, danke. nun aber das problem das unter dem textfeld meine vorschau bilder verschwinden, was muss ich noch ergänzen das diese frei bleiben und das textfeld erst unter den bildern beginnt. und unten am rand bild 2 möchte ich gerne noch etwas abstand bis zum textgrafik.thumb.png.6c11ae8f621fb92bf56b16ad5039d03e.png

Screenshot_2019-10-11 Bademantel für den Hund, von Ruff And Tumble rot.png

Share this post


Link to post
Share on other sites

Freut mich das du es hin bekommen hast.

Wenn die Vorschaubilder abgedeckt werden hast du zu wenig Inhalt der die Textbox sonst unter die Bilder schieben würde. Du kannst es auf normalem Wege machen und die Kurzbeschreibung mit Absätzen auflockern, Staffelpreise erfassen oder Varianten nutzen (z.B. das Material als Variante erfassen, auch wenn dort keine Auswahl statt findet sieht der Kunde die wichtigsten Infos auf einer Stelle).

Oder du machst das ganze per CSS und schiebst die Textbox pauschal um ein paar Pixel runter. Bei .tabs sollte schon ein margin-top drin stehen. Das ist der abstand der nach oben eingehalten werden soll. Mach da die Zahl höher, dann wird der Abstand größer. Denk aber dran das in jedem Produkt die Textbox diesne Abstand ein hält. CSS ist halt global und ändert das immer in allen Produkten.

Wenn du auf die Box einen Rechtsklick machst kannst du bei einigen Browser "element untersuchen" anwählen. befass dich mal mit dieser Funktion. Dort wird dir angezeigt welche CSS Befehle auf dieses Element zugreifen, du kannst neue einfügen und ändern was du möchtest und es wird direkt umgesetzt. So hast du eine Vorschau und weißt nach rum probieren wie weit du die Boxen verschieben musst. Dann änderst du es in der Datei und machst es dadurch für alle sichtbar.

 

Und für die "vielleicht gefällt ihnen auch" Zeile, fügst du bei .tabs einfach ein margin-bottom: 20px; ein. Ob es 20px oder mehr oder weniger ist, kannst du ja mit der neu erlernten Funktion testen 😉 Aber dann Wird genauso wie nach oben, nach unten ein gewisser Abstand eingehalten.

Und du solltest dich wirklich mit den Funktionen auseinander setzen, in deinem Prestashop leben wirst du noch das eine oder andere mal irgendwelche Kleinigkeiten ändern wollen (spätestens wenn du ein neues Modul installierst) und kannst dir dann nicht immer jemanden holen der das für dich macht.

Share this post


Link to post
Share on other sites

Bei solchen Sachen ist ein Link zum Shop sinnvoll, dann kann man selbst per Untersuchen-Funktion schauen, wie's am besten geht.

Share this post


Link to post
Share on other sites

hallo, ist erledigt habe es per css geändert. jetzt aber meine frage warum ist es bei jedem artikel an einer ander stelle (höhe) ich dachte per css ist es immer gleich. was habe ich da falsch verstanden.

Share this post


Link to post
Share on other sites

Das liegt daran, daß sich der Abstand am rechten Block orientiert, der mit "Schnelle und zuverlässige Abholung möglich" endet und der befindet sich je nach dem Inhalt davor nicht immer in gleicher Höhe. Da müßte man wohl die ganze Aufteilung der Seite in der tpl-Datei ändern, das wäre auch deutlich professioneller und kann weniger zu Problemen führen.

Eine schnelle Möglichkeit wäre , in die short_description immer eine Mindestanzahl von Zeilen (ggf. mit nbsp;) zu schreiben.

Share this post


Link to post
Share on other sites

vielen dank für deine info es hat mir sehr weiter geholfen. ich habe jetzt den 3. vom blockreassurance nicht mehr leer gelassen. jetzt passt es für mich so es ist nur minimal zu sehen das es nicht immer den gleichen abstand hat. danke

Share this post


Link to post
Share on other sites

jetzt zu einem anderen problem ich habe ein ampel modul installier das laut beschreibung zu meiner version passt leider fünktionierte es nur einmal jetzt wird es nur noch falsch angezeit. wie kann ich ein modul ganz entfernen und neu installieren. ich habe es versucht zu deistallieren aber meine einstellungen von der farbe sind dann nach der neuinstal immer wieder meine also werden doch nicht alle einstellungen gelöscht. wie kann ich das manuel machen.

Share this post


Link to post
Share on other sites

Knos, es macht weder Sinn noch entspricht es den Regeln dieses Forums in einem thread mit einem speziellen Thema eine Frage zu einem neuen Problem zu stellen.

Mach also einen neuen thread mit sinnvollem Titel auf, diesen, bereits als gelöst markierten thread schliesse ich.

Whiley

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More