Beiträge von Mario

  • Bilder Ecken abrunden

    Hier eventuell ein paar Anregungen aus vergangenen Zeiten. :S


    Noch ein kleiner Tipp. Wenn du größere Radien verwendest kann es besser sein den Wert in Prozent anzugeben anstatt in Pixeln sonst ist eventuell in der Mobilen Darstellung nichts mehr vom Bild zu sehen.

  • YouTube responsive

    Ich habe ein kleines Skript gefunden mit welchen man YouTube-Videos einbinden kann ohne das lästige Balken eingeblendet werden wenn der Bildschirm kleiner ist als das eingebundene Video.


    1. Ladet die Zip-Datei herunter "wzp-youtubeflex.zip" und bindet das einpackte Skript in ZP ein. Website > Dateien > Importieren


    2. Kopiert die Objekt-ID des Skipts:


    3. Website > Erweitert > Attribute > body_start hier fügt ihr folgendes ein: <script src="oid://file/wzp-youtubeflex_js"></script>. Den Teil oid://file/wzp-youtubeflex_js ersetzt ihr durch die kopierte Objekt-ID.


    5. Website > Erweitert > Attribute > footer_script hier fügt ihr folgendes ein:

    Code
    <script>
fluidvids.init({
selector: ['iframe'],
players: ['www.youtube.com']
});
</script>


    6. Im Inhaltsbereich das Widget Quelltext mit dem YouTube-Einbettungscode einfügen. Achtet darauf das Höhe und Breite das richtige Seitenverhältnis haben. Am besten die echte Größe des Videos eintragen. Also zum Beispiel: width="1920" height="1080"


    Das Video sollte nun immer das richtige Seitenverhältnis haben und kann über das ZP-Grid-System flexibel eingebunden werden.


    PS: Wenn das Skript nur auf einigen bestimmten Seiten verwendet wird solltet ihr dieses auch nur dort einbinden. Anstatt Website > Erweitert > Attribute einen Doppelklick auf die Seite und hier unter Attribute entsprechend body_start und footer_script wählen.

  • Bild Hover 1904

    Dieses Widget hatte ich bewusst nur mit Button erstellt. Grund ist das beim Touchscreen der Text gar nicht zu sehen ist wenn das ganze Bild verlinkt ist.

    1. Klick der Text erscheint > 2. Klick auf den Link-Button.


    PS: ich selbst setzte solche animierten Widgets nur ein wenn der Text auch ohne Klick sofort sichtbar ist, oder zumindest ein Teil davon.

  • Link Artikel 2

    Das wird mit dem vorhanden Widget schwierig weil hier einfach die deutsche Lesart "oben nach unten" "links nach rechts" verwendet wird. Hierfür müsste man das Widget grundsätzlich neu aufbauen.

  • WZP Artikel Filter

    Wo und in welcher Datei hast du denn geändert?


    Wenn du in der "widget.json" die Einträge entsprechend fehlerfrei auf 40 erweitert hast musst du in der "standard.html" die Zeile 155 for ( var i = 1; i <= 30; i++){ ändern in for ( var i = 1; i <= 40; i++){.

  • Font Awesome aktuellere Versionen

    Kurz zur Info. Ich hatte damals einige Widgets die FA verwenden mit der Version 5.x laufen. Die FA5-Datei wurde damals mit dem Widget implantiert.

    Nach der Einführung von FA4 in ZP bin ich dann zurück zu FA4 weil die FA4-Icons ja somit sowieso schon in ZP implantiert waren.

  • Widget für eine Abstandseinstellung

    Einfach mal hiermit testen.


    Gehe zu "Einstellungen > CSS" und füge dort folgendes CSS ein:



    Nun gehst du zu einem Artikel wo diese Abstände gelten sollen und klickst und auf das Mischpult > Mehr und trägst unter CSS-Klasse mein_artikelabstand ein. Nun sollten am Desktop oben und unten 20 Pixel Abstand hinzu gefügt worden sein. Auf Bildschirmen die schmaler als 920 Pixel sind verringert sich der zusätzliche Abstand auf 5 Pixel. Generell kann man hier auch mit Minuswerten arbeiten um die Abstände zu verringern. Zum Beispiel margin-top: 5px;.

  • Widget für eine Abstandseinstellung

    Zitat von drcymbal

    ... Du gehst in die Bearbeitungsansicht des Buttons, klickst links unten auf das Reglersymbol, dann auf „Mehr“ und gibst schließlich unter „Inline-CSS“ „margin-top: -5px“ ein. ..

    Genau so löse ich das immer mit den Abständen. Wenn du die gleichen Abstände öfter brauchst oder/und für die Mobile Ansicht andere Abstände benötigst kannst du das auch mit einer CSS-Klasse lösen.

  • "Verbundene" Grafikelemente und Text mit korrekter responsiver Darstellung verwirklichen

    Zitat von jjonline

    es soll also kein Zeilenumbruch stattfinden

    Wie soll das denn funktionieren? 3 Textblöcke nebeneinander am Smartphone hochkant müsste man so klein darstellen das es niemand lesen kann.


    Wenn ich etwas optimal für Desktop und Mobile darstellen möchte lege ich 2 oder auch 3 verschiedene Widgets an die für die jeweilige Darstellung optimiert sind und je nach Seitenbreite blende ich das entsprechende Widget ein.

  • Manche Widgets für MOBILE ....

    Ich habe das CSS nicht getestet weil ich deine Voraussetzungen nicht kenne.



    Zitat von axelemden

    Vielen Dank !! :) Überlagert das CSS jetzt auch die Einstellungen, die ich in "Darstellung-Einstellungen" bereits (notdürftig) vorgenommen habe?

    Was du mit überlagert meinst weiß ich nicht. Aber genau da sollst du ja das CSS einfügen. Wenn du eine CSS-Klasse nutzt die sonst nicht vorkommt hat das keine Auswirkungen auf den Rest der Seite.



    Zitat von axelemden

    Ich kann nämlich noch keinen großen Unterschied feststellen. Oder muss "importent" in die CSS rein?

    Zum testen am besten erst mal größere Abstände nutzen. Ob "important" nötig ist hängt immer vom Layout und dem genutzten Widget ab.

    Wenn du mir Layout und das verwendete Widget nennst kann ich das heute Abend testen.

  • Manche Widgets für MOBILE ....

    Die Frage war nicht so eindeutig um sie deutlich zu beantworten.


    zu1.

    Bei der Erstellung musst du natürlich immer die Mobile Ansicht im Hinterkopf haben. Dese kannst du ja in ZP immer in der Browservorschau testen.


    zu2.

    Das kannst du mit etwas CSS an deine Bedürfnisse anpassen. Indem du dem gewünschten Widget zB. die CSS-Klasse: meinabstand hinzu fügst. Und der Seite folgendes CSS hinzufügst;