Views Theme - css/less ändern

Shopware 5 Themes & Design
1

Hallo,

ich habe für das Views Theme in der index.tpl diesen code eingefügt um ein Freitextfeld im Produkt anzuzeigen:

{extends file="parent:frontend/detail/index.tpl"}

{block name='frontend_detail_data_attributes'}
{$smarty.block.parent}
{if $sArticle.attr1}


{s name="DetailAttributeField1Label"}{/s}:



{$sArticle.attr1}


{/if}
{/block}

Jetzt würde ich gerne den Stil für die im Freitextfeld eingefügten Bilder anpassen. Was muss ich in welche.less Datei schreiben?

Der inspector von Firefox zeigt mir für die Bilder folgenden CSS-Pfad an.

html.no-js.has--history.has--localstorage.has--sessionstorage.has--cssanimations.is--firefox.is--gecko body.is--ctl-detail.is--act-index.has--breadcrumb.has--page-preload.has--loaded div.page-wrap section.content-main.container div.content-main--inner div.content--wrapper div.content.product--details div.product--detail-upper.block-group div.product--buybox.block.is--wide li.base-info--entry.entry-attribute div.entry--content p img#tinymce-editor-image-aeab0962-dd83-44e1-9550-a06ae266c8a4.tinymce-editor-image.tinymce-editor-image-aeab0962-dd83-44e1-9550-a06ae266c8a4

Ich hab versucht in der _modules/detail.less „entry–content“ anzupassen, leider ohne Erfolg.

LG

2

In welche Datein Du es reinschreibst, das ist egal. Die Struktur sorgt nur für Deine Nachvollziehbarkeit.

Ansonsten, bevor Du loslegst, ziehe Dir das mal rein: https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/aenderungen-am-template-vornehmen

1 „Gefällt mir“
3

Moin,

 

aktivier mal im Theme " CSS Source Map erstellen ".

Findest Du unter: Einstellungen - Theme Manager - Einstellungen

 

Dann kannst Du auch die Pfade besser lesen.

1 „Gefällt mir“
4

@NextMike‍

Ja, habe gerade gelesen das ich das auch in die all.less schreiben könnte.
Dein link hab ich vorhin schon gelesen, leider steht da nichts über css Anpassungen drin.
Das Feld funktioniert ja auch soweit. Wenn ich die Style Änderungen direkt in das html im Editor mit reinschreibe, funktioniert es auch. Da meine Artikel aber alle dieses Feld bekommen sollen, wollte ich das vermeiden. So müsste ich nur die Bilder im Editor einfügen und die all.less sorgt für die richtige Formatierung. Leider weiß ich nicht was ich dort reinschreiben soll. Alles was ich versucht habe hatte keine Auswirkungen.
Ich habe in den Template Dateien einen einzigen Eintrag für die Klasse „entry–content“ gefunden, in der detail.less. Wenn ich da etwas ändere funktioniert es aber nicht.
Der inspector sagt das das img Element irgendwoher den style display: block; bekommt. Leider hab ich nicht gefunden wo. Will das aber auch nicht global ändern sondern nur für dieses Freitextfeld.

5

@NahtlosShop‍

Das war definitiv schon mal ein guter Tip!
Dadurch bin ich drauf gekommen das es die detail.less nicht nur vom plugins/Theme Ordner mit nimmt, sondern auch die vom normalen Responsive Theme.
Wenn ich im inspector das img Element ändere, wird es immer von dem img Element aus der global.less überschrieben. Aber das kann ich ja schlecht ändern.
Ich werde mal weiter suchen, vielleicht finde ich ja noch wohin ich was schreiben muss.

6

Habs gelöst. In der all.less das hier eingefügt:

.entry--content p img{
	display: inline-block;
}