Beiträge von Jochen S.

    Hallo Zusammen,

    habe den Blog etwas umgestaltet, straffer und strukturierter in der Darstellung.


    Eine große Frage bleibt: Wie bekomme ich den Link zum Artikel, wie er unter der Headline liegt, auch unter das Bild?

    Meine Tester stolpern da regelmäßig, weil sie intuitiv auf das Bild klicken und dann nix passiert.



    Gerne hätte ich den Text & Link "Weiterlesen..." auch fest verdrahtet, z.B. über ein ::after oder so. Momentan wird er vom display: none des Überhangtextes erwischt. Komplettes Blog-CSS anbei.


    Wäre toll, wenn jemand einen Tip hätte. Viele Grüße & Danke.


    Zeta-Block-strukturiert-CSS.txt

    Danke Herr S.

    • Firewall ist ausgeschaltet
    • Provider sieht den erfolgreichen LogIn, Speicherkontingent noch viel Platz
    • Mit FileZilla klappt's ja auch
    • Passivmodus funktioniert ("Test erfolgreich")
    • Andere Projekte veröffentlichen anstandslos

    Zeta meldet dieses mal (das war neu):

    "Kopiere 277 Dateien auf den Webserver (28 MB)…

    Server-Verbindung wird hergestellt…

    Server verbunden.

    Fehler - Timeout exceeded.

    Fehler - Das angegebene Argument liegt außerhalb des gültigen Wertebereichs.

    Parametername: position.


    Weiß nicht was das bedeutet, aber der Fehler beschränkt sich wie gesagt auf das eine Projekt.

    Nach F7 - Veröffentlichen wird die Verbindung zum Server hergestellt, aber Upload der Files bricht ab.


    Eingrenzung:

    Zeta Producer 15.3.0.0 Business

    Projekt zuletzt bearbeitet vor dem Update auf 15.3

    Beim Öffnen "Projekt muss konvertiert werden" . . . "Konvertierung erfolgreich"

    Ab da tritt der Fehler auf

    Fehler ist wiederholbar mit zurückgespielter Sicherung vom NAS

    FTP-Verbindung serverseitig OK, Upload von Testdaten via FileZilla funktioniert

    Andere Projekte in Zeta 15.3 veröffentlichen problemlos. Scheint am konvertierten Projekt zu liegen


    Protokoll anbei. Weiß jemand Rat? Vielen Dank im Voraus.


    Zeta Producer Fehlerprotokoll Mittelrheinische.txt

    Vielen Dank für die Hilfe und meine Bitte um Verzeihung: Hatte das Thema aus den Augen verloren.


    <div id="sonderangebot"></div> funktioniert wie beabsichtigt. Sprungmarke ist auf der Seite unsichtbar.


    Mein Fehler war in der Tat die fehlende schließende Klammer.


    P.S. Zeta Producer 15.1.1.0 Business

    Ich habe eine Seite mit FAQs, für jede Frage einen eigenen Textartikel. Alle getrennt nach Darstellung "Hier beginnt ein neuer Container".
    Ich möchte oben auf der Seite die Headlines aller Artikel aufgelistet haben mit Links zum jeweiligen Artikel.


    Problem 1

    Weder das Widget Artikelübersicht noch das Widget Artikelliste sortieren korrekt. Also einfach in der Reihenfolge, wie die Artikel auf der Seite stehen.


    Problem 2

    Neue Artikel werden in den Ergebnislisten beider Widgets scheinbar willkürlich platziert, die letzten zwei Artikel der Seite werden gar nicht angezeigt.


    Was tun?


    Windows 10 Pro

    Zeta Producer 15.1.1.0 Business Layout Producer Responsive

    Danke für die superschnelle Antwort. Klappt.


    Hab's eben ausprobiert: Quelltext-Widget eingefügt vor dem Artikel. Inhalt: <a id="sonderangebot"</a>. Das Ganze mit <div zerschießt das Layout.


    Restproblem: Damit gibt's in der Darstellung natürlich einen zusätzlichen Leerraum über dem Artikel.


    Gibt es im Zeta eine Möglichkeit / einen Trick, die Sprungmarke z.B. in die Headline des vorhandenen Artkels einzubringen?

    Hallo Zusammen, habe nix gefunden, daher hier die Frage:


    Kann ich die automatisch generierte ID eines Artikels nachträglich bearbeiten?


    Als Beispiel aus einem typischen Quelltext: <div id="a6931" data-article-id="6931" data-zpleid="6931" class="articlearea zpwText"> <h2>Artikel Headline</h2> </div>


    Es wäre aus verschiedenen Gründen gut, diese Sprungmarken in Links "sprechend" notieren zu können. Als Beispiel: xxxxx.de/yyyyyy.html#sonderangebot


    Hoffe ich hab's verständlich beschrieben. Geht das?

    Hallo Zusammen,


    ich möchte im Layout Poster Responsive im mobilen Menü per CSS padding und font-size der Menüpunkte ändern (größer, eingerückt).


    Ich kriege im Inspektor nicht den CSS-Selektor raus. Das horizontale Desktop-Menü ändert sich immer mit.


    Kann wer helfen? Wäre klasse.


    Viele Grüße und Danke, Jochen


    Hallo Zusammen,

    ich habe zwei kleine Bild-Artikel im Layout untereinander stehen (farbig unterlegt im Screenshot, ganz rechts).


    Auf Smartphones werden die mir zu groß dargestellt, deshalb ist inline ein max-width: 30vw; eingefügt.


    Jetzt hatte ich erwartet, dass die auf kleinen Devices nebeneinander stehen. Ist ja genug Platz dafür da. Die werden trotzdem untereinander angezeigt.


    Wie kann ich erreichen, dass die nebeneinander angezeigt werden?
    Viele Grüße und Danke, Jochen


    Zeta Producer 15.0.1.0 | Layout: Top Responsive

    Hallo Uwe,


    ich verstehe Ihre Beschreibung so, dass Sie das Foto per Widget im Raster des Container einfügen, als als Bild oder in einem Text.


    Wenn Sie das Foto stattdessen in den Darstellungsoptionen des Containers einfügen, wird es randlos dargestellt. Die Größe des Bildes hängt dann aber vom Container ab: Je höher der Container, desto mehr Höhe vom Bild wird angezeigt.


    Hab's hingekriegt. Automatisches Einfärben von Containern. Poste die Lösung hier, falls mal jemand im Forum hier so was sucht. Gilt für das Layout Top Responsive.


    CSS
    </style>
    .styled:nth-child(2n+1)::before, .styled:nth-child(2n+1)::after {background-color: #ECDC88 !important; }
    .zpContainer.jscc.styled::before, .zpContainer.jscc.styled::after {background-color: inherit !important; }
    </style>


    Erste Zeile: Die Schrägen werden im Original-Design über die Klasse styled getriggert. Die wird einem Container zugeordnet, sobald oben in der Darstellung Hintergrundfarbe etc. manuell eingestellt werden. Für das eigene CSS reicht es, diese Klasse im Feld CSS-Klasse: einzutragen, um die Schrägen mitzunehmen bei der automatischen Einfärbung


    Zweite Zeile: Die eigene Klasse jscc dient dazu, Ausnahmen zu ermöglichen, im Bild der rote Container. Es hebt die erste Zeile auf und lässt die Farb-Einstellung oben in der Darstellungsoption in der CSS-Kaskade durch.


             



    Eine Frage an die Moderatoren hier im Forum: Wo sind denn solche Themen wie meine Eingangsfrage gut aufgehoben? Besser im Entwicklerforum vielleicht?


    Der Anlass meiner Frage: Ich bemühe mich, das Problem transparent zu beschreiben und auch zu zeigen, dass ich vor dem Posting selbst versucht habe, eine Lösung zu finden. Nur sind die Antworten tendenziell so, als hätte ich nach der Bedienung von Zeta Producer gefragt. Zitat "wenn Sie das einfach über die Darstellungs-Optionen machen". Nicht falsch verstehen bitte, ich will Ihnen mit diesem Zitat nicht zu nahe treten, Sie haben bestimmt alle Hände voll zu tun und Sie machen einen hervorragenden Job. Ich bin dann einfach nur enttäuscht und denke, ein Hinweis in der Art "schauen Sie sich mal die Klasse styled an" hätte mir doch schon weitergeholfen.


    Lange Rede: Ich liebe den Zeta Producer und wertschätze das Forum hier. Nur, stören will ich auch nicht oder das Gefühl haben, den Support mit unangebrachten Fragen zu belätschern.


    Ich würde mich freuen, von Ihnen zu hören. Danke.

    Vielen Dank für Ihre Antwort.


    Das mache ich bisher über die Darstellungsoptionen (Die neue Seitenleiste macht das sehr viel leichter. Klasse Neuerung!). Auf die Schrägen kann ich nicht verzichten, die ziehen sich durch bis in die Plakatwerbung https://www.kuta-rauenthal.de


    Unangenehm ist nur, dass sich die Inhalte mancher Seiten öfters ändern. Kommt ein neuer Container dazu oder verschwindet einer, muss ich darunter den Farbrhythmus immer einzelweise von Hand korrigieren. Ist nicht schlimm, werde ich weiter so machen. Also nur der Vollständigkeit halber:


    In den Developer-Tools bin ich daran hängengeblieben, dass die background-color inline über eine ID zugeordnet wird z.B. #container_442. Macht ja Sinn, über Klassen lassen sich keine einzelnen Container adressieren. Mich hätte jetzt interessiert, ob und wie data-zpeleel als Selektor im eigenen CSS nutzbar ist.


    Wie gesagt, wäre aus Freude an der Sache gewesen und aus Freude am Zeta Producer (bin seit ca. Version 8 dabei, bestes CMS weit und breit). Das führt aber hier im Forum wohl zu weit.

    Hallo Zusammen,
    ich verwende folgendes CSS im Attribut "additional_css", um Containern auf einer Seite abwechselnde Hintergrundfarben zu geben:


    Code
    <style>
    .zpContainer.zpBreakout:nth-child(2n+1){background-color: lime; }
    </style>


    Das klappt soweit auch, nur hat das Layout Top Responsive eine sexy Besonderheit: Das Anschrägen der Container. Im Layout-Editor zu finden bei Allgemein / Design / Schrägen: an
    Das angegebene CSS lässt diese Schrägen beim Einfärben leider außen vor. Die behalten die Hintergrundfarbe der Seite, so daß alles wieder stramm waagerecht geteilt erscheint.


    Wie muß ich den Selektor formulieren, damit die Schrägen auch gefärbt werden? Hat jemand eine Idee? Wäre toll.


    Viele Grüße und Danke, Jochen



    Zeta Producer 15.0.1.0, ZP15B, 22.05.2019 14:44:52

    Layout: Top Responsive $Id: default.html 73803 2019-03-07 09:50:04Z sseiz

    Hallo Hanabi,


    markieren geht mit Shift und Ctrl. Wo wir uns verpasst haben, ist das Vorgehen:

    • Ich habe die Widgets im Spaltenmodus mit der Maus verschoben. -> Klappt nicht.
    • Du hast scheinbar Kontextmenü "Ausschneiden" und "Einfügen" verwendet. -> Klappt :-)

    Die Mausschieberei, sowohl im LiveView- als auch Spaltenmodus, scheint nur für einzelne Widgets gedacht. OK, gut zu wissen.


    ------------------------------------------------------------------------------------------------------------------------------------------------------------


    Jochen



    Hanabi


    Hallo Zusammen,


    gibt es eine Möglichkeit, mehrere Widgets zugleich auf einer Seite zu verschieben?


    Grund der Frage:

    Ich betreue eine Website, auf der Möbel gezeigt werden. Kein Onlineshop, die Website soll informieren und zu einem Besuch anregen.

    Jedes gezeigte Möbel besteht aus einem Text- und einem Bildwidget. In einer Reihe können mehrere Möbel nebeneinander gezeigt werden

    Im Rahmen der Pflege kommen neue Möbel dazu, andere fliegen raus, die Reihenfolge/Positionierung der gezeigten Möbel kan sich ändern.


    Früher wurde pro Möbel ein Textwidget verwendet, Text und Bid waren per Tabelle platziert.

    Nachteile: Eingeschränkte responsive Darstellung auf SmartPhones, kein "Bild vergrößern bei Klick".


    Mit Version 14 von Zeta Producer (oder war es 13?) umgestellt auf das Grid-System mit zwei Widgets pro Möbel wie eingangs beschrieben. 1A Darstellung auf SmartPhones.

    Nachteil: Erst den Text verschieben und dann das verbliebene Bild suchen, um es nachzuziehen. Fordert enorm Konzentration und ist fehleranfällig (Falsches Bild zum Text).


    Am liebsten wäre mir ja das alte Kombi-Widget "Text und Bild", aber das passt laut Forum hier leider nimmer in des Grid-Konzept.

    Ganze Reihen oder Container verschieben geht auch nicht, weil teilweise zwei oder drei Möbel in einer Spalte dargestellt sind, aber nur eines davon verschoben werden soll.


    Soweit mal, hoffe das Problem ist verständlich beschrieben.


    Viele Grüße, Jochen

    So, das Eichhörnchen hat's hingekriegt. Ich poste es hier, falls es mal jemand brauchen kann:


    CSS
    .submenu:not(.overflown) .haschilds > a[href="ausstellung.html"] + ul{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }


    Der Selektor war eine harte Nuss, hat mir ein Frontend Developer geholfen: submenu ist die Klasse, wird aber nur getriggert, wenn nicht gleichzeitig Klasse overflown (das mobile Menü).

    Die überlange Menüliste wird anhand ihres Links auf ausstellung.html identifiziert. Das ist unsauber aber eine pragmatische Lösung, weil sich die Anzahl an children nicht so einfach abfragen lässt. column-count funktioniert nur in neueren Browsern. In älteren Releases und in allen aktuellen IE und Edge bleibt die Liste einspaltig. Man kann's bestimmt emulieren, das war mir aber auch mit dem Zeitdruck erstmal zu viel.

    Nachtrag: Die Lösungsansatz lautet #header #nav > ul ul { column-count: 2; } im Attribut "additional_css".


    Jetzt fehlen nur noch zwei Bedingungen:

    (1) Nur zweispaltig, wenn die Zahl der Menüpunkte > 10

    (2) Nicht im mobilen Menü, da immer einspaltig


    Kriege ich auch noch raus oder jemand hier mag mir helfen. Mühsam nährt sich das Eichhörnchen ;)

    Oh hallo andima, habe nicht mitbekommen, dass noch jemand geantwortet hat. Die Seite von Mario ist in der Tat eine sagenhafte Quelle.


    Vielen Dank auch, die Idee an sich finde ich clever, ich will mich nur so wenig als möglich vom Standard des Layouts entfernen. Anzahl und Sortierung der Menüpunkte wechselt auch öfters, da muss die Aktualisierung ohne Handarbeit gehen. Sonst werde ich noch die Fehlerquelle Nr. 1 8o

    Danke für die Antwort Herr S.


    Dass Zeta keine zweispaltigen Menüs anbietet ist mir bewusst.


    Der Vorschlag mit den Unterseiten: Der Betreiber will Vielfalt signalisieren. Beispiele für großflächige Navigation gibt es genug im Web.


    Gibt es Jemanden hier, der mir das als Entwicklungsauftrag umsetzen könnte?

    Hallo Zusammen,


    in einem Projekt (http://www.krebsmuehle.com, Layout Flat Responsive) wird die Anzahl der Unterseiten stetig größer. Das wird jetzt zum Problem bei manchen Desktopmonitoren, wenn das ausgeklappte Menü unten aus dem Bild ragt. Die wenigsten User helfen sich intuitiv mit MouseWheel oder den Pfeilen auf der Tastatur. Muss eleganter gehen.


    Die beste Lösung wäre, die Unterseiten zweispaltig darzustellen, solange die Breite des Devices das sinnvoll zulässt. Eine Simulation in Photoshop anbei.


    Habe versucht, mich dem CSS zu nähern (#header #nav ul ul li a) und auch versucht, aus dem Widget "Untermenü" zu lernen. Da kann man ja die Variable "column_count" belegen ...

    ... erfolglos. Bin kein CSS-Profi.


    Kann mir jemand helfen?


    Viele Grüße & Danke, Jochen


    Screenshot Ist-Zustand Simulation Soll

    Peinlich peinlich . . .


    . . . das Problem saß vor dem Bildschirm, dumm gelaufen.


    Das Smartphone hatte das SVG sehr wohl als Hintergrundbild angezeigt. Es wurde nur so saublöd skaliert, dass das gesamte Display des Telefons von einem transparenten Bildausschnitt gefüllt war. Daraus entstandenes Missverständnis: Siehe #1.


    Ursachenforschung:


    1) Das Tema "Viewport" hat's in sich. Die Simulation eines LG G4 auf dem Desktop ist nun mal nicht das physische Telefon. In der Simulation war der Hintergrund falsch skaliert.


    2) SVG-Bilder zur Verwendung im Internet haben im Gegensatz zu Bitmaps keine Dimensionen, also keine Höhe oder Breite. Bei Adobe Illustrator ist das z.B. die SVG-Option "Responsive". Die entfernt alle Seitenmaße und Seitenverhältnisse in der erzeugten Datei.


    3) Ein dimensionsloses SVG als background-image wird automatisch bildschirmfüllend gerendet. Kommt jedoch irgendwie irgendeine Maßangabe in's Spiel, wird das SVG sofort behandelt wie ein JPG oder PNG d.h. als hätte es eine gegebene Höhe oder Breite. Dazu reicht scheinbar schon ein background-size contain oder cover. Mit Ergebnissen, die ich nicht durchschaue . . .


    4) Einen ähnlichen Effekt hat background-attachment fixed, wenn der Hintergrund nicht mitscrollen soll: Das SVG wird (mit welchen Werten auch immer) skaliert. Das lässt sich durch ein background-size 100% problemlos korrigieren.


    Gelernt: Zeta Producer kann bereits SVG als Hintergrundbild. Sorry für den Anfangsverdacht "Wird wohl tief im Zeta Producer liegen", Sie machen einen Klasse-Job.

    Hallo Hanabi,


    das meinte ich mit "längere Geschichte". Ich kann mich an die Diskussionen hier vor ein oder zwei Jahren erinnern :)


    SVG als Hintergrundbild funktioniert ja bereits . . . auf dem Desktop, auch wenn da ein beliebig schmaler Viewport emuliert wird. Nur auf dem Smartphone nicht.


    Wie auch immer, ich hoffe noch auf eine Lösung hier im Forum.


    Wenn nicht ist es auch halb so schlimm: Ich kann den Hintergrund ja immer noch durch ein JPG ersetzen.