NL Archiv Neues Layout: Banner oberhalb Menüleiste

[mirko]

mit dem @import wird der Google-Font Roboto importiert, der wird für die Anzeige der Leiste verwendet. <link rel="stylesheet" ist für das Laden von externen Stylesheets.

[FUN-DIVER]

o.k. hab ich geändert, so funktionierts auch.

Was ist der Unterschied zu den beiden Lösungswegen? Also "@import..." oder "<link rel=..."

[mirko]

ich meine davor, also genau vor


<!--MUST BE FIRST STYLE!-->

[FUN-DIVER]

So wie du es beschrieben hast funktioniert es nicht, Syntaxfehler.

Im <Style> Bereich muss statt
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">
der Text
@import url('https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css');
eingefügt werden, dann funktionierts auch.

Danke für den Tipp

[mirko]

Du musst den Quelltext der Seite anschauen, dann wirst du sehen, dass deine Stylesheets nicht enthalten sind. Die Datei na_start.htm ist die Startseite, in die einzelne E-Mails des Archivs werden Teile der Startseite eingefügt, um den Layout der E-Mail nicht zu beeinflussen. In Der Vorlage vor oder nach

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


angeben, dann sollte es auf jeder Seite funktionieren.

Ebenfalls bei eigenen Änderungen beachten, alle Umlaute/Sonderzeichen müssen als HTML-Entities angegeben werden, weil die Codierung der anzuzeigenden E-Mail beibehalten wird. Ein normaler deutscher Umlaut Ä würde bei einer UTF-8-codierten E-Mail nicht angezeigt werden, nur bei einer iso-8859-1-codierten E-Mail wäre dies korrekt.

[FUN-DIVER]

Korrektur:
Meine Änderungen für das homelink Icon funktionieren für die Startseite,
aber auf den NL-Inhaltsseiten ist im Menü nur das Leerzeichen als Homelink vorhanden, nicht jedoch das glyphicon-home Icon.
Ich kann mir nicht recht erklären warum es hier verschwindet.

[FUN-DIVER]

Hallo
noch etwas Kosmetik:
zur Anpassung an unser Homepage-Layout möchte ich das Homelink Symbol durch das "glyphicon-home" icon ersetzen. Dazu habe ich folgende Änderungen vorgenommen:

Im Header Bereich nach den <meta> Einträgen eingefügt:

Code: Alles auswählen

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

weiter unten den Homelink angepasst:

Code: Alles auswählen

     <HOMELINK>
     <li><a class="home" href="[URL]" title="[TITLE]"><span class="glyphicon glyphicon-home"></span>[LINKTEXT]</a></li>
     </HOMELINK>

und in der Konfiguration im Erscheinungsbild den Link Text für die Startseite durch ein Leerzeichen ersetzt.

Funktioniert für die Startseite, nicht aber für die NL-Inhalte. Dort ist kein Icon für die Startseit mehr sichtbar.
Ich vermute auch hier muss in der function MenuShowFunction(_currentMenuItem, doShow, popupUp) eine Korrektur der Berechnung der linken Position vorgenommen werden?

[FUN-DIVER]

Mirko, Danke für die tolle Hilfe!

Es zeigt sich wieder mal: die SW "SuperWebMailer" und ihr Support durch Dich sind SUPER!
Es verdient den Namen zu Recht!

Gruß
Ulrich

[mirko]

ausrechnen natürlich

dem Bild eine ID geben und die Höhe berechnen

z.B.

Code: Alles auswählen

<img src="https://www.supermailer.de/newsletterarchiv/newsletter_bg600.png" style="width: 100%; height: auto" id="firmenlogo" />

in function MenuShowFunction(_currentMenuItem, doShow, popupUp){

Code: Alles auswählen

  if(!popupUp)
    _currentMenuItem.style.top = _currentMenuItem.parentNode.offsetHeight + -1 + "px";
    else
    _currentMenuItem.style.top = (height * -1) + "px";

ändern in

Code: Alles auswählen

  var firmenlogoHeight = document.getElementById("firmenlogo").getBoundingClientRect().height + 4;
  if(!popupUp)
    _currentMenuItem.style.top = _currentMenuItem.parentNode.offsetHeight + firmenlogoHeight + -1 + "px";
    else
    _currentMenuItem.style.top = (height * -1) + "px";

[FUN-DIVER]

Verbleibendes Problem:
die Auflistung der Inhalte in den Menüpunkten (Jahr bzw. NL Titel) beginnen jetzt zu weit oben (quasi mitten im Bild) und nicht mehr am oberen Rand des Info-Blocks.
Ich vermute hier muss die Funktion
function MenuShowFunction(_currentMenuItem, doShow, popupUp)
angepasst werden, ich weiß nur nicht wie.

[mirko]

Das <spacer></spacer> ist der Platzhalter für "Optional: HTML-Code direkt nach der Info-Leiste".

[FUN-DIVER]

Ich habe die Lösung gefunden:
Um die Startseite und auch die NL Inhalte dynamisch nach unten zu verschieben habe ich bei

Code: Alles auswählen

 <p>&nbsp;</p>
 <spacer></spacer>

in dem <p>&nbsp;<p> Bereich das Leerzeichen (&nbsp;) durch das gleiche Bild wie in der Kopfzeile ersetzt (mit visibility:hidden). Somit wird der Inhalt um den gleichen Betrag nach unten geschoben, wie oben die Infozeile.

Funktioniert bei Startseite und bei den NL-Inhalten.

[FUN-DIVER]

Das ist dann aber statisch. Wenn sich die Breite des Displays ändert, ändert sich die Höhe des Info-Bereiches mit dem Bild. Dann passen die Zeileneinfügungen evtl. nicht mehr.

Ich habe schon probiert das Bild erneut in den Bereich des Startfensters also zwischen </INFOBAR> und <div class="wrapper"> einzufügen und oben vor <spacer></spacer> die Leerzeile zu entfernen.
Das funktioniert für die Startseite ganz gut auch bei Breitenänderung des Displays.

Es fehlt aber noch die Anpassung bei der Anzeide der NL-Inhalte.

Was ist eigentlich der Sinn von <spacer></spacer>?

[mirko]

Bei der Einrichtung des Newsletter-Archivs gibt es das Eingabefeld "Optional: HTML-Code direkt nach der Info-Leiste", dort <p>&nbsp;</p> angeben oder gleich in der Vorlage bei <spacer></spacer> selbst <p>&nbsp;</p> nochmals angeben.

[FUN-DIVER]

O.k.
Wie erreiche ich es, dass die Startseite und auch die Inhalte der NL nicht oben abgeschnitten werden weil sie "hinter" der nun dynamisch höheren Infoleiste beginnen?
Einfach einige <br> einfügen ist nicht zielführend weil nicht dynamisch.