Hilfe! Suchleiste lässt sich einfach nicht anpassen!

Shopware 5 Themes & Design
1

Hallo zusammen  Smile

Folgendes:

Wöllte die Suchleiste im Header gern anpassen. Sie soll breiter werden und einen Rahmen bekommen.

Habe diesen Code mit Stylebot generiert:

i.icon–search {
    margin-right: -230px;
}

input.main-search–field {
    width: 500px;
    margin-left: -18px;
    border-color: #5bc0de;
    border-width: 2px;
}

 

Jedoch nach hochladen und Cache leeren passiert nichts  Undecided

Ist etwa ein Fehler drin, oder habe ich etwas vergessen?

 

Danke schon einmal und viele Grüße

2

Versuch mal folgendes:

.navigation--entry.entry--search form.main-search--form input.main-search--field {
    border: 1px solid red;
    width: 550px;
}

.navigation--entry.entry--search form.main-search--form {
    width: 550px;
}

.main-search--form .main-search--field {
    padding: .5625rem .5625rem .5625rem .5625rem;
}

 

3

Hallo und danke erstmal  Smile

in der Browsererweiterung zeigt es zwar an, dass es funktioniert, jedoch egal wie man die Header Datei ergänzt oder ersetzt übernimmt es keine Änderung.

 

Muss noch etwas in der all.less verändert oder ergänzt werden?

 

 

4

Änderungen werden nur im eigenen Theme gemacht.

Siehe u.a. z.B. hier:

https://developers.shopware.com/designers-guide/

5

@drahtzieher schrieb:

Hallo und danke erstmal  Smile

in der Browsererweiterung zeigt es zwar an, dass es funktioniert, jedoch egal wie man die Header Datei ergänzt oder ersetzt übernimmt es keine Änderung.

 

Muss noch etwas in der all.less verändert oder ergänzt werden?

Leg einfach eine neue CSS Datei in einem Texteditor an, z.B. _ my-awesome.css _.

Dort kopierts Du mein CSS rein! Diese Datei schmeisst Du dann in folgenden Ordner:

/themes/Frontend/DEIN-THEME/frontend/_public/src/css

Um diese Datei dann in Shopware einzubinden, gehst Du in den Thememananger unter:

_ Einstellungen/Thememanger _

Dort klickst du rechts unten auf:

_ Theme konfigurieren _

Dann gehts Du auf den mittleren Reiter _ „Konfiguration“ _ und trägst unter _ „Erweiterte Einstellungen->weitere CSS“ _ Dateien folgendes ein:

That’s it! Wink

 

PS: Vergiss aber ja nicht „DEIN-THEME“ mit Deinem benutzten Themenamen auzutauschen!!!

6

Oder ein eigenes TPL (header.tpl) anlegen, dann ist der Name vom Theme egal:

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

{block name="frontend_index_header_css_screen"}
{$smarty.block.parent}

{/block}

 

7

Klar, kann man natürlich auch so machen, aber ich dachte mir, lieber erst mal kleine Brötchen backen… Wink

8

Danke erst einmal für die Antworten.

Würde es sehr gern über eine header.tpl oder ähnlich über das eigene Theme lösen.

Was müsste alles in der header.tpl drin sein, damit die Suchleiste nur auf der Destop- Ansicht verlängert dargestellt wird?