Theme Brooklyn Ankündigungsleiste bearbeiten, brauche Hilfe

[Dhillon]

Moin Leute,

ich weiß ihr könnt mir weiterhelfen.

Ich würde gerne in meinem Store die Ankündigungsleiste bearbeiten und in drei Teilen aufteilen.

Zurzeit kann ich nur in einer Zeile alles schreiben, aber ich würde gerne getrennte Ankündigungen schreiben, leider geht es mit Leertaste nicht.

Bsp.  Unten in klammern soll die Ankündigungsleiste dargestellt werden.

Aktuell kann ich nur ein kompletten Satz schreiben                    --> (........................................................................................................)

ich würde aber gerne so in der Ankündigungsleiste schreiben   --> (............................        ..............................       ......,....................)

Bitte um Hilfe. Danke euch 😄

[Sandor]

Hallo Dhillon,

ich weis gerade nicht welche Ankündigungsleiste du meinst, aber versuch mal ob du mit "<br>" einen Zeilenumbruch hinbekommst, oder mit "\n".

Bitte nur den Inhalt zwischen den "" verwenden...

hoffe konnte weiter helfen

Grüße Sandor

[Dhillon]

Hallo Sandor,

danke das du mir hilfst. Leider funktioniert es nicht, was du vorgeschlagen
hast.

Also ich meine wenn man auf der Startseite den Header bearbeitet. Da kann
man ja Logo usw einfügen. Wenn man im Header jetzt herunter scrollt ist ein
Bereich wo „Ankündigungsleiste“ steht. Also du kennst es sicherlich wenn
man auf einen onlineshop geht und oben ist ein Banner wo zb. steht
kostenloser Versand ab .... oder andere Sachen eben. Bei mir kann ich nur
alles in einer Zeile schreiben, würde gerne aber getrennte Sachen drauf
schreiben.

Hoffe du hast verstanden.

[Sandor · Accepted solution]

Hallo Dhilon,

jetzt verstehe ich was du meinst...

Geh im Backend auf Onlineshop => Themes da auf Actionen => Code bearbeiten

Auf der linken Seite siehst du dann das Verzeichnis deines Themes, unter Sections findest du die Liquid Datei announcement-bar.liquid

 Da findest du die Zeile "<p class="announcement-bar__message">{{ section.settings.text | escape }}</p>", bei mir ist es in der Zeile 31...entferne an der stelle das " | escape ",

"<p class="announcement-bar__message">{{ section.settings.text }}</p>" so sieht es dann bei mir aus...danach speichern...

Nun kannst du im Text Feld für deine Ankündigungen auch HTML Elemente verwenden, sprich für deinen Fall kannst du nun <br> für einen Zeilenumbruch verwenden...aber immer mit Vorsicht nutzen, stelle immer Sicher das was du eingibst, immer valides HTML ist...

Hoffe das bringt dich weiter,

Grüße Sandor

[Dhillon]

Sandor, du hast den Tag für mich echt gut gestartet😄 danke dir

escape zu entfernen fand ich unter sections->header.liquad und rest wie du
gesagt hast, danke dir nochmals.

wo finde ich diese Befehle im Internet zu html?
zb.
bedeutet Zeilenumbruch, dass habe ich gelernt jetzt😄

ich brauche aber leertaste

ich will text dort so einfügen ...... ....... .......
also immer wo die Punkte stehen da soll ein Text stehen, ich denke mal ich
brauche jetzt nur den html Befehl dafür.

Danke dir nochmals😄

[Dhillon]

Sandor ich habe jetzt fast 3 Stunden gesucht und ausprobiert, leider aber immer noch nicht geschafft wie ich es haben will.

In der Ankündigungsleiste soll der eine Teil linksbündig sein und der andere rechtsbündig, etwa so:

(xxxxxxxxxxxxxxxxxxxxx                                                             xxxxxxxxxxxxxxxxxxxxxxxx)

Befehle habe ich gefunden dafür:

Textabsatz ausrichten

<p align="left">Textabsatz linksbündig</p>
<p align="center">Text zentriert</p>
<p align="right">Text rechtsbündig</p>

Der eine Text geht nach links, allerdings wenn ich dasselbe mit den anderen Text mache welcher rechtsbündig stehen soll, macht der jedesmal einen Absatz erst und dann rechtsbündig.

Etwa so:

(xxxxxxxxxxxxxx

                                                                    xxxxxxxxxxxxxx)

Eigl. soll er ja nur in einer Zeile alles links- und rechtsbündig schreiben --->      (xxxxxxxx                       xxxxxx)

Dann habe ich den Befehl für Zeilenumbruch verhindern <nobr>Text</nobr> gefunden, brauchte auch nichts.

[Sandor]

Hallo Dhilon,

ich habe dir mal eine Vorlage erstellt....schau es dir mal an ob du dies nutzen kannst...

<div style="display: flex;width: 100%;position: relative;">
    <p style=" left: 0; right: auto; position: absolute; ">Textabsatz linksbündig</p>
    <p style=" left: 50%; right: auto; position: absolute; transform: translateX(-50%); ">Text zentriert</p>
    <p style=" right: 0; left: auto; position: absolute; ">Text rechtsbündig</p>
</div>

....hier auch noch eine Saubere Lösung, wo html und css getrennt ist...

<style>
    #custom_notification {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }
    #custom_notification p[class^="align"] {
        position: absolute;
    }
    #custom_notification .align-left {
        left: 0;
        right: auto;
    }
    #custom_notification .align-center {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    #custom_notification .align-right {
        left: auto;
        right: 0;
    }
</style>

<div id="custom_notification">
    <p class="align-left">Textabsatz linksbündig</p>
    <p class="align-center">Text zentriert</p>
    <p class="align-right">Text rechtsbündig</p>
</div>

innerhalb des Style Blockes, kannst du nun die notwendigen Deklarationen vornehmen, wie aussen- innen- Abstände...

Für Aussenabstände kannst du margin verwenden, für die Innenabstände padding

[Dhillon]

 

   

 First of all a really HUGE THANKS to you, that you are helping me, I think your code have I to add in a liquad-file, but no idea in which. In the imagine you can see what the problem excatly is. Maybe that helps.