Ihr seid schlau und guckt euch den Code mit "Element untersuchen" bzw. mit den Chrome Dev Tools an.
Das ist auf jeden Fall schon der erste richtige Schritt in einfache Theme Entwicklung.
Jetzt habt ihr ein Element gefunden und wollt es anpassen.
In den Chrome Developer Tools habt ihr es schnell gefunden.
Rechts an der Seite steht auch der dazugehörige CSS Code.
Super einfach.
Leider müsst ihr teilweise echt viel scrollen, weil einfach sehr viel CSS genutzt wurde.
Dafür gibt es heute den Pro-Tipp!
Auch wenn es für viele offensichtlich ist:
Es gibt eine Suche!
Einfach mit Cmd + F die Suche aktivieren und Code eingeben: z.B. text-decoration
Jetzt wird das gesuchte markiert und alles andere ausgeblendet.
So findet ihr schnell die gesuchten CSS Befehle und alle sind glücklich.
Heute wirklich nur ein kurzer Pro-Tipp. Beim nächsten Mal dann wieder mehr.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
Stephan
weißt du warum bei den Chrome Dev Tools jedesmal der webcache pfad angezeigt wird, sobald man ne änderung vornimmt?
Habe die CSS Source Map aktiv im backend, aber wenn ich z.B. etwas inspiziere und dann sagen wir nen border im Dev-Tool ausblende wird mir der Pfad zum webcache angezeigt, statt der richtig. Also statt "header.less" dann "../web/cache/ganzVieleZahlen.css". Bei Firefox developer edition funktioniert es.
Hoffe du weißt was ich meine und kannst mir helfen :)
MfG
Alexander Wolf
normalerweise müsste das auch in Chrome richtig angezeigt werden. Vielleicht den Browser neustarten?
Hast du in den Chrome Dev Tools unter Einstellungen die Checkbox "Enable CSS source maps" aktiv? Das könnte auch ein Problem sein.
Hier ist ein interessanter Beitrag zu diesem Thema: robdodson.me/debug-less-with-chrome-developer-tools/#settingupchromeahrefidsettingupchromea
Gruß
Alexander
Was denkst du?