Jump to content

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

okwelling
 Share

Recommended Posts

okwelling Newbie

okwelling

Posted
Posted (edited)

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)
Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

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.

Link to comment
Share on other sites
SliderFlash Proficient

SliderFlash

Posted
Posted
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.

Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

@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.

Link to comment
Share on other sites
okwelling Newbie

okwelling

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

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

Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

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

Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

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.

Link to comment
Share on other sites
okwelling Newbie

okwelling

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  •  eleazar changed the title to [Gelöst] Layout des Artikel - Beschreibungsfeldes in Version 1.7.2.2 zu schmal
  • 1 year later...
Shad86 Newbie

Shad86

Posted
Posted

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.

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

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.

Link to comment
Share on other sites
Knos Newbie

Knos

Posted
Posted

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

Link to comment
Share on other sites
Shad86 Newbie

Shad86

Posted
Posted

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.

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

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.

Link to comment
Share on other sites
Knos Newbie

Knos

Posted
Posted

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

Link to comment
Share on other sites
Knos Newbie

Knos

Posted
Posted

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.

Link to comment
Share on other sites
Whiley Enthusiast

Whiley

Posted
Posted

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

Link to comment
Share on other sites
  • Whiley locked this topic
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...